Visual system
Internal reference. The palette, the ratio it is used at, the type scale, and the rules that keep the site quiet.
Palette
Two layers. Primitives are the raw material and are never referenced in a component. Semantic tokens name a job, and those are what components use, so both themes stay correct from one definition.
Ink 950
#0B0C0D
Ink
Ink 900
#131417
Ink
Ink 850
#1B1D21
Ink
Steel 900
#2A2D31
Steel
Steel 700
#4E535A
Steel
Steel 500
#888E96
Steel
Steel 300
#C3C7CC
Steel
Steel 100
#EBEDEF
Steel
Paper
#FAFAF8
Paper
White
#FFFFFF
Paper
Signal 500
#CE181F
Signal
Signal 600
#B0141A
Signal
Ratio
Proportion is the rule that actually holds the look together.
--background
Warm off-white in light, near-black in dark. Owns the page.
--surface / --muted / --border
Surfaces, hairlines, secondary text. Does the structural work.
--foreground / --accent
Body copy, headlines, and secondary actions. Never a hue, only a value.
--signal
Red. One primary action per screen. Never a background, never a border.
Type scale
display-1
Hero headline
40 to 64px, Archivo 600
display-2
Page headline
32 to 48px, Archivo 600
h1
Section headline
30 to 44px, Archivo 600
h2
Sub-section
24 to 32px, Archivo 600
h3
Card title
18 to 21px, Archivo 600
lead
Standfirst
17 to 20px, Plex Sans 400
body
Running text
16px, Plex Sans 400
small
Secondary
14px, Plex Sans 400
Shape
--radius-control
8px. Buttons, inputs, toggles.
--radius-panel
12px. Cards, media, callouts.
--radius-pill
999px. Status and tag pills only.
Rules
Each one exists because breaking it made the site measurably worse. The reason is kept next to the rule so it can be argued with later.
One signal color, on one element per screen.
Red on the primary action only. When it also floods list rows on hover and rings every button, nothing on the page is urgent any more.
Headlines cap at 64px and weight 600.
The scale used to run to 144px at weight 800. At consultancy scale that reads as volume rather than confidence, and it pushed the call to action below the fold on a laptop.
One ground per page. Sections tint, they never invert.
Alternating light and dark panels made a five-section page read as five different sites stitched together.
One radius scale: 8px controls, 12px panels, pills for tags.
Mixed corner systems are the fastest way to make a careful layout look assembled from parts.
Nothing important is revealed only on hover.
Deliverables used to fade in on hover. On a phone they were simply invisible.
Motion is one fade and rise on scroll. That is the whole budget.
Parallax, magnetic buttons, sheen wipes, and a scroll cue were each defensible alone and unreadable together.
Sections are titled in plain language, never addressed as 01 / 06.
Decimal addressing and mono meta rails told the reader nothing they could act on.