Design System Builder
Build web interfaces following a cohesive design system with neo-brutalist aesthetics, bold typography, and vibrant colors.
Quick Start
- Read
references/design-tokens.md for CSS variables and Tailwind config
- Apply the design system principles below
- Use provided component patterns as starting points
Core Design Principles
Visual Identity
- Style: Neo-brutalist with bold shadows, sharp borders, no border-radius by default
- Typography: Space Grotesk (300-900 weights) as primary font
- Colors: Purple primary (#7b61ff), Cyan secondary (#2a9d9e), Pink accent (#e5729a)
- Shadows: Bold offset shadows (
4px 4px 0px rgba(58,60,66,0.92))
- Borders: 2px solid dark gray (#3a3c42)
Typography Scale
/* Headings - Space Grotesk */
H1: 60px/1.1, weight 900, letter-spacing -0.02em
H2: 48px/1.0, weight 700, letter-spacing -0.02em
H3: 30px/1.2, weight 700
H4: 24px/1.3, weight 700
H5: 20px/1.4, weight 700
/* Body */
Large: 18px/1.6, weight 400
Base: 16px/1.6, weight 400
Small: 14px/1.5, weight 400
/* Labels */
Label: 12px, weight 700, uppercase, letter-spacing 0.15em
Spacing Scale (8px base)
4px | 8px | 12px | 16px | 24px | 32px | 40px | 48px | 64px | 80px
Color Palette
| Role |
Color |
Hex |
| Primary |
Purple |
#7b61ff |
| Primary Dark |
Deep Purple |
#5b40c9 |
| Secondary |
Cyan |
#2a9d9e |
| Accent |
Pink |
#e5729a |
| Success |
Green |
#34c759 |
| Warning |
Amber |
#fbbf24 |
| Danger |
Orange-Red |
#ff8555 |
| Text |
Charcoal |
#22242a |
| Border |
Dark Gray |
#3a3c42 |
| Background |
Off-White |
#e8e8e8 |
Component Patterns
Buttons
.btn {
padding: 12px 16px;
font: 700 1rem/1 'Space Grotesk';
text-transform: uppercase;
letter-spacing: 0.075em;
border: 2px solid;
border-radius: 0;
cursor: pointer;
transition: all 250ms ease;
}
.btn-primary {
background: #7b61ff;
color: white;
border-color: #7b61ff;
}
.btn-primary:hover {
background: #6b50d9;
box-shadow: 4px 4px 0 rgba(58,60,66,0.92);
}
.btn-primary:active {
transform: translate(2px, 2px);
box-shadow: none;
}
Cards
.card {
background: white;
border: 2px solid #3a3c42;
padding: 24px;
transition: all 250ms ease;
}
.card:hover {
box-shadow: 4px 4px 0 rgba(58,60,66,0.92);
border-color: #7b61ff;
}
Navigation
- Sticky top, white background
- 2px bottom border
- Brand: 24px, weight 900, primary color
- Links: uppercase, 700 weight, underline on hover
Implementation Checklist
Import Space Grotesk font
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
Set CSS variables - See references/design-tokens.md
Apply base styles
body {
font-family: 'Space Grotesk', system-ui, sans-serif;
color: #22242a;
background: #f0f0f0;
}
Use design tokens for all colors, spacing, typography
Add hover states with bold shadows and color shifts
Ensure contrast - Primary purple on white fails AA for body text; use darker variants
References
references/design-tokens.md - Complete CSS variables, Tailwind config, and color definitionsassets/globals.css - Ready-to-use CSS file with all tokens and base styles
1---2name: design-system-builder3description: Framework-agnostic brutalist web design system with Space Grotesk typography, purple/cyan/pink palette, bold offset shadows, and sharp borders. Use when building any web interface (HTML, React, Vue, Svelte, Astro, etc.) that needs neo-brutalist aesthetics with consistent design tokens, typography scale, and component patterns.4---5
6# Design System Builder
7
8Build web interfaces following a cohesive design system with neo-brutalist aesthetics, bold typography, and vibrant colors.
9
10## Quick Start
11
121. Read `references/design-tokens.md` for CSS variables and Tailwind config
132. Apply the design system principles below
143. Use provided component patterns as starting points
15
16## Core Design Principles
17
18### Visual Identity
19- **Style**: Neo-brutalist with bold shadows, sharp borders, no border-radius by default
20- **Typography**: Space Grotesk (300-900 weights) as primary font
21- **Colors**: Purple primary (#7b61ff), Cyan secondary (#2a9d9e), Pink accent (#e5729a)
22- **Shadows**: Bold offset shadows (`4px 4px 0px rgba(58,60,66,0.92)`)
23- **Borders**: 2px solid dark gray (#3a3c42)
24
25### Typography Scale
26
27```css
28/* Headings - Space Grotesk */
29H1: 60px/1.1, weight 900, letter-spacing -0.02em
30H2: 48px/1.0, weight 700, letter-spacing -0.02em
31H3: 30px/1.2, weight 700
32H4: 24px/1.3, weight 700
33H5: 20px/1.4, weight 700
34
35/* Body */
36Large: 18px/1.6, weight 400
37Base: 16px/1.6, weight 400
38Small: 14px/1.5, weight 400
39
40/* Labels */
41Label: 12px, weight 700, uppercase, letter-spacing 0.15em
42```
43
44### Spacing Scale (8px base)
45```
464px | 8px | 12px | 16px | 24px | 32px | 40px | 48px | 64px | 80px
47```
48
49### Color Palette
50
51| Role | Color | Hex |
52|------|-------|-----|
53| Primary | Purple | #7b61ff |
54| Primary Dark | Deep Purple | #5b40c9 |
55| Secondary | Cyan | #2a9d9e |
56| Accent | Pink | #e5729a |
57| Success | Green | #34c759 |
58| Warning | Amber | #fbbf24 |
59| Danger | Orange-Red | #ff8555 |
60| Text | Charcoal | #22242a |
61| Border | Dark Gray | #3a3c42 |
62| Background | Off-White | #e8e8e8 |
63
64## Component Patterns
65
66### Buttons
67```css
68.btn {
69 padding: 12px 16px;
70 font: 700 1rem/1 'Space Grotesk';
71 text-transform: uppercase;
72 letter-spacing: 0.075em;
73 border: 2px solid;
74 border-radius: 0;
75 cursor: pointer;
76 transition: all 250ms ease;
77}
78
79.btn-primary {
80 background: #7b61ff;
81 color: white;
82 border-color: #7b61ff;
83}
84
85.btn-primary:hover {
86 background: #6b50d9;
87 box-shadow: 4px 4px 0 rgba(58,60,66,0.92);
88}
89
90.btn-primary:active {
91 transform: translate(2px, 2px);
92 box-shadow: none;
93}
94```
95
96### Cards
97```css
98.card {
99 background: white;
100 border: 2px solid #3a3c42;
101 padding: 24px;
102 transition: all 250ms ease;
103}
104
105.card:hover {
106 box-shadow: 4px 4px 0 rgba(58,60,66,0.92);
107 border-color: #7b61ff;
108}
109```
110
111### Navigation
112- Sticky top, white background
113- 2px bottom border
114- Brand: 24px, weight 900, primary color
115- Links: uppercase, 700 weight, underline on hover
116
117## Implementation Checklist
118
1191. **Import Space Grotesk font**
120 ```html
121 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
122 ```
123
1242. **Set CSS variables** - See `references/design-tokens.md`
125
1263. **Apply base styles**
127 ```css
128 body {
129 font-family: 'Space Grotesk', system-ui, sans-serif;
130 color: #22242a;
131 background: #f0f0f0;
132 }
133 ```
134
1354. **Use design tokens** for all colors, spacing, typography
136
1375. **Add hover states** with bold shadows and color shifts
138
1396. **Ensure contrast** - Primary purple on white fails AA for body text; use darker variants
140
141## References
142
143- `references/design-tokens.md` - Complete CSS variables, Tailwind config, and color definitions
144- `assets/globals.css` - Ready-to-use CSS file with all tokens and base styles
majiayu000