Design Tokens
Change a token, change everything — theming and customization made simple.
Colors
Brand and semantic colors for every UI context
Typography
Typeface, size, and weight combinations
Spacing
Whitespace and layout intervals
Shadows
Depth and elevation for UI layers
Border Radius
Corner rounding for softer interfaces
Border Width
Border thickness for emphasis control
Breakpoints
Layout switching by screen size
z-Index
Stacking order management
Opacity
Visual hierarchy through transparency
Icon Sizes
6 optimized sizes for every use case
Duration
Unified animation timing
Easing
Acceleration and deceleration curves
Scale
Press and animation scale effects
Animation
Motion for UI state transitions
Single Source of Truth
All design tokens are managed fromfigma-tokens.jsonas the single source of truth. Runnpx sync-tokensto generate all distribution files automatically.
figma-tokens.json → CSS · JS · TS · Tailwind v3/v4 · JSON