Brutalist
Loud neo-brutalist theme — hard edges, offset shadows.
Build something people love.
A live preview of this theme — every color, font, radius, and shadow you see is rendered straight from its tokens.
Color system
Click any swatch to copy. Contrast graded against WCAG.
Typography
Body sample. Space Grotesk carries running text — readable paragraphs, comfortable measure, and a rhythm that holds up across long pages of content and UI.
Radius, shadow & fonts
Components
Real UI rendered with this theme's tokens.
A surface for grouping content, with the theme's border, radius, and shadow.
Principles, guidelines & component specs
Do's & don'ts, spacing, motion, iconography, accessibility, and exact component specs — all in the design.md too.
Do
- •Outline every surface with a thick border.
- •Use solid offset shadows, never blur.
- •Go high-contrast: yellow and pink on black and white.
Don't
- •Don't round corners.
- •Don't soften shadows.
- •Don't be timid with color.
- •Snap, don't ease — motion is blunt and fast.
- •No bounce, no soft fades.
Hover to feel this theme's base transition.
Lucide · 2.5px stroke · 1.1rem. Bold 2.5px stroke, square chips, black outlines.
- High contrast is core — keep it.
- Ensure the yellow primary keeps dark text on it.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0rem |
| Padding | 0.5rem 1rem |
| Height | 2.75rem |
| Weight | 700 |
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 0rem |
| Padding | 0.15rem 0.55rem |
| Font size | 0.75rem |
| Weight | 700 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 0rem |
| Padding | 1rem 1.25rem |
| Border | 2px solid var(--border) |
Always pair the color with an icon and a text label — never rely on color alone.
Form field
| Background | var(--background) |
| Border | 2px solid var(--border) |
| Radius | 0rem |
| Height | 2.5rem |
| Padding | 0.5rem 0.75rem |
Label sits above the field; helper or error text sits below.
Card
| Background | var(--card) |
| Text | var(--card-foreground) |
| Border | 1px solid var(--border) |
| Radius | 0rem |
| Padding | 1.25rem |
| Shadow | 4px 4px 0 0 rgba(10,10,10,1) |
The design brief
Brutalist is loud on purpose — hard edges, thick borders, offset shadows, and zero radius.
Principles
- Borders do the work. Every surface is outlined; shadows are solid offsets, never blurred.
- High contrast, high energy. A yellow primary and pink accent on stark black and white.
- No softness. Radius is zero; nothing apologizes.
When to use
Landing pages, portfolios, launches, and anything that needs to stop the scroll.
Use this with your AI
Download or copy the design.md and paste it into Claude, Cursor, or v0 — it tells the agent exactly which colors, fonts, radii, and shadows to use, so your site comes out looking like this.
Export tokens
Drop straight into your codebase.
:root {
--radius: 0rem;
--background: #ffffff;
--foreground: #0a0a0a;
--card: #ffffff;
--card-foreground: #0a0a0a;
--popover: #ffffff;
--popover-foreground: #0a0a0a;
--primary: #ffde03;
--primary-foreground: #0a0a0a;
--secondary: #f0f0f0;
--secondary-foreground: #0a0a0a;
--muted: #f0f0f0;
--muted-foreground: #3a3a3a;
--accent: #ff5470;
--accent-foreground: #0a0a0a;
--destructive: #ff0000;
--border: #0a0a0a;
--input: #0a0a0a;
--ring: #0a0a0a;
--shadow-sm: 2px 2px 0 0 rgba(10,10,10,1);
--shadow-md: 4px 4px 0 0 rgba(10,10,10,1);
--shadow-lg: 6px 6px 0 0 rgba(10,10,10,1);
--font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
--ease-standard: linear;
--ease-emphasized: cubic-bezier(0.2,0,0,1);
--duration-base: 120ms;
}
.dark {
--background: #0a0a0a;
--foreground: #fafafa;
--card: #141414;
--card-foreground: #fafafa;
--popover: #141414;
--popover-foreground: #fafafa;
--primary: #ffde03;
--primary-foreground: #0a0a0a;
--secondary: #1f1f1f;
--secondary-foreground: #fafafa;
--muted: #1f1f1f;
--muted-foreground: #a3a3a3;
--accent: #ff5470;
--accent-foreground: #0a0a0a;
--destructive: #ff5a5a;
--border: #fafafa;
--input: #fafafa;
--ring: #fafafa;
}More designs
Monolith
Pure-monochrome, dark-first UI for frontier products — black, white, and a precise gray ramp.
Aurora
Soft glassmorphic theme with violet glow.
Nocturne
Calm, dark-first SaaS theme with a single indigo accent.