CSS Design Tokens
Design tokens are the atomic units of a design system - named entities that store visual design attributes. They replace magic numbers with semantic meaning.
Core Principle: Instead of color: #3B82F6, use color: var(--color-primary-500)
Token Categories:
- Color:
--color-brand-primary,--color-semantic-error - Spacing:
--space-xs,--space-lg(typically 4px, 8px, 16px scale) - Typography:
--font-size-body,--font-weight-bold - Motion:
--duration-fast,--easing-ease-out - Shadows:
--shadow-sm,--shadow-elevated
Mental Model: Tokens create a contract between design and code. They abstract implementation details while maintaining design consistency.
Key Benefit: Changing --color-primary-500 updates the entire system, not just individual components.