Design System Tokens Cheat Sheet

Last Updated: November 21, 2025

Token Focus

Category	Examples
`Color`	brand-primary, neutral-500, success-gradient
`Typography`	font-base, font-heading, line-height-tight
`Spacing`	space-1, space-3, gap-responsive
`Elevations`	shadow-sm, shadow-strong, outline-focus


         npx style-dictionary build --config token.config.js

Generate platform-specific token files from JSON.


         pnpm tokens:sync

Push token updates to downstream packages.


         const tokens = createTokens({ palette })

Compose tokens when runtime theming is needed.


         npx style-dictionary publish --platform css

Publish CSS custom properties for the web.

Center your system around tokens, generate outputs for every platform, and version control them to ship consistent UI.

💡 Pro Tip: Publish tokens to JSON/SCSS/TS outputs so every platform shares the same source of truth.