Mature design systems organize tokens into a three-tier hierarchy to maximize flexibility and protect against cascading breaking changes:
blue-500 = #2563eb, space-16 = 1rem). Never consumed directly in product UI.color-bg-interactive = {blue-500}, color-text-danger = {red-600}). This layer enables themes (Light/Dark mode) by swapping references.button-primary-bg = {color-bg-interactive}, modal-card-radius = {radius-lg}).Pro Tip: Product engineers should almost always consume Semantic Tokens (Tier 2). This guarantees that dark mode and rebranding work automatically.
Level 3 · Design Tokens & Foundations