Bauhaus
A geometric theme: primary red-blue-yellow, hard edges, and grotesk type for bold, design-forward marketing and portfolios.
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
- •Use primary colours as flat, confident blocks.
- •Compose on a strict grid with hard edges.
Don't
- •Don't add gradients or soft shadows.
- •Don't round corners — geometry is the point.
- •Keep motion structural and deliberate, like sliding blocks.
Hover to feel this theme's base transition.
Lucide · 2.5px stroke · 1rem. Outline icons with a consistent stroke width; size icons to match adjacent text and align them optically.
- Never use color as the only signal — pair it with text, an icon, or a shape.
- Every interactive element must be keyboard reachable and show a visible focus ring.
- Honor prefers-reduced-motion: reduce by disabling non-essential animation.
- Keep a logical heading order and give every form control a label.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0rem |
| Padding | 0 1.15rem |
| Height | 2.7rem |
| 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.72rem |
| Weight | 700 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 0rem |
| Padding | 1rem 1.25rem |
| Border | 1px 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 | 1px solid var(--input) |
| Radius | 0rem |
| Height | 2.7rem |
| 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.5rem |
| Shadow | 5px 5px 0 0 rgba(26,26,26,0.85) |
The design brief
Bauhaus is a geometric design system inspired by primary-colour modernism: red, blue, and yellow, hard edges, and grotesk type. It is bold, structured, and design-forward.
Principles
- Primary colours used as flat, confident blocks.
- Hard edges and a strict grid drive the composition.
- Grotesk type and generous scale keep it modern.
When to use
Use Bauhaus for design studios, cultural institutions, and bold marketing. Avoid it for soft consumer or wellness brands.
Signature details
- Klein-blue
#1d4ed8primary with red and yellow accents. - Space Grotesk + JetBrains Mono, 0 radius.
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: #fdfcf9;
--foreground: #1a1a1a;
--card: #ffffff;
--card-foreground: #1a1a1a;
--popover: #ffffff;
--popover-foreground: #1a1a1a;
--primary: #1d4ed8;
--primary-foreground: #ffffff;
--secondary: #f3f1ea;
--secondary-foreground: #1a1a1a;
--muted: #f0eee6;
--muted-foreground: #5a564c;
--accent: #facc15;
--accent-foreground: #1a1a1a;
--destructive: #dc2626;
--destructive-foreground: #ffffff;
--border: #1a1a1a;
--input: #ddd9cc;
--ring: #1d4ed8;
--shadow-sm: 0 2px 0 0 rgba(26,26,26,0.85);
--shadow-md: 5px 5px 0 0 rgba(26,26,26,0.85);
--shadow-lg: 9px 9px 0 0 rgba(26,26,26,0.85);
--font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
--ease-standard: cubic-bezier(0.4,0,0.2,1);
--ease-emphasized: cubic-bezier(0.16,1,0.3,1);
--duration-base: 200ms;
}
.dark {
--background: #121212;
--foreground: #f0eee6;
--card: #1a1a1a;
--card-foreground: #f0eee6;
--popover: #1a1a1a;
--popover-foreground: #f0eee6;
--primary: #60a5fa;
--primary-foreground: #0a1020;
--secondary: #222220;
--secondary-foreground: #f0eee6;
--muted: #222220;
--muted-foreground: #a8a59c;
--accent: #facc15;
--accent-foreground: #1a1a1a;
--destructive: #fb7185;
--destructive-foreground: #450a0a;
--border: #f0eee6;
--input: #2e2e2a;
--ring: #60a5fa;
}More designs
Holographic
An iridescent glass theme: violet-to-aqua sheen, frosted surfaces, and soft glow for futuristic, premium product UIs.
Cosmic
A deep-space theme: violet-on-midnight, nebula accents, and luminous type for AI, astronomy, and dark-first product UIs.
Synthwave
A neon sunset theme: hot-pink and violet over deep night, retro glow, and bold type for music, gaming, and night-mode apps.