SYSTEM / REFERENCE — TOKENS.CSS

Design system reference

Every value on this site resolves to a custom property in tokens.css. Components consume tokens only — no hardcoded hex, px spacing, or font sizes. Dark mode is a token override on [data-theme], not a second stylesheet.

01 / COLOUR — NEUTRAL RAMP, 11 STEPS

--n0

#FCFBF8

--n1

#F3F1EC

--n2

#E8E6DF

--n3

#D6D4CC

--n4

#B6B4AC

--n5

#908E87

--n6

#6C6A64

--n7

#4D4C47

--n8

#343330

--n9

#1E1D1B

--n10

#121110

01B / ACCENT RAMP, 6 STEPS — INTERACTIVE + STATE ONLY

--a0

#FFE9DC

--a1

#FFC3A1

--a2

#FF8A4D

--a3

#EF4E0B

--a4

#BF3D06

--a5

#832A03

02 / TYPE SCALE — 7 STEPS, ~1.4 MODULAR

--t756PXDisplay

--t640PXPage title

--t528PXSection head

--t420PXLede paragraph

--t316PXBody copy

--t214PXSecondary / dense body

--t112PXMONO LABELS, SPEC ROWS, CAPTIONS

03 / SPACING — 4PX BASE

--s14PX

--s28PX

--s312PX

--s416PX

--s624PX

--s832PX

--s1248PX

--s1664PX

--s2496PX

--s32128PX

04 / GRID — 12 COLUMNS, 24PX GUTTER, 1360PX MAX

1

12

CONTENT SPANS: HEADLINE 1–9 · BODY 1–6 · META RAIL 10–12 · SPEC ROWS FULL-BLEED

05 / RADIUS — 4PX HARD MAX

--r1 · 2PX

--r2 · 4PX

06 / RULES — HAIRLINES, NEVER SHADOWS

--hair · 1PX --line · STRUCTURE

1PX --line-strong · TABLE HEADS, EMPHASIS

07 / MOTION — OPACITY, COLOUR, BORDER ONLY

--d1 · 120MS · HOVER / FOCUS

--d2 · 220MS · PANELS / DISCLOSURE

--ease · CUBIC-BEZIER(.2,0,.2,1)

08 / STATE COLOUR — ACCENT IS THE ONLY VOICE

--accent — LINKS ON HOVER, ACTIVE NAV, FOCUS RINGS, STATUS DOTS, SELECTION

--accent-ink — PRESSED / ACTIVE FILLS, ERROR TEXT

--accent-soft — HOVER WASHES, GRID OVERLAYS. NEVER FOR TEXT.