Alkaline descaling for stainless
A non-acid bath for removal of oxide and heat-treat scale on austenitic stainless without intergranular attack.
KDL / v0.1
A design language for an industrial-chemistry brand. This page is self-contained —
tokens, components, and motion below are scoped to .kdl-styleguide
and do not affect the rest of the site until approved.
§ 01 — Foundation
Color
Blue anchors the brand. Cool gray supplies the neutral surface system. Copper accents data and focus — never primary CTAs.
Blue scale
--kdl-blue-50
#e6f4fb
vs #fff — visual
vs #14181d — visual
--kdl-blue-100
#c0e1f4
vs #fff — visual
vs #14181d — visual
--kdl-blue-200
#7ec3e8
vs #fff — visual
vs #14181d — visual
--kdl-blue-300
#3fa5db
vs #fff — visual
vs #14181d — visual
--kdl-blue-400
#1789c8
vs #fff — visual
vs #14181d — visual
--kdl-blue-500
#0078b9
vs #fff — visual
vs #14181d — visual
--kdl-blue-600
#015e92
vs #fff — visual
vs #14181d — visual
--kdl-blue-700
#0d4e73
vs #fff — visual
vs #14181d — visual
--kdl-blue-800
#093753
vs #fff — visual
vs #14181d — visual
--kdl-blue-900
#061f33
vs #fff — visual
vs #14181d — visual
Neutrals
--kdl-gray-0
#ffffff
--kdl-gray-50
#f4f6f8
--kdl-gray-100
#e7ebef
--kdl-gray-200
#cfd6dd
--kdl-gray-300
#a3aeb8
--kdl-gray-400
#6c7682
--kdl-gray-500
#444c56
--kdl-gray-600
#2f353d
--kdl-gray-700
#1f242b
--kdl-gray-800
#14181d
--kdl-gray-900
#0a0d11
Copper + status
--kdl-copper-300
#f0a370
--kdl-copper-500
#c2632a
--kdl-copper-700
#7e3d14
--kdl-success
#1f8a4c
--kdl-warn
#c98a05
--kdl-danger
#b3261e
--kdl-info
#0078b9
§ 02 — Foundation
Typography
Overpass for prose. JetBrains Mono for technical labels, numerals, and signatures.
DISPLAY
--kdl-fs-display / 72px
--kdl-fs-display / 72px
Industrial precision.
H1
--kdl-fs-h1 / 52px
--kdl-fs-h1 / 52px
Engineered chemistry, applied.
H2
--kdl-fs-h2 / 38px
--kdl-fs-h2 / 38px
Process control for serious work.
H3
--kdl-fs-h3 / 28px
--kdl-fs-h3 / 28px
A heading that anchors the section.
H4
--kdl-fs-h4 / 22px
--kdl-fs-h4 / 22px
Sub-heading for inline structure.
LEAD
--kdl-fs-lead / 19px
--kdl-fs-lead / 19px
Lead paragraphs introduce the substance of a section without raising voice.
BODY
--kdl-fs-body / 16px
--kdl-fs-body / 16px
Body copy uses Overpass 400 at 16px with a 1.6 line-height. The goal is calm, legible reading at length — industrial documentation without the dryness.
SMALL
--kdl-fs-small / 14px
--kdl-fs-small / 14px
Smaller passages, secondary callouts, captions adjacent to data.
CAPTION
--kdl-fs-caption / 12px
--kdl-fs-caption / 12px
Tertiary labels, attribution, footnotes.
MONO
--kdl-fs-mono / 14px
--kdl-fs-mono / 14px
NMFC 4915-0 • Class 60 • pH 1.2 • H2SO4 / HNO3
Signature element — eyebrow
The mono uppercase eyebrow with leading horizontal rule is the language's most recognizable signal. Every major section title is preceded by one.
§ 03 — Foundation
Spacing
4 px base unit, 10-tier scale.
--kdl-space-1
4px
--kdl-space-2
8px
--kdl-space-3
12px
--kdl-space-4
16px
--kdl-space-5
24px
--kdl-space-6
32px
--kdl-space-7
48px
--kdl-space-8
64px
--kdl-space-9
96px
--kdl-space-10
128px
§ 04 — Foundation
Shape & elevation
Sharp corners. Crisp 1 px borders. Ambient shadow only on hover and float.
Radius
--kdl-radius-none
0px · Edge / divider
--kdl-radius-xs
2px · Badges, chips
--kdl-radius-sm
4px · Buttons, cards, inputs
--kdl-radius-md
6px · Legacy compat
--kdl-radius-pill
999px · Pills, search
Elevation
--kdl-elev-1
Tier 1
--kdl-elev-2
Tier 2
--kdl-elev-3
Tier 3
--kdl-elev-4
Tier 4
§ 05 — Components
Buttons
Flat blue with a copper underline that slides in on hover. The new signature replaces the offset-shadow lift.
Primary
Secondary (ghost)
Tertiary / text
Icon-only
Before → After
Old —
.nbu-button
New —
.kdl-btn
§ 06 — Components
Form controls
Labels are mono uppercase eyebrows. Focus draws a blue inner ring + copper bottom bar.
Options
§ 07 — Components
Cards
Flat white surfaces, 1 px subtle border, optional corner notch as a blueprint registration mark.
Cast-iron flash striping
Rapid paint removal for gray and ductile iron without dimensional loss or hydrogen embrittlement.
Process equipment imagery
Media slots use a faint blueprint-grid overlay as the visual signature for empty or process imagery.
§ 08 — Components
Accordion
Flat rows. Mono index in copper. Chevron rotates 90° on open.
Steel, stainless, cast iron, aluminum, copper alloys, titanium, and refractory metals. Selection depends on the substrate, the oxide species, and the target finish.
Each product carries an NMFC item number and freight class assigned per the NMFTA classification (density, stowability, handling, liability). The catalog row exposes these as part of the spec.
Yes. Field engineering can audit bath chemistry, equipment, rinse adequacy, and waste handling. Reports are issued within 10 business days.
§ 09 — Components
Badges & callouts
Neutral
Info
Success
Warn
Danger
Active
Specification update
K-Strip 800 now ships in 30-gallon HDPE drums in addition to bulk totes.
Hazmat advisory
Class 8 corrosive — consult SDS section 14 for transport details.
Process verified
Bath audited 2026-04-12 — within control limits.
Recall notice
Lot KX-2204-A is out of spec for free alkalinity. Quarantine and return.
§ 10 — Components
Chemical catalog row
Tabular numerals, mono column headers, copper chips. The visual language for any spec table.
| Product | Family | pH | Temp °C | NMFC | Class |
|---|---|---|---|---|---|
| K-Strip 800 | Paint stripper | 12.8 | 88 | 4915-0 | 60 |
| Kolene SR-220 | Descaler | 13.2 | 72 | 4921-3 | 55 |
| Kolene OX-44 | Oxide remover | 1.2 | 22 | 4918-2 | 70 |
§ 11 — Patterns
Hero / landing
Oversized display type, mono coordinate eyebrow, faint blueprint-grid background overlay at 4% opacity.
§ K-01 — Process chemistry
Engineered chemistries for metal finishing that won’t cut corners.
Sixty years of descaling, paint stripping, casting, and oxide removal — with field engineering wherever the bath is. Built for shops that care about the part that comes out of it.
§ 12 — Patterns
Motion
Crisp, precise easings. No spring or bounce. Reduced-motion users get instant transitions; focus rings remain.
Hover lift — button
Hover the button. The copper underline slides in over 200ms.
Scroll reveal
Scroll this element into view; opacity fades and it lifts 8px.
Revealed element.
Focus ring
Tab to the input. Copper outline at 2px offset.
§ 13 — Patterns
Iconography
Lucide, 24 px grid, 1.5 px stroke. Inline SVG from assets/icons/.
§ 14 — Reference
Tokens appendix
Headline reference. Full token list lives in assets/css/design-system.css.
Color
| Token | Value |
|---|---|
| --kdl-blue-500 | #0078b9 — anchor |
| --kdl-blue-600 | #015e92 — hover |
| --kdl-blue-700 | #0d4e73 — pressed / inverse surface accent |
| --kdl-copper-500 | #c2632a — signature accent |
| --kdl-gray-800 | #14181d — inverse surface |
Typography
| Token | Value |
|---|---|
| --kdl-font-sans | Overpass, system-ui, sans-serif |
| --kdl-font-mono | JetBrains Mono, ui-monospace, monospace |
| --kdl-fs-display | 72px / lh 1.05 |
| --kdl-fs-h1 | 52px / lh 1.10 |
| --kdl-fs-body | 16px / lh 1.60 |
| --kdl-fs-eyebrow | 12px mono uppercase / ls 0.14em |
Spacing
| Token | Value |
|---|---|
| --kdl-space-1..10 | 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 |
Radius
| Token | Value |
|---|---|
| --kdl-radius-sm | 4px (default for buttons / cards / inputs) |
| --kdl-radius-xs | 2px (badges, chips) |
Elevation
| Token | Value |
|---|---|
| --kdl-elev-1 | 1px bottom hairline |
| --kdl-elev-2 | Ambient + 1px border ring |
| --kdl-elev-3 | 4px ambient + ring (hover) |
Motion
| Token | Value |
|---|---|
| --kdl-dur-base | 200ms |
| --kdl-ease-emphasized | cubic-bezier(.2, 0, 0, 1) |