---

name: design-system-foundation description: Guides on building design systems for applications. Use when creating design tokens, component libraries, or when the user asks about design system architecture.

Design System Foundation

Purpose

Help developers build scalable, maintainable design systems for consistent UI development.

Instructions

When building design systems:

1. Design Tokens

Define foundational tokens:

Colors:

• Brand colors
• Semantic colors
• Neutral scale
• State colors

Typography:

• Font families
• Size scale
• Line heights
• Font weights

Spacing:

• Base unit
• Spacing scale
• Layout spacing

Other:

• Border radius
• Shadows
• Breakpoints
• Z-index scale

2. Token Structure

Organize tokens:

Primitive Tokens:

• Raw values
• Color palette
• Size values

Semantic Tokens:

• Purpose-based naming
• Context-specific
• Theme-aware

Component Tokens:

• Component-specific
• Reference semantic tokens

3. Component Library

Build component library:

Atomic Design:

• Atoms (buttons, inputs)
• Molecules (form fields)
• Organisms (forms, headers)
• Templates and pages

Component API:

• Consistent props
• Variant patterns
• Composition patterns
• Slot patterns

4. Documentation

Document the system:

• Usage guidelines
• Do's and don'ts
• Code examples
• Design specs
• Accessibility notes

5. Theming

Support theming:

• Theme structure
• Dark mode support
• Brand theming
• Runtime switching

6. Adoption

Drive adoption:

• Easy onboarding
• Migration guides
• Contribution process
• Governance model

Best Practices

• Start with tokens
• Component composition
• Extensive documentation
• Version semantically
• Gather feedback

Output Format

Provide design system guidance as:

1. Token architecture
2. Component structure
3. Documentation approach
4. Theming support