Option 04 — WTS All directions
Design System
v1.0 · Foundations

Colour carries the page, not white space.

Three saturated grounds — maroon, wine and gold — do the work that margins do elsewhere. A light display serif floats on top of them, one gold marks every action, and nothing is rounded.

01 — Bands, not sections

A page is a sequence of full-bleed bands. Where another system would divide sections with a rule, this one changes ground — maroon, wine, gold, gainsboro, and white where a run of colour needs a rest — and lets the colour boundary do the dividing.

02 — Light type on dark ground

The display serif is Light — weight 300 — and it is usually white on a dark band. That combination is fragile: at 300 on maroon, anything below about 28px starts to disappear, which is why the ramp stops there and everything smaller is Lato.

03 — Gold is the only action

Every button fill is gold, and gold appears as type only on a dark band. The reds are grounds rather than fills — which is the one thing that keeps a palette with three reds in it legible.

The palette
Maroon
#4A0009
Wine
#8A2233
Gold
#BF8B3A
Sienna
#B5533C
Slate
#444C54
Gainsboro
#E7E5E2
The three voices
Aa
Crimson Pro
Display · every heading 28px and up, weight 300.
Aa
Alegreya Sans
Labels and buttons · uppercase, tracked 2px, 13px.
Aa
Lato
Body and interface · the one face lifted unchanged.
Two things that are not Westminster’s

Kepler Std and Alverata are licensed; Crimson Pro and Alegreya Sans stand in for them. Lato is the real thing. And Alarm is an added error colour: the site styles error and success messages identically, both plain black, so it has no error colour of its own to lift. Both are marked in the README.