Semantic Design Tokens: The Machine-Readable Architecture of Figma & Framer
Moving Beyond "Primitive" Styles
The traditional way of naming colors and fonts is obsolete. To build an enterprise-grade system in Figma or Framer, you must utilize Semantic Tokens.
The Three-Layer Token Architecture
Primitives (Global): The raw values (e.g., blue-600, spacing-16). These are never used directly in the UI.
Semantic (Alias): The "Why" behind the value (e.g., background-brand, text-error, border-muted). These are the workhorses of the Design OS.
Component-Specific: The most granular layer (e.g., button-primary-hover-bg).
