Resolving Token Dependency Chains

Design tokens reference other tokens in a chain of dependency:

{button-primary-bg}  (Component Token)
       ↓ references
{color-interactive-primary}  (Semantic Token)
       ↓ references
{blue-600}  (Global Primitive Token)
       ↓ evaluates to
#1d4ed8  (Raw Hex Value)

Rules for Healthy Token Dependency Chains:

• Never Reference Upwards: A Global token must never reference a Semantic token. A Semantic token must never reference a Component token.
• Prevent Circular References: Token A must not reference Token B if Token B references Token A.
• Limit Chain Depth: Keep chains to a maximum depth of 3–4 levels. Overly nested references make debugging CSS variables difficult.