Design System Creation
Build comprehensive design systems for consistent UI development across teams.
Design System Layers
- Foundation: Colors, typography, spacing, elevation
- Components: Buttons, inputs, cards, navigation
- Patterns: Forms, layouts, empty states
Foundation - Design Tokens
:root {
/* Colors */
--color-primary-50: #eff6ff;
--color-primary-500: #3b82f6;
--color-primary-900: #1e3a8a;
/* Semantic colors */
--color-success: #22c55e;
--color-warning: #f59e0b;
--color-error: #ef4444;
/* Typography */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'Fira Code', monospace;
/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
/* Spacing (4px base) */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-4: 1rem;
--space-8: 2rem;
/* Elevation */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}
Component Documentation
## Button
### Anatomy
- Container (padding, background)
- Label (text)
- Icon (optional)
### Variants
- Primary: Main actions
- Secondary: Alternative actions
- Ghost: Subtle actions
### States
- Default, Hover, Active, Disabled, Loading
### Accessibility
- Role: button
- Keyboard: Enter/Space to activate
- Focus: Visible focus ring
Component Example (React)
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'ghost';
size?: 'sm' | 'md' | 'lg';
loading?: boolean;
disabled?: boolean;
children: React.ReactNode;
}
function Button({ variant = 'primary', size = 'md', loading, disabled, children }: ButtonProps) {
return (
<button
className={`btn btn-${variant} btn-${size}`}
disabled={disabled || loading}
aria-busy={loading}
>
{loading ? <Spinner /> : children}
</button>
);
}
Governance
- Review Committee: Approves new components
- Contribution Process: RFC → Review → Implementation
- Versioning: Semantic versioning for releases
- Deprecation: 3-month notice with migration guide
Best Practices
- Start with foundational tokens
- Document every component thoroughly
- Ensure WCAG 2.1 AA compliance
- Support dark mode from the start
- Include usage guidelines with do/don't examples
1---2name: design-system-creation-33description: | Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.4license: MIT5---6# Design System Creation
7
8Build comprehensive design systems for consistent UI development across teams.
9
10## Design System Layers
11
121. **Foundation**: Colors, typography, spacing, elevation
132. **Components**: Buttons, inputs, cards, navigation
143. **Patterns**: Forms, layouts, empty states
15
16## Foundation - Design Tokens
17
18```css
19:root {
20 /* Colors */
21 --color-primary-50: #eff6ff;
22 --color-primary-500: #3b82f6;
23 --color-primary-900: #1e3a8a;
24
25 /* Semantic colors */
26 --color-success: #22c55e;
27 --color-warning: #f59e0b;
28 --color-error: #ef4444;
29
30 /* Typography */
31 --font-sans: 'Inter', system-ui, sans-serif;
32 --font-mono: 'Fira Code', monospace;
33
34 /* Type scale */
35 --text-xs: 0.75rem;
36 --text-sm: 0.875rem;
37 --text-base: 1rem;
38 --text-lg: 1.125rem;
39 --text-xl: 1.25rem;
40 --text-2xl: 1.5rem;
41
42 /* Spacing (4px base) */
43 --space-1: 0.25rem;
44 --space-2: 0.5rem;
45 --space-4: 1rem;
46 --space-8: 2rem;
47
48 /* Elevation */
49 --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
50 --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
51 --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
52}
53```
54
55## Component Documentation
56
57```markdown
58## Button
59
60### Anatomy
61- Container (padding, background)
62- Label (text)
63- Icon (optional)
64
65### Variants
66- Primary: Main actions
67- Secondary: Alternative actions
68- Ghost: Subtle actions
69
70### States
71- Default, Hover, Active, Disabled, Loading
72
73### Accessibility
74- Role: button
75- Keyboard: Enter/Space to activate
76- Focus: Visible focus ring
77```
78
79## Component Example (React)
80
81```tsx
82interface ButtonProps {
83 variant?: 'primary' | 'secondary' | 'ghost';
84 size?: 'sm' | 'md' | 'lg';
85 loading?: boolean;
86 disabled?: boolean;
87 children: React.ReactNode;
88}
89
90function Button({ variant = 'primary', size = 'md', loading, disabled, children }: ButtonProps) {
91 return (
92 <button
93 className={`btn btn-${variant} btn-${size}`}
94 disabled={disabled || loading}
95 aria-busy={loading}
96 >
97 {loading ? <Spinner /> : children}
98 </button>
99 );
100}
101```
102
103## Governance
104
105- **Review Committee**: Approves new components
106- **Contribution Process**: RFC → Review → Implementation
107- **Versioning**: Semantic versioning for releases
108- **Deprecation**: 3-month notice with migration guide
109
110## Best Practices
111
112- Start with foundational tokens
113- Document every component thoroughly
114- Ensure WCAG 2.1 AA compliance
115- Support dark mode from the start
116- Include usage guidelines with do/don't examples
majiayu000