Design & Accessibility
What is Design Tokens?
Design tokens are the base variables (colors, spacing, fonts) that feed a design system — the reusable "DNA" of the UI.
Tokens replace literal values (#3B82F6) with semantic names (color.primary.500). Rebranding becomes changing one value; before, it was find-and-replace across hundreds of files.
Semantic tokens (color.button.primary) beat literal tokens (color.blue.500) because they express intent: a button can switch from blue to green without the name lying.
Related terms
Frequently asked questions
Can tokens be used directly in CSS?
Yes, via CSS custom properties (--color-primary). Tailwind, Style Dictionary and others generate them automatically.
How many tokens do I need?
The essentials: color palette (10-20 values), 6-8 type sizes, spacing scale (4-32px) and radii.