Design system

When to Use

Use this skill when you need mechanical implementation invariants for frontend design: token architecture, typography hierarchy, loading order, FOUT prevention, chrome stability, motion timing, color semantics. Use with design when building components, pages, or design systems. (Aesthetic direction lives in...

Apply with design when implementing UI: components, pages, or design systems. Every color, type, and motion choice should trace back to these rules.

Token architecture

All colors map to a small set of primitives. No random hex values.

• Foreground: Text hierarchy (primary, secondary, muted).
• Background: Surface elevation (base, raised, overlay).
• Border: Separation hierarchy (subtle, default, emphasis).
• Brand: Identity and primary accent.
• Semantic: Destructive, warning, success (and optional info).

Use tokens in code (CSS variables, theme objects); never hardcode hex for UI.