Design tokens
How Systemizy structures primitives and semantic tokens, handles responsive values and keeps states in sync.
Tokens are the foundation of every Systemizy workspace. Components only reference tokens, so changing a token updates everything that uses it.
1. Two Tiers
Primitives hold the raw palette and scales — every grey, every accent, every spacing step.
Semantic tokens describe intent — bg-main, text-secondary, line-error — and point to primitives. Components use semantic tokens only.
2. States
Interactive tokens carry their states as suffixes: --hover, --pressed, --disabled. Generated components pick them up automatically.
3. Responsive Values
Spacing and typography tokens can hold a value per breakpoint — mobile, tablet and desktop. Components stay the same; the scale switches.
4. Editing Tokens
Edit any value in the Tokens panel. Every change is versioned, so you can compare and restore earlier values at any time.
5. Exporting Tokens
Tokens export to Figma as variables with modes for each breakpoint, and to code as CSS custom properties or JSON.
