Bauhaus

# Bauhaus (Staatliches Bauhaus)

You are building a frontend UI. Apply the **Bauhaus** visual style consistently to every screen and component. Treat the tokens and rules below as hard constraints, not suggestions.

## Essence

The modernist design language of the German Bauhaus school: shapes reduced to circles, squares and triangles, color reduced to the three primaries plus black and white, and ornament replaced by asymmetric composition and function-first typography.

## Design tokens

### Colors

- `background` `#F2EDE3` — page background
- `surface` `#FFFFFF` — cards, panels and raised surfaces
- `text` `#141414` — primary text
- `muted` `#58544D` — secondary text, captions, placeholders
- `accent` `#D42A20` — primary actions, links, key highlights
- `on-accent` `#FFFFFF` — text and icons placed on the accent color
- `border` `#141414` — dividers, outlines, input borders
- `highlight` `#F4C21B` — secondary emphasis, badges, selection

### Typography

- Display / headings: `Jost` (Google Fonts, weights 500 / 700) → fallback `Futura, "Century Gothic", "Avenir Next", sans-serif`
- Body text: `Jost` (Google Fonts, weights 400 / 500) → fallback `Futura, "Century Gothic", "Avenir Next", sans-serif`
- Type scale (px): 12 · 14 · 16 · 20 · 28 · 44 · 72

### Spacing & Shape

- Base unit: 8px · Spacing scale (px): 8 · 16 · 24 · 32 · 48 · 64
- Corner radius (sm / md / lg): 0 / 0 / 0 px
- Border: 2px solid
- Shadows (sm / md / lg): none / none / none

### Motion

- Durations (fast / base): 150ms / 260ms
- Easing: `cubic-bezier(0.65, 0, 0.35, 1)`

### Signature effects

- `--bauhaus-blue`: `#1D4E9E`

## Do

- Use only red #D42A20, yellow #F4C21B and blue #1D4E9E, plus near-black and warm white.
- Build illustrations, icons and decoration from circles, squares and triangles.
- Compose asymmetrically: headline to one side, geometric composition on the other.
- Use a geometric sans-serif; headlines bold and large, Latin text optionally all lowercase.
- Divide sections with 2px black rules and bands of solid color.

## Don't

- Do not use gradients, shadows, rounded buttons or skeuomorphic textures.
- Do not introduce colors outside the primaries (pink, purple, teal and so on).
- Do not use serif or script typefaces.
- Do not center and mirror every element.

## Components

- **Buttons**: Square rectangles. Primary: red with white text; secondary: black outline. A small circle, square or triangle may precede the label as an icon. Hover swaps between the primaries.
- **Cards**: A small composition of geometric shapes at the top acts as the illustration, followed by a bold title and body text. Framed by a 2px black line, no shadow.
- **Forms**: Square thin-outlined inputs or heavy underlines; each label is preceded by a small colored square. Focus turns the line blue; errors sit in a red block.
- **Navigation**: Brand name on the left with three colored geometric dots; lowercase or medium-weight text links on the right, the current item marked with a color bar below.
- **Layout**: An asymmetric grid: the headline fills most of the left, a geometric composition sits on the right, and bands of solid color (especially blue or yellow) run across the page between sections.
- **Imagery & icons**: Collages of flat geometric shapes instead of photos; when photos are needed, use high-contrast black-and-white photography layered with color blocks.

## Accessibility

- Only black text works on yellow; white on yellow has far too little contrast.
- Do not rely on color alone to signal state — pair it with shape or text (e.g. a symbol before error messages).

_Generated by Style Museum._