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:
- •Token architecture
- •Component structure
- •Documentation approach
- •Theming support