Tokens
The values 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.
Variables
401
Collections
6
Modes
Light & dark
Output
W3C DTCG
Architecture
Two 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 value 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.
Output
Each platform gets it 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. If you ever stop using this system, your values leave with you in a format other tools can read. That is deliberate.