Design Token System

one-source-of-truth-for-design

One Source of Truth for Design Design Token System bridges design and development with a single source of truth. Define colors, typography, spacing, elevation, and shadow tokens in the design tool — they automatically sync to CSS custom properties, Tailwind configs, and framework theme files. Change a color token in the design canvas and every component using that token updates simultaneously — in Visual Editor, in code, and in production. No more design drift.

Design Token Specifications

Token Types

Color, typography, spacing, elevation, shadow, border, opacity

Output Formats

CSS custom properties, SCSS, Tailwind, JSON, Style Dictionary

Sync

Real-time bi-directional between design and code

Themes

Multiple themes with dark/light mode and brand variants

Versioning

Token change history with semantic versioning

features

color tokens: true

real time sync: true

spacing tokens: true

elevation tokens: true

typography tokens: true

Relationships