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 · 400 · 5rem

Centre Channel

display-2display · 400 · 4rem

Centre Channel

display-3display · 400 · 3rem

Centre Channel

h1headline · 400 · 2.5rem

The conversation

h2headline · 400 · 2rem

The conversation

h3headline · 400 · 1.5rem

The conversation

pull-quoteheadline · 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 and type tracking are not yet defined as tokens. Do not invent values.

Layout

Token	Value
layout-gutter	clamp(1rem, 3vw, 2.5rem)
layout-section	clamp(3rem, 6vw, 5.5rem)
layout-block	clamp(1.5rem, 3vw, 2.5rem)
layout-measure	46rem
layout-columns	12

One twelve-column grid, gutter-wide gaps. Reading sections put the heading in columns one to four (sticky) and the body in six to twelve. Editorial pages run the main column one to eight with a sticky rail in ten to twelve.
Prose is capped per element at the measure, never by centring a narrower container.
Every section takes the section token top and bottom; heading and body are separated by the block token.
The header has two states: the wordmark over the hero, the crest once scrolled.

Surfaces and objects

No drop shadows. Objects (the bound cover, cards, the hardback) sit flat on mist; cream objects take a 1px hairline edge at ten percent ink so they keep a boundary.
On dark surfaces, hierarchy comes from surface elevation, type scale and hover response only.
Photography replaces drawn objects frame for frame: 4:5 for objects and people, 3:2 for places, available light, no flat lays.

The Mark

Brass on ink

Ink on cream

Cream on ink imagery

The Mark is the script CC crest in a ring (assets/brand/crest.svg). It fills with currentColor, so it takes the surrounding text colour and the three colourways come free.
Brass on ink is for objects (the bound cover, the seat card). Ink on cream and cream on ink are for chrome: header, footer, favicon.
Once per page in the chrome, plus the objects. Never as a pattern, never stacked.
Never rotate, mirror, outline or add a drop shadow. It appears by reveal only.
Clear space and minimum size are not yet defined. It reads at 32px; at 16px the ring is faint, which is the mark's nature.

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.