Handoff

What a developer takes away. The design tokens were exported from Figma on . Everything on this page is regenerated from that export by one command, so no output can drift from it.

114 primitives · 97 semantic tokens · 49 of them change between modes

Tokens

One source, five outputs. Style Dictionary reads the DTCG and resolves every reference before writing anything, so a token pointing at something that does not exist fails the build rather than reaching a browser.

tokens.jsonDTCG-style JSON, references intact, values as CSS stringsany platformtokens.cssCSS custom properties, both modesweb_tokens.scssSCSS variables that resolve to the propertiesangular · scsstokens.tsTyped token names for TS and Storybook controlsangular · typescriptfigma-export.jsonThe Figma variables export, the source everything else derives fromsource

The design system in Angular

The same tokens and the same two modes, with eight components built in Angular 21 and packaged as @verion-west/angular (npm run build:lib). Every colour in them comes from a token, so flipping the theme attribute re-themes them without touching component code.

Storybook

Browse the components

41 stories and 9 documentation pages · the Mode control in the toolbar flips the same attribute this page does.

Open Storybook

What is in it

  • Button — 3 types × 4 states × 2 sizes, and not one colour in the component
  • Field — The error state, tinted rather than outlined — five roles, five tokens
  • Tile — A button, not a div — avatar or icon, two or three lines, optional right column
  • Icon — Sixteen glyphs, one fill rule, no colour of their own
  • Badge — Four feedback tones
  • Avatar — The only place the brand colour appears inside the app
  • Detail row — Label, value, baseline-aligned
  • Theme directive — The whole theming mechanism: one attribute on one host

The pipeline

Five steps, two commands. Everything between them is generated, and the CSS, SCSS and TS outputs say so in their first line.

  1. 01Figma variables114 primitives and 97 semantic tokens. Every semantic token is an alias of a primitive; only the primitives hold raw values.
  2. 02Exported to the repotokens/figma-export.json, exported from Figma on 14 September 2026. Nothing reads Figma live: everything downstream derives from this file, and nothing flows back into Figma.
  3. 03Style DictionaryThe build fails if a semantic token is not an alias of a primitive, if any reference is missing, or if the primitive or semantic count drifts from the one recorded at export.npm run tokens
  4. 04PlatformsCSS custom properties for the web, the same properties plus SCSS and typed TS for Angular, and DTCG for anything else.
  5. 05Angular libraryEight components authored against the generated SCSS. None of them knows a colour.npm run storybook