Tokens

Chapter 26 / 29 · Editorial

Design tokens.

The atomic vocabulary of the brand — colours, type, spacing, radii, motion, shadows. 47 CSS variables. Same values at /api/brand.json for AI agents.

palette · 26 swatches

26.1 Colours

Click any swatch to copy its hex value. Pink-700 is the brand accent — every other colour orbits it.

Accent

Neutrals

Warm cream scale

pink

yellow

green

blue

Semantic

type · 4 faces

26.2 Typography

Four faces. Display + body + mono + serif italic accent.

Bricolage Grotesque

headlines, display, big numbers

The quick brown fox
jumps over the lazy dog
0123456789 — & ! ?
abcdefghijklmnopqrstuvwxyz

DM Sans

body, UI, paragraphs

The quick brown fox
jumps over the lazy dog
0123456789 — & ! ?
abcdefghijklmnopqrstuvwxyz

JetBrains Mono

code, tokens, hex values, technical

The quick brown fox
jumps over the lazy dog
0123456789 — & ! ?
abcdefghijklmnopqrstuvwxyz

Serif

—

The quick brown fox
jumps over the lazy dog
0123456789 — & ! ?
abcdefghijklmnopqrstuvwxyz
scale · 9 steps

26.3 Spacing

A 4px grid. Click any value to copy.

shape · 7 radii

26.4 Radius

Corner curvature, named small to extra-large. Click to copy.

motion · 4 durations

26.5 Motion

Four duration buckets. House easing curve below.

--ease
elevation · 6 tokens

26.6 Shadows

Elevation + the brand's pink halo + focus ring.

protection · 5 rules

26.7 Minimum sizes

Brand-protection rules — never render the marks below these sizes.

  • Full lockup120px / 30mm print
  • Icon24px / 8mm print
  • Wordmark90px
contract · 47 variables

26.8 CSS variables

Every custom property declared in _shared.css. Filter by name. Click any row to copy the variable name (with leading --).

47 vars
Show / hide all (47)
  • #191E32
  • #466099
  • #6E90CC
  • #FFFFFF
  • #FBFAF7
  • #F6F4ED
  • #F4ECE4
  • #E4DCD0
  • #C9B89F
  • #FE84A9
  • #FF5B8D
  • #FF3F7A
  • #FFD878
  • #F9C33E
  • #F9AD03
  • #7DF4D0
  • #47DDB2
  • #37BC9B
  • #5BD9FC
  • #30C4F2
  • #1FAAE8
  • body / main / builder) › --warm-2 inset (--bg + --bg-warm: recessed chrome + wells) › --warm-3 deepest inset only (--bg-sunk) --warm-5/7 retreat to borders / shadows / rare deep wells. Chips/badges already use *-soft tints (never warm), so --warm-3 frees up the moment the split lands. Dark mode runs the inverse logic and is intentionally left untouched (see the dark block: --bg-canvas aliases back to the dark page bg, and .app-shell-main keeps its dark default). */ --bg-canvas: var(--warm-1)
  • var(--warm-2)
  • var(--paper)
  • var(--warm-3)
  • var(--warm-3)
  • var(--warm-2)
  • var(--warm-5)
  • var(--ink)
  • rgba(25, 30, 50, 0.78)
  • rgba(25, 30, 50, 0.7)
  • rgba(25, 30, 50, 0.6)
  • rgba(25, 30, 50, 0.12)
  • rgba(25, 30, 50, 0.06)
  • rgba(139, 115, 85, 0.18)
  • rgba(139, 115, 85, 0.10)
  • var(--accent)
  • var(--pink-700)
  • rgba(255, 63, 122, 0.12)
  • var(--green-700)
  • rgba(55, 188, 155, 0.14)
  • var(--yellow-700)
  • rgba(249, 173, 3, 0.16)
  • var(--blue-700)
  • rgba(31, 170, 232, 0.14)
  • #D64545
  • rgba(214, 69, 69, 0.12)

Want this as JSON? /api/brand.json