About design tokens
- Design tokens are named values that represent UI design decisions (colors, spacing, typography, etc.)
- CSS custom properties (CSS variables) let you reference these tokens throughout your stylesheets
- This tool generates a color scale by lightening/darkening your brand color in even steps (50, 100, ..., 900)
- Plus consistent spacing, typography, border radius, and shadow tokens
Output formats
- CSS Custom Properties:
:root { --brand-500: #3b82f6; } - SCSS Variables:
$brand-500: #3b82f6; - Less Variables:
@brand-500: #3b82f6; - JSON Tokens: for tools like Style Dictionary, Figma Tokens