Tokens
The tokens you design with are the values that ship.
Every color, space, radius, elevation and type step lives once as a token. One source generates CSS, SwiftUI, Compose and Flutter, so nobody retypes a hex and nobody guesses a spacing step.
Architecture
Two token levels, and you only ever touch one of them.
Every design system that survives a rebrand has this shape. Most files skip the second level, which is why changing a brand color in them means opening every screen.
Primitives are the raw scale.
A ramp of brand steps, a neutral ramp, the state colors. They carry no meaning, and no component ever reads one directly. This is the level you edit when the brand changes.
Semantic tokens are the layer above.
They say what a value is for rather than what it is, and they are the only thing components bind to. Move a primitive and every alias pointing at it follows, in both modes and on both platform mirrors.
One exception worth knowing. On-color tokens map to static black and static white and do not flip with the theme, because a label on a filled button stays legible in both modes only if it refuses to follow them.
Follow any token from the raw scale to the pixel it lands on.
Each row is one chain. Hover a row and the rest step back, so you can read a single value from primitive to alias to the place it actually renders.
Primitive
colors/blue/500Semantic alias
brand/baseWhere it lands
Button fill, links, focus ringPrimitive
colors/gray/950Semantic alias
text/strong-950Where it lands
Headlines and body copyPrimitive
colors/gray/50Semantic alias
bg/weak-50Where it lands
Cards, wells, quiet surfacesPrimitive
colors/red/500Semantic alias
state/error/base-500Where it lands
Field errors and destructive actionsPrimitive
static/static-white-0Semantic alias
text/on-color/strongWhere it lands
Labels on a filled button, both modesOutput
Each platform gets its tokens in the language it already speaks.
A token is not useful until it arrives in a form the platform already understands. The translation is part of the build, so what lands is idiomatic rather than converted.
Web
CSS custom properties
Both modes as scoped blocks, ready for a class or a media query. Drop it in and every value is available everywhere.
Apple
SwiftUI
Color extensions plus type that emits Dynamic Type anchors rather than fixed point sizes, so accessibility settings still do what they promise.
Android
Jetpack Compose
Color objects and a ready Material 3 typography object, so the theme arrives wired rather than described in a document.
Cross platform
Flutter
Color constants and text styles shaped for ThemeData, matching how a Flutter project already expects to be themed.
The source is W3C DTCG, a public standard rather than a private schema, compiled with Style Dictionary and published as an MIT licensed repository and an npm package. If you ever stop using this system, your values leave with you in a format other tools can read. That is deliberate.