design-system-foundation

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