Centre Channel — Design System

Colour

ink-black

#0a0a0a

deep-black

#141414

warm-black

#1a1918

charcoal

#2a2a2a

brass

#b8976a

brass-light

#d4b896

brass-dark

#8a7048

cream

#f5f2eb

warm-cream

#ebe6db

stone

#d8d6d0

mist

#e8e6e2

forest

#1e2d24

Sessions material only, never the core brand

Burgundy is parked and does not appear. Forest is Sessions material only, never the core brand.

Typography

display-1display · 500 · 5rem

Centre Channel

display-2display · 500 · 4rem

Centre Channel

display-3display · 400 · 3rem

Centre Channel

h1display · 400 · 2.5rem

The conversation

h2display · 500 · 2rem

The conversation

h3display · 500 · 1.5rem

The conversation

pull-quotedisplay · 400 · 1.25rem

It cuts through everything else to the one thing that matters.

body-lightbody · 300 · 1rem

The centre channel carries the dialogue.

bodybody · 400 · 1rem

The centre channel carries the dialogue.

body-mediumbody · 500 · 1rem

The centre channel carries the dialogue.

Spacing

space-1 · 4px

space-2 · 8px

space-3 · 12px

space-4 · 16px

space-5 · 24px

space-6 · 32px

space-7 · 48px

space-8 · 64px

space-9 · 96px

space-10 · 128px

Radii, shadows and type tracking are not yet defined as tokens — v2 never named them. Documented as a gap in the handback; do not invent values here.

The Mark

Brass on ink

Ink on cream

Cream on ink imagery

The stroke follows the surrounding text colour; the three colourways come free.
The node is always brass.
Clear space equal to the stroke width on all sides.
The opening faces upper right on the 45° centre line. Never rotate or mirror.

Signal

Hairline + node

True scale: a 1px centre line with the brass node.

Hairline + node, magnified

Same tokens, zoomed for legibility.

Bloom

One soft brass bloom at token opacity.

Light reveal

Background lifts from reveal-from to reveal-to.

Parameter	Value
signal-hairline-weight-px	1
signal-hairline-weight-min-px	0.5
signal-hairline-opacity	0.35
signal-hairline-opacity-min	0.2
signal-hairline-opacity-max	0.5
signal-node-diameter-factor	2
signal-bloom-opacity	0.08
signal-bloom-opacity-min	0.06
signal-bloom-opacity-max	0.1
signal-bloom-max-per-viewport	1
signal-reveal-from	#0a0a0a
signal-reveal-to	#141414

All motion is wrapped in prefers-reduced-motion: no-preference. Under reduced motion the demos hold their static end state.