Bauhaus

---
name: bauhaus
description: Apply the Bauhaus visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Bauhaus, mentions bauhaus style, primary geometric, form follows function, or describes primary color triad, circle, square, triangle motifs, 45-degree diagonal compositions — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Bauhaus Design System

The 1919–1933 German school's visual language: primary red, yellow, and blue with black and white, elemental circles, squares, and triangles, geometric sans-serif type, and asymmetric compositions energized by 45-degree diagonals. Every element earns its place — ornament is banished, function is the aesthetic.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Bauhaus.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (bauhaus style, primary geometric, form follows function, Weimar modernism, geometric functionalism), or describes its traits: primary color triad; circle, square, triangle motifs; 45-degree diagonal compositions; geometric sans-serif type; asymmetric grid; zero ornament.

## Design tokens

### Color palette

- Pure white ground: `#ffffff` (--color-bg)
- Black text and structural rules: `#111111` (--color-text)
- Primary red — dominant accent and CTAs: `#e2231a` (--color-accent)
- Primary yellow — fills and highlights (never text): `#ffd400` (--color-accent-yellow)
- Primary blue — secondary accent, links: `#0057b8` (--color-accent-blue)
- Warm paper-toned panel background: `#f4f1ea` (--color-surface)
- Rules, dividers, and geometric outlines: `#111111` (--color-line)

### Typography

- Display / headings: Montserrat (fallback: Futura, Helvetica, sans-serif) (ideal: Futura, premium — use Montserrat as the free substitute)
- Body: Work Sans (fallback: Helvetica, Arial, sans-serif) (ideal: Akzidenz-Grotesk, premium — use Work Sans as the free substitute)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.1, letter-spacing 0.02em, lowercase
- Body: line-height 1.3, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 72, 96 — Structured and economical: a strict modular grid with deliberate asymmetric whitespace; geometry occupies space so content doesn't have to.
- Border radius: none 0px, circle 50% — Only two shapes of corner exist: perfectly square and perfectly circular. No in-between radii.
- Border treatment: 3px solid #111111 — Bold black rules structure the page; some panels use color fill with no border at all. Never gray hairlines.

### Shadows

- none: `none` — Bauhaus composition is flat; hierarchy comes from color, scale, and geometry, never simulated depth

### Layout

- Max content width: 1280px
- Asymmetric modular grid — anchor content to one side, balance with geometry on the other
- One 45-degree diagonal element per composition (bar, rotated headline, or triangle edge)
- Primary-color blocks used as functional zones: section markers, sidebars, callouts
- Thick black horizontal rules separate major sections

### Effects

- Rotated (45deg) accent bars and vertical text labels
- Oversized elemental shapes (circle/triangle/square) as section backgrounds, partially cropped by the viewport

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 120ms / 200ms / 350ms
- Shapes translate and rotate into position on entry along their geometric axes
- Hover shifts fills between primary colors with a hard swap or quick fade
- Motion is mechanical and precise — constant velocity feel, no bounce or overshoot

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-accent: #e2231a;
  --color-accent-yellow: #ffd400;
  --color-accent-blue: #0057b8;
  --color-surface: #f4f1ea;
  --color-line: #111111;
  --radius-none: 0px;
  --radius-circle: 50%;
  --border-default: 3px solid #111111;
  --font-display: Montserrat, Futura, Helvetica, sans-serif;
  --font-body: "Work Sans", Helvetica, Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.3;
  --tracking-heading: 0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;900&family=Work+Sans:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** White bar with 3px black bottom rule; lowercase wordmark; nav links lowercase with a small colored square marker appearing beside the active item
- **Hero:** Lowercase Montserrat headline set asymmetrically, overlapping a large cropped red circle and a yellow 45-degree bar; blue square CTA anchors the composition
- **Card:** White or paper surface, 3px black border, square corners, a solid primary-color header block or corner triangle, 24px padding
- **Button (primary):** Red fill, white lowercase label, square corners, no border; hover swaps to blue fill
- **Button (secondary):** White fill, 3px black border, black lowercase label; hover fills yellow with black text
- **Form fields:** White field with 3px black border, square corners; focus swaps the border to primary blue

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Elemental geometry as layout: a red circle, yellow triangle, and blue square deployed as structural composition devices, with one bold 45-degree diagonal bar cutting across the arrangement. Spend boldness here; keep everything else quiet.

## Do

- Compose with circle, square, and triangle as first-class layout elements
- Keep the palette to the primary triad plus black and white — at most one warm paper tone
- Use asymmetry and one strong diagonal to create tension
- Honor 'form follows function': every visual element must do structural work

## Don't

- No ornament, texture, gradients, or shadows
- No serif or script typefaces anywhere
- Don't center everything — symmetric layouts lose the school's dynamism
- Don't tint or pastel the primaries; they must stay at full saturation

## Accessibility notes

- Red (#e2231a) on white passes 4.5:1 only barely (about 4.7:1) — fine for text, but never place red text on the warm surface tone (#f4f1ea), where it drops below AA
- Yellow (#ffd400) fails contrast against white and must carry black text or act as pure decoration
- The lowercase heading convention (a Bauhaus typographic experiment) can reduce scannability — keep headings short and maintain strong size hierarchy

## Reference sites

- Bauhaus-Archiv Berlin: https://www.bauhaus.de
- Stiftung Bauhaus Dessau: https://www.bauhaus-dessau.de
- MoMA — Bauhaus: https://www.moma.org

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip bauhaus.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/bauhaus.json

Settings → Capabilities → Skills → Upload skill → bauhaus.zip