What are color tokens
Color tokens are named values that represent colors in your design system. Instead of using hex values directly, you reference names like --primary, --success, --warning.
Benefits: Consistency, easy updates, semantic meaning, multi-brand support.
Token hierarchy
Global tokens: Base colors (primary, secondary, neutrals). Example: --color-violet-500: #7357F6
Component tokens: Contextual use. Example: --button-primary-bg: var(--color-violet-500)
Semantic tokens: Intent-based. Example: --success: var(--color-mint-500), --error: var(--color-pink-500)
Exporting tokens
Use Huelab's token exporter to generate CSS, Tailwind, SCSS, or JSON. Sync to Figma, export to Storybook, or commit to Git.
Multi-mode tokens
Create light/dark mode variants. One token name, different values per theme. Users switch modes seamlessly without code changes.