every primitive consumes them. nothing is hand-coded. the engine writes tokens.css, tokens.js, tokens.android.xml, tokens.ios.swift, tokens.d.ts from one source of truth.
seven categories · pick any rung · the cascade renders. space drives padding, fontSize drives reading, radius corners cards, opacity thins overlays, motion times transitions, leading and tracking shape paragraphs. authority is tokens.json; the page only renders.
the discipline is the luxury · refuse is a brand verb
the cascade · sized 24px · led normal
chip · radius 4 · opacity 608-point cadence covers every major rhythm; --s-1 (4px) is the half-rung for tight inline gaps. anything not on the scale is a violation.
--s-00pxcollapse--s-14pxhalf-rung · gap inside chips--s-28pxtight · receipt row--s-312pxcompact · inline gap--s-416pxstandard · component padding--s-520pxloose · plate padding--s-624pxfold gutter--s-732pxsection spacing--s-840pxmajor rhythm--s-948pxfold separator--s-1064pxsilent space--s-1196pxeditorial breath--s-12128pxcathedral pause--s-13160pxsilencethe type scale climbs in non-uniform steps · tight at the bottom for receipts and labels, generous at the top for ceremony. nothing renders at a size outside the scale.
--fontSize-10The quick brown foxmicro labels · footnotes--fontSize-11The quick brown foxeyebrows · uppercase metadata--fontSize-12The quick brown foxcaption · table cell--fontSize-13The quick brown foxtight body--fontSize-14The quick brown foxcompact body--fontSize-15The quick brown foxstandard body--fontSize-16The quick brown foxlede / paragraph--fontSize-18The quick brown foxsubheading--fontSize-20The quick brown foxh3--fontSize-24The quick brown foxh2--fontSize-28The quick brown foxfold heading--fontSize-32The quick brown foxeditorial h1--fontSize-40The quick brown foxhero claim · mobile--fontSize-48The quick brown foxhero claim · tablet--fontSize-64The quick brown foxhero claim · desktop--fontSize-80The quick brown foxcathedral · ceremonyui-monospace · SF Mono · Menlo · Consolas-apple-system · system-ui · sans-serifGeorgia · serifCharter · Georgia · serifatomic tokens are skin-invariant base hues; semantic tokens (brand-signal, data-signal, success, warn, error, info, ground, figure) are re-bound by every skin contract.
--ink-0#0a0907page ground--ink-1#11100ccard surface · base--ink-2#16140felevated input · plate--ink-3#1c1a14hover surface--ink-4#22201apressed · selected--bone-0#f4ebd5highest figure · ≥ 7:1--bone-1#e2d7bbprimary text · figure--bone-2#c4b59fbody · receipts--bone-3#9d8f73caption · meta--bone-4#7a6f5dsubtle · stamps--brand-signalwordmark · primary cta · active · amber (ADR-001)--data-signalinheritance · journal · capital--successpass · gate · pnl up--warnhold · review · pnl flat--errorbreach · refuse · pnl down--infoinfo · neutral status--groundskin ground · current--figureskin figure · currentradii above 2px are reserved for ceremonial moments. pills (full radius) are used only for indicator dots and posture badges.
--radius-00pxsharp · default--radius-11pxpaper · receipts--radius-22pxcards · plates--radius-34pxsoft · chips--radius-46pxrare · ai surfaces--radius-58pxrare · ceremony--radius-612pxrare · halo--radius-716pxforbidden in product--radius-fullpillpills · dots · indicators--hair-1subtle rule · ≥ 6% opacity--hair-2card border · ≥ 10% opacity--hair-3editorial divider · ≥ 18% opacity--hair-4strong divider · ≥ 34% opacitymotion tokens drive every animation in every primitive. see /motion for live demos and curve plots.
| token | ms | use |
|---|---|---|
--motion-instant | 0 | no animation |
--motion-flick | 120 | micro · snap |
--motion-step | 220 | gate state · default |
--motion-refuse | 220 | refusal animation |
--motion-breath | 1200 | pulse cycle |
--motion-ceremony | 1800 | spin · ceremony |
--motion-tide | 4000 | breath · resting state |
| token | use |
|---|---|
--motion-easeZero | symmetric default |
--motion-easeStep | snappy · gate |
--motion-easeFlick | fast-out cubic · 80% of timeline |
--motion-easeBreath | long-cycle · pulse |
--motion-easeTide | breath · resting |
--motion-easeCeremony | ritual · sigil |
--motion-easeRefuse | overshoot · refusal |
density tokens are runtime-overridable on the shell. the primitives consume the active tier without re-rendering.
| token | value | use |
|---|---|---|
--density-row | 32px | row height · standard density |
--density-pad | var(--s-3) | cell padding · standard density |
--density-font | 12px | cell font · standard density |
--density-gap | var(--s-3) | inter-cell gap · standard density |
the brand runtime writes clock tokens to :root on every frame. primitives reference them as scalar inputs to their CSS · opacity, glow radius, easing target. one source of time, many surfaces.
| token | range | use |
|---|---|---|
--hb | 0..1 | heartbeat · 1Hz · runtime-written |
--hb-bin | 0..1 | binary heartbeat · on/off pulse |
--breath | 0..1 | long cycle · 4s · drives glow + opacity |
--drift | 0..1 | slow drift · 60s · ambient |
--tide | 0..1 | tide cycle · 5min · session breath |
--pulse | 0..1 | pulse intensity · gate-driven |
| token | value | use |
|---|---|---|
--col | 1ch | mono character measure unit |
--content-max | 1280px | max page width · desktop |
--content-text-max | 720px | long-form measure · ~80 char |
the catalog below is the brand book reading itself. it importstokens.json at build time, walks the 17-category ADR-009 budget, and renders every value in its native medium — colors as swatches, spacings as bars, motion as ease curves, opacities as overlays. nothing is paraphrased; nothing can drift.
the brand book reading the brand book. the table below is generated from tokens.json at build time; nothing is paraphrased. when a category goes over budget, the build hard-fails before the page can ship.
2 categories over budget. ci will refuse the build until the budget is raised by ADR or a token is retired.
--ink-0#0a0907ink.0--ink-1#11100cink.1--ink-2#16140fink.2--ink-3#1c1a14ink.3--ink-4#22201aink.4--ink-5#2a2820ink.5--bone-0#f4ebd5bone.0--bone-1#e2d7bbbone.1--bone-2#c4b59fbone.2--bone-3#9d8f73bone.3--bone-4#7a6f5dbone.4--bone-5#3a3526bone.5--bone-6#25221abone.6--amber#d6a64aamber.default--amber-soft#c8a064amber.soft--amber-deep#a07a36amber.deep--amber-muted#8a6a30amber.muted--green#6dbf7egreen.default--green-soft#8fcf9bgreen.soft--green-deep#4a8a59green.deep--red#c25e54red.default--red-text#cf6f64red.text--red-soft#d68a83red.soft--red-deep#9a4641red.deep--blue#4a8fb8blue.default--blue-soft#6da5c9blue.soft--blue-deep#2c5e80blue.deep--magenta#b86a98magenta.default--magenta-soft#c98ab0magenta.soft--magenta-deep#7c4566magenta.deep--acid#e5fe40acid.default--acid-deep#b8c828acid.deep--acid-soft#eefe7aacid.soft--cool#7d9aa8cool.default--cool-soft#9ab2bdcool.soft--cool-deep#54707dcool.deep--warm#c79478warm.default--warm-soft#d6ad95warm.soft--warm-deep#9c6e54warm.deep--semantic-fg#e2d7bbsemantic.fg--semantic-fg-muted#c4b59fsemantic.fg-muted--semantic-fg-subtle#9d8f73semantic.fg-subtle--semantic-fg-on-acid#0a0907semantic.fg-on-acid--semantic-fg-on-amber#0a0907semantic.fg-on-amber--semantic-fg-on-red#ffffffsemantic.fg-on-red--semantic-bg#0a0907semantic.bg--semantic-bg-elevated#11100csemantic.bg-elevated--semantic-bg-overlay#16140fsemantic.bg-overlay--semantic-bg-input#1c1a14semantic.bg-input--semantic-border#2a241dsemantic.border--semantic-border-strong#3a3526semantic.border-strong--semantic-border-focus#e5fe40semantic.border-focus--semantic-accent#e5fe40semantic.accent--semantic-brand-signal#e5fe40semantic.brand-signal--semantic-data-amber#d6a64asemantic.data-amber--semantic-danger#c25e54semantic.danger--semantic-success#6dbf7esemantic.success--semantic-warning#d6a64asemantic.warning--semantic-info#4a8fb8semantic.info--s-00px--s-14px--s-28px--s-312px--s-416px--s-520px--s-624px--s-732px--s-840px--s-948px--s-1064px--s-1196px--s-12128px--s-13160px--s-14192px--s-15256px--s-16320px--s-px1px--s-0.52px--monothe watching eye refuses · 0123456789var(--font-mono, 'JetBrains Mono'), ui-monospace, 'SF Mono', Menlo, Consolas, monospace--sansthe watching eye refuses · 0123456789var(--font-sans, Inter), -apple-system, system-ui, sans-serif--displaythe watching eye refuses · 0123456789var(--font-display, 'Instrument Serif'), Georgia, serif--serifthe watching eye refuses · 0123456789var(--font-serif, 'Source Serif 4'), Charter, Georgia, serif--shellthe watching eye refuses · 0123456789var(--font-shell, "Suisse Int'l"), 'Helvetica Neue', Helvetica, Arial, sans-serif--narrativethe watching eye refuses · 0123456789var(--font-narrative, 'Untitled Serif'), Georgia, 'Times New Roman', serif--machinethe watching eye refuses · 0123456789var(--font-machine, 'Berkeley Mono'), 'Input Mono', 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace--fontSize-1010pxzero refuses--fontSize-1111pxzero refuses--fontSize-1212pxzero refuses--fontSize-1313pxzero refuses--fontSize-1414pxzero refuses--fontSize-1515pxzero refuses--fontSize-1616pxzero refuses--fontSize-1818pxzero refuses--fontSize-2020pxzero refuses--fontSize-2424pxzero refuses--fontSize-2828pxzero refuses--fontSize-3232pxzero refuses--fontSize-4040pxzero refuses--fontSize-4848pxzero refuses--fontSize-5656pxzero refuses--fontSize-6464pxzero refuses--fontSize-8080pxzero refuses--fontWeight-thin100cycle 247,113,244--fontWeight-extralight200cycle 247,113,244--fontWeight-light300cycle 247,113,244--fontWeight-normal400cycle 247,113,244--fontWeight-medium500cycle 247,113,244--fontWeight-semibold600cycle 247,113,244--fontWeight-bold700cycle 247,113,244--fontWeight-extrabold800cycle 247,113,244--fontWeight-black900cycle 247,113,244--lineHeight-tight1.1two lines of body so the leading rule is visible · two lines of body so the leading rule is visible
--lineHeight-snug1.25two lines of body so the leading rule is visible · two lines of body so the leading rule is visible
--lineHeight-normal1.45two lines of body so the leading rule is visible · two lines of body so the leading rule is visible
--lineHeight-relaxed1.6two lines of body so the leading rule is visible · two lines of body so the leading rule is visible
--lineHeight-loose1.85two lines of body so the leading rule is visible · two lines of body so the leading rule is visible
--lineHeight-title1.2two lines of body so the leading rule is visible · two lines of body so the leading rule is visible
--lineHeight-body1.55two lines of body so the leading rule is visible · two lines of body so the leading rule is visible
--lineHeight-body-dense1.45two lines of body so the leading rule is visible · two lines of body so the leading rule is visible
--lineHeight-machine1.4two lines of body so the leading rule is visible · two lines of body so the leading rule is visible
--letterSpacing-tighter-0.02emDECISION REFUSED--letterSpacing-tight-0.01emDECISION REFUSED--letterSpacing-normal0DECISION REFUSED--letterSpacing-wide0.04emDECISION REFUSED--letterSpacing-wider0.08emDECISION REFUSED--letterSpacing-widest0.12emDECISION REFUSED--motion-instant0ms--motion-flick120ms--motion-step220ms--motion-refuse220ms--motion-breath1200ms--motion-ceremony1800ms--motion-tide4000ms--motion-fast120ms--motion-base220ms--motion-slow420ms--motion-easeZerocubic-bezier(0.65, 0, 0.45, 1)--motion-easeStepcubic-bezier(0.32, 0.72, 0, 1)--motion-easeFlickcubic-bezier(0.16, 1, 0.3, 1)--motion-easeBreathcubic-bezier(0.65, 0, 0.35, 1)--motion-easeTidecubic-bezier(0.25, 0.1, 0.25, 1)--motion-easeRefusecubic-bezier(0.36, 0, 0.66, -0.56)--motion-easeCeremonycubic-bezier(0.83, 0, 0.17, 1)--motion-easeOutcubic-bezier(0.16, 1, 0.3, 1)--motion-easeIncubic-bezier(0.7, 0, 0.84, 0)--motion-easeInOutcubic-bezier(0.83, 0, 0.17, 1)--radius-00--radius-11px--radius-22px--radius-34px--radius-46px--radius-58px--radius-612px--radius-716px--radius-full9999px--radius-default2px--hair-11px--hair-21.5px--hair-32px--hair-default1px--shadow-0none--shadow-10 1px 2px rgba(0,0,0,0.40)--shadow-20 2px 6px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04)--shadow-30 4px 12px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.06)--shadow-40 8px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35)--shadow-50 16px 40px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.40)--shadow-amber-soft0 0 24px rgba(214,166,74,0.20)--shadow-amber-glow0 0 36px rgba(214,166,74,0.35)--shadow-red-soft0 0 18px rgba(194,94,84,0.25)--shadow-inset-1inset 0 1px 0 rgba(255,255,255,0.04)--opacity-00--opacity-50.05--opacity-100.10--opacity-200.20--opacity-300.30--opacity-400.40--opacity-500.50--opacity-600.60--opacity-700.70--opacity-800.80--opacity-900.90--opacity-950.95--opacity-1001--z-below-1--z-base0--z-raised10--z-dropdown1000--z-sticky1100--z-rail1200--z-topbar1300--z-overlay1400--z-modal1500--z-tooltip1600--z-toast1700--z-skipLink10000--bp-xs320pxat this width or wider · the layout shifts to the next archetype--bp-sm480pxat this width or wider · the layout shifts to the next archetype--bp-md768pxat this width or wider · the layout shifts to the next archetype--bp-lg1024pxat this width or wider · the layout shifts to the next archetype--bp-xl1280pxat this width or wider · the layout shifts to the next archetype--bp-2xl1536pxat this width or wider · the layout shifts to the next archetype--bp-3xl1920pxat this width or wider · the layout shifts to the next archetype--layout-content-text-max720px--layout-content-wide-max1100px--layout-content-full-max1440px--layout-rail-width240px--layout-topbar-height44px--layout-status-height32px--blur-00--blur-14px--blur-28px--blur-312px--blur-416px--blur-524px--blur-640px--gradient-amber-fadelinear-gradient(180deg, var(--amber) 0%, transparent 100%)--gradient-ink-fadelinear-gradient(180deg, transparent 0%, var(--ink-0) 100%)--gradient-topbar-glasslinear-gradient(180deg, rgba(10,9,7,0.92) 0%, rgba(10,9,7,0.78) 100%)--_docPlan v15 ADR-164 · Constitutional Atmosphere material stack · 5 layers (field · mist · membrane · signal · etching) + brightness budget. Tokens consumed by atmospheric primitives (AtmosphericField · MistLayer · MembranePane · SignalEmission · EtchingLayer) shipping Plan v15 cycle 19.--field[object Object]--mist[object Object]--membrane[object Object]--membrane-blur[object Object]--membrane-edge[object Object]--signal[object Object]--etching[object Object]--brightness-budget[object Object]--_climate[object Object]--_tier-expression[object Object]packages/ui.