A proof-of-concept for a token-based design system pipeline using Style Dictionary. Tokens are defined in JSON, processed into CSS custom properties, and previewed in a plain HTML page.
Tokens are defined and maintained in Figma using the Variables to JSON plugin. The plugin exports Figma Variables (collections, modes, and values) into the DTCG-compatible JSON files stored under token-design-system/tokens/.
Figma Variables ──[Variables to JSON plugin]──▶ tokens/*.json ──[Style Dictionary]──▶ tokens.auto-generated/*.css
- Open the Figma file and run the Variables to JSON plugin.
- Export and replace the JSON files in
token-design-system/tokens/. - Run
npm run tokens:build(ornpm run dev) to regenerate the CSS.
Tokens are organized in three layers, each building on the one below:
Primitives → Semantics (Light / Dark) → Components
| Layer | Description | Output |
|---|---|---|
| Primitives | Raw values: colors, spacing, radii, typography, shadows | primitives/primitives.css |
| Semantics | Contextual aliases, theme-aware (references primitives) | semantics/semantics.light.css, semantics.dark.css |
| Components | Component-scoped tokens for button and input |
components/button.css, components/input.css |
Theming is handled via the data-theme attribute on <html>:
<html data-theme="light">
<!-- or "dark" -->
</html>poc-design-tokens/
├── src/
│ └── index.html # Preview page
├── token-design-system/
│ ├── style-dictionary.config.js # Build pipeline
│ ├── tokens/ # Source token files (JSON)
│ │ ├── manifest.json
│ │ ├── Primitives.default.tokens.json
│ │ ├── Semantics.Light.tokens.json
│ │ ├── Semantics.Dark.tokens.json
│ │ ├── Components.default.tokens.json
│ │ ├── text.styles.tokens.json
│ │ └── effect.styles.tokens.json
│ └── tokens.auto-generated/ # ⚠️ Do not edit — generated by build
│ ├── primitives/primitives.css
│ ├── semantics/semantics.light.css
│ ├── semantics/semantics.dark.css
│ └── components/button.css, input.css
├── serve.json # serve configuration
└── package.json
- Node.js 18+
npm install| Command | Description |
|---|---|
npm run tokens:build |
Compile token JSON files into CSS |
npm run dev |
Build tokens and start a local preview server |
npm run devOpens a local server at http://localhost:3000. The root redirects to src/index.html automatically.
Tokens follow the DTCG (Design Token Community Group) format. Example:
{
"color": {
"brand": {
"primary": {
"$type": "color",
"$value": "#0066FF"
}
}
}
}The build is configured in token-design-system/style-dictionary.config.js and runs four Style Dictionary instances — one per output layer — to ensure references resolve correctly across layers:
- Primitives — emits raw values; includes semantics/components for reference resolution only.
- Semantics Light — includes primitives; emits only source tokens under
[data-theme='light']. - Semantics Dark — same as Light, under
[data-theme='dark']. - Components — includes primitives + light semantics; emits one file per component.