Design Token Patterns

Quick Guide: A design token system is a one-way dependency graph: primitives hold raw values, semantic tokens name intent, component tokens hold local exceptions. Consumers only ever touch the top two tiers. Deliver tokens as CSS custom properties -- primitives in :root, semantic aliases per scope, component tokens reading semantics. Name tokens for their role, never for the mode they happen to appear in (--color-surface-raised, never --color-dark-bg). Store complete color values, never bare channel triplets. When tokens must exist in more than one language, generate every output from one DTCG source rather than hand-maintaining parallel copies.

Detailed Resources:

• examples/core.md - Tier construction, aliasing, naming grammar, CSS custom property delivery, @property registration
• examples/scales.md - Generated spacing and type series, modular scales, fluid type, density multipliers
• examples/pipeline.md - DTCG source files, Style Dictionary platforms, typed TypeScript export
• examples/utility-framework-bridge.md - Feeding tokens into a utility-class framework without duplicating the source of truth
• reference.md - Naming grammar table, DTCG $type reference, format names, authoring checklist

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)