Design token pipeline

Figma — Token studio

Color, spacing, and type values get defined once as variables here — the single source every downstream platform inherits from.

→ on publish

Supernova — Sync tokens(animated)

Design variables get auto-mapped to the code-side token names on publish, so nobody's hand-translating a brand color into a hex string by hand.

GitHub — Generate platform code

Synced tokens generate the actual platform files — CSS variables, iOS, Android — as a pull request, not a manual copy-paste job.

Storybook — Preview & verify

Components render against the newly generated tokens here first, so a bad value gets caught before it reaches a real product screen.

Zeroheight — Publish reference

The final source of truth for every token's name, value, and intended use — published so no one has to guess which value is canonical.