Design dictionary · three voices · one token set
Instruments, not templates.
Every block here — Foxi chrome, atelier editorial, Rico product — reads the same ink, hairline, panel and accent from one:root. A new site is composed from them by score, not designed from scratch.
- ground
- panel
- band
- gate
- ink
- run
- accent
- warm
- series-3
- series-4
- series-5
- series-6
Voices
Three registers. One temperature.
Atelier editorial
Display type, hairlines, mono captions, square corners, reveals. Gallery-calm; states, never sells.
radius 0 · hairline edges · mono uppercase controls · 96rem shell
FChrome
Cards, controls, forms, pricing. Sentence-case, rounded, panel plates with one shadow step. SaaS marketing furniture.
radius --r-2 · panel plate + hairline · sans controls · 12-column rows
RProduct
Browser frames, spec tables, dashed accent rails, mono data. Evidence register — the product showing its working.
radius --r-3 on plates, square rails · mono numerals · dashed hair-accent edges
Movements
Ten jobs a section can do.
A page is a linear experience. Name the job of each section, then pick the voice’s realisation from the plate.
How to compose
Three steps, every page.
Write the score
One line: voice prefixes and uppercase movements. The score is the contract a reviewer scrolls against.
Realise each movement
Open the voice’s plate in the dictionary, check the content precondition, take the block or the inline pattern.
Score every seam
A rule, a plane step or a recurring motif at each boundary. One gate band, about two-thirds through.
Rules in design/COMPOSITION.md; judged seams in design/ATLAS.md.
- Instruments
- 49
- Voices
- 03
- Movements
- 10
- Token files
- 01
Contents