10. Design Systems & Semantic Tokens
The End of Hardcoded Hex Codes
As a product scales, maintaining consistency becomes an engineering challenge. If a company decides to update its brand color from a light blue to a dark purple, finding and replacing the hex code #00A3FF across 15,000 lines of CSS and 500 Figma screens is a nightmare. The solution is Design Tokens.
📦 What is a Design Token?
A Design Token is an abstracted variable that stores a design decision. Instead of hardcoding a raw value like 16px or #FF0000, you assign that value to a named variable, such as spacing-md or color-error-base. Both the design tool (Figma) and the codebase (CSS/React) reference this single source of truth.
🏷️ Semantic Naming Architecture
Tokens are useless if their names are not descriptive. Naming a token color-blue-light is a failure, because if you ever change the brand to red, the name color-blue-light no longer makes sense.
Instead, we use Semantic Naming, which describes the intent or usage of the token rather than its visual appearance. A common architecture is Category-Property-Variant-State.
- ❌ Bad:
$blue-500,$big-text,$gap-16 - ✅ Good:
--color-primary-base,--typography-heading-xl,--spacing-md
🌗 Engineering Dark Mode
Semantic tokens are the secret to building Dark Mode. If your text color is hardcoded to #000000, it will be invisible on a dark background. But if your text color references var(--color-text-primary), you can simply swap the hex value assigned to that token at the root level when the theme changes, updating the entire application instantly.
In the Sandbox, you will find a code inspector displaying CSS rules that are currently using brittle, hardcoded HEX values (e.g.,
background: #1A1A1A;). Your mission is to tokenize the codebase. You must map the raw values to their correct scalable semantic tokens (like var(--color-surface) and var(--color-primary)) to future-proof the architecture.Architecture: Hardcoded/Brittle
CSS Token Mapper
"Hardcoding HEX values creates technical debt. Design Tokens allow designers to update branding globally by changing a single variable."
Knowledge Check
Ready to test your understanding of 10. Design Systems & Semantic Tokens?