CM-04 / system — how i thinkatomic · token-first · scalable

Systematicby design

Screens are the output, not the work. The work is a pipeline of decisions — raw values, named intent, composed parts — arranged so one change travels everywhere it should and nowhere it shouldn't.

primitivesemanticcomponentproduct

CM-04 /the token's journey — one take, no cutsstage 01 / 06 — primitive value

primitive — a value with no meaning yet

ink.950paper.100

space.4radius.2

the primitives shelf — findable, versioned, reused

cyan.300→

semantic alias — intent, not colour

tokens.cssbuilt from tokens.json

:root {

}

ios· UIColor(named: "accent")

android · R.color.accent

button.primary.bg ← accent.defaultinset.md 16px · radius.interactive 10px

components consume roles, never values

scroll — follow the tokenthe chapters below dissect each stage

SYS-00 / the growthkeep scrolling — watch one value scale

1raw value — owned in one place

3intents — what the value means

9component hooks — nothing hard-coded

24+screens — change once, ship everywhere

SYS-01 / the waterfallprimitive → semantic → component — touch a token to trace it

Raw values live in exactly one place. Everything above them is a reference with a meaning — so a rebrand is an edit, not a rebuild.

primitives

raw values — the only place a hex lives

semantics

intent — what the value means

components

where the interface drinks from

hover or tap any token to light its chainfig 1.0 — token graph, 3 layers

SYS-02 / naming anatomya token name is a sentence — every word has a job

-----

hover a segment — each one answers a different question

R01category → property → concept → state; never reordered
R02no raw values past the primitive layer — everything else references
R03semantic names say intent (accent, canvas), never appearance (green, dark)
R04deprecate with an alias and a changelog entry; never break a name

SYS-03 / the foundation sheetreal primitives — click any value to copy it

color / primitive ramps

ink

cyan

blue

11 steps · contrast-checked pairs marked at the semantic layer

dimension / spacing — 4px base

space.14px

space.28px

space.312px

space.416px

space.524px

space.632px

space.748px

space.864px

space.996px

dimension / radius

radius.1 · 4px

radius.2 · 10px

radius.3 · 16px

radius.4 · 24px

radius.full · full

interactive elements take radius.2 — cards radius.3 — pills full. nothing else is legal.

typography / the stack

type.displaySystems64 / 0.92 / -0.03em

type.h1Heading one40 / 1.05 / -0.02em

type.h2Heading two28 / 1.2 / -0.01em

type.bodyBody runs at sixteen over one-seventy for long reading.16 / 1.7 / 0

type.label.specspec label — eleven mono caps11 / 1.4 / +0.14em / caps

two families only — geist for voice, geist mono for the spec layer

SYS-04 / atomic assemblyatoms → molecules → organisms — watch the same button travel

button.primary — every property is a reference

bg ← accent.defaultinset-x ← inset.mdradius ← radius.interactivelabel ← label.spec

fig 3.0 — live composition, one shared buttonatom

SYS-05 / the pipelinedesign decisions travel as data — figma to every platform

Tokens aren't a Figma poster — they're a build artifact. One JSON source compiles to every platform the team ships, so design and code can never drift apart.

figma variables

designers edit here — modes for brand & density

cyan.300

accent.default

inset.md

tokens.json

w3c design-token format — versioned in git

{
  "color": {
    "accent": {
      "default": {
        "$value": "{color.cyan.300}",
        "$type": "color"
      }
    }
  }
}

style dictionary

one transform — every output

css varsweb — :root custom properties

tailwind themeutility classes, same names

storybook docsthe team's reference

figma librarypublished styles, round-trip

fig 5.0 — the token supply chainPR-reviewed like any code change

SYS-06 / the shared librarystorybook — one address where design meets engineering

Every component should live at one published address — states, props, and accessibility notes beside the canvas. Try it — the knobs are live.

design system / storybook

▾ atoms

▾ molecules

▾ organisms

variant

size

disabled

a11y — AA contrast · focus-visible · 44px targets

fig 6.0 — the single source of truth, miniaturedesigners review PRs here, not in screenshots

SYS-07 / scale proofrebrand = edit 8 primitives · 0 components touched

The payoff of the waterfall: point the same kit at a different set of primitives and the whole product re-skins itself. This is how one design system serves many clients.

controls

⌕ find a station…

status

readychargingoffline

card

station / rama iv

12 / 16 batteries ready

fig 4.0 — same kit · spec — this sitechanged: 8 primitives · touched: 0 components

SYS-08 / white labelone product · any brand — the rebrand is a token sheet

The use case that pays for the system: a client wants the product under their own brand. With every screen built on semantic tokens, a white-label is a new primitive sheet — not a fork, not a redesign, not a second codebase.

tokens swapped: 8screens touched: 0

⚡ PumpCharge☰

72%battery ready

Rama IV station12/16

0.8 km · open 24h

start swap

fig 8.0 — same component tree, three businesses