A Colour Token Architecture
Extracted from your logo palette. Hue anchored at ~50° (warm amber-brown), chroma peaks in the midtones at 700 — natural for earth tones. The hue shifts slightly warmer (toward golden) at lighter values, mimicking how your logo's creams and tans naturally drift.
Very low chroma at hue 55° — these read as grey but carry a warm undertone. For body text, surfaces, borders, and any element that shouldn't call attention to itself. A pure grey (chroma 0) would feel cold against the brand browns.
Each site gets its own accent hue. Ink blue for editorial gravitas (books), muted sage for gallery restraint (art), and terracotta for warmth and welcome (parent brand). All three share the brand browns and warm neutrals.
Role-based aliases that all three sites share. The primitive tokens (brand-700, neutral-200) get mapped to purpose-based names. This is the DRY layer — change one mapping, every site updates.
Same brand foundation, different accents and surface treatments. Each card previews the dominant mood of its site.
Editorial · Literary · Structured
The Weight of Stars
A blend-genre science fiction novel
Gallery · Restrained · Visual-first
Landscapes in Ink
Traditional drawings, new perspectives
Brand · Warm · Welcoming
Cowboys & Beans
Art · Music · Film · Publishing
Why OKLCH? Equal lightness steps in OKLCH produce equal perceived brightness — so brand-300 to brand-400 feels the same "jump" as brand-700 to brand-800. This is the perceptual uniformity property the Phase 0 research identifies as analogous to equal temperament in music: both uniformise a space that is inherently non-uniform.
Why warm neutrals instead of pure greys? A chroma of 0.01 at hue 55° reads as grey to the eye but doesn't create a cold/clinical dissonance against the warm brand browns. This is Albers's principle of colour relativity in practice — the "grey" changes character based on what's next to it.
Why only 5 accent steps instead of 11? The accents are supporting cast, not leads. Five steps (900/700/500/300/100) give you a dark for text, a medium for buttons, a light for backgrounds, and two intermediaries. If any accent needs the full 11-step treatment later, we can extend — but starting lean keeps the system governable.
The token architecture follows DTCG: Primitive tokens (brand-700) → semantic tokens (interactive-primary) → component tokens (to come, e.g. button-primary-bg). This three-tier stack is what Material Design, Carbon, and Polaris converge on.