Design System Color Tokens: A Practical Guide
Create and manage color tokens in design systems for consistent theming across products.
Key Takeaways
- Color tokens are named variables that abstract raw color values into semantic meanings.
- Build a three-tier token system.
- Semantic names describe function, not appearance: --color-text-primary (not --color-dark-gray), --color-surface-warning (not --color-light-yellow), --color-border-interactive (not --color-blue-200).
- With proper semantic tokens, dark mode is a matter of remapping alias tokens.
- Start small — define tokens for text (primary, secondary, disabled), surfaces (default, elevated, sunken), borders (default, interactive, focus), and state colors (success, warning, error, info).
Color Palette Generator
What Are Color Tokens
Color tokens are named variables that abstract raw color values into semantic meanings. Instead of using #3B82F6 directly, you use tokens like --color-primary, --color-text-secondary, or --color-surface-elevated. This abstraction enables theming, ensures consistency, and makes updates effortless.
Token Hierarchy
Build a three-tier token system. Tier 1 (Global): raw color values (--blue-500: #3B82F6). Tier 2 (Alias): semantic mapping (--color-primary: var(--blue-500)). Tier 3 (Component): specific usage (--button-bg: var(--color-primary)). Most teams only need Tier 1 and 2 — Tier 3 is for large design systems.
Naming Conventions
Semantic names describe function, not appearance: --color-text-primary (not --color-dark-gray), --color-surface-warning (not --color-light-yellow), --color-border-interactive (not --color-blue-200). This makes dark mode implementation natural — --color-text-primary maps to white in dark mode without renaming anything.
Dark Mode Implementation
With proper semantic tokens, dark mode is a matter of remapping alias tokens. --color-surface-default: white (light) or #1a1a1a (dark). --color-text-primary: #111827 (light) or #f9fafb (dark). The component code doesn't change at all — it still references --color-text-primary. Use the CSS prefers-color-scheme media query or a class toggle.
Practical Implementation
Start small — define tokens for text (primary, secondary, disabled), surfaces (default, elevated, sunken), borders (default, interactive, focus), and state colors (success, warning, error, info). Document each token with its intended use case. Use CSS custom properties for web, and platform-specific token systems for native apps. Review and prune unused tokens quarterly.
Herramientas relacionadas
Formatos relacionados
Guías relacionadas
Color Theory for Digital Design: A Practical Guide
Understanding color theory helps you create visually harmonious designs that communicate effectively. This guide covers color models, harmony rules, accessibility requirements, and practical palette-building techniques.
Typography Pairing: How to Combine Fonts Effectively
The right font pairing creates visual hierarchy and personality in your designs. This guide covers pairing principles, common mistakes, and proven font combinations for web and print projects.
SVG vs Canvas vs WebGL: Choosing a Graphics Technology
The web platform offers three main graphics technologies, each optimized for different use cases. This comparison helps you choose between SVG, Canvas, and WebGL based on your project's requirements.
Best Practices for Dark Mode Design
Dark mode is no longer optional — users expect it. Designing an effective dark theme requires more than inverting colors. This guide covers contrast, elevation, color adaptation, and implementation strategies.
Troubleshooting Color Consistency Across Devices
Colors that look perfect on your monitor may appear different on phones, tablets, and printed materials. This guide explains why color shifts happen and how to minimize inconsistencies across devices.