Neo-Brutalism

# Neo-Brutalism (Neubrutalism)

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

## Essence

Flat product interfaces with heavy black outlines, unblurred hard shadows and saturated solid color blocks. It borrows the "nothing hidden" attitude of web brutalism but keeps a clear hierarchy and good usability, so elements feel like physical stickers you can press.

## Design tokens

### Colors

- `background` `#FFF4E0` — page background
- `surface` `#FFFFFF` — cards, panels and raised surfaces
- `text` `#000000` — primary text
- `muted` `#3D3D3D` — secondary text, captions, placeholders
- `accent` `#FF6FB5` — primary actions, links, key highlights
- `on-accent` `#000000` — text and icons placed on the accent color
- `border` `#000000` — dividers, outlines, input borders
- `highlight` `#FFD23F` — secondary emphasis, badges, selection

### Typography

- Display / headings: `Archivo Black` (Google Fonts, weights 400) → fallback `"Arial Black", "Helvetica Neue", Arial, sans-serif`
- Body text: `Public Sans` (Google Fonts, weights 400 / 600 / 700) → fallback `system-ui, -apple-system, "Segoe UI", sans-serif`
- Type scale (px): 13 · 15 · 18 · 22 · 30 · 44 · 64

### Spacing & Shape

- Base unit: 4px · Spacing scale (px): 4 · 8 · 12 · 16 · 24 · 32 · 48
- Corner radius (sm / md / lg): 6 / 10 / 16 px
- Border: 3px solid
- Shadows (sm / md / lg): `2px 2px 0 #000000` / `4px 4px 0 #000000` / `8px 8px 0 #000000`

### Motion

- Durations (fast / base): 80ms / 140ms
- Easing: `cubic-bezier(0.3, 0, 0.2, 1)`

### Signature effects

- `--nb-blue`: `#7DA8FF`
- `--nb-green`: `#74E3B5`

## Do

- Give every container, button and input a 3px solid black outline.
- Use solid black zero-blur offset shadows (e.g. 4px 4px 0 #000) with one consistent direction.
- Separate areas with saturated solid blocks — yellow, pink, blue, green — one color per block.
- On press, move buttons toward their shadow and collapse the shadow to mimic a physical press.
- Use an ultra-heavy sans-serif for headlines and a legible sans-serif for body text.

## Don't

- Do not use blurred shadows, gradients or glass effects.
- Do not put white text on colored backgrounds.
- Do not drop the outlines — a hard shadow without an outline looks like a rendering bug.
- Do not use light weights or serif typefaces for headlines.

## Components

- **Buttons**: Solid pink or yellow buttons with a 3px black outline and a 4px hard black shadow. Hover lifts up-left and grows the shadow; press shifts down-right and removes it.
- **Cards**: White or colored cards with a heavy outline and an 8px hard shadow. A colored tag strip can sit on top, with labels slightly rotated like stickers.
- **Forms**: Inputs with heavy black outlines and a small hard shadow; focus turns the background yellow. Errors appear in an outlined pink block.
- **Navigation**: The top navigation is itself an outlined container. Ultra-heavy brand name; the current item is marked with a colored pill.
- **Layout**: A clear card grid with enough gaps for the shadows to show. An outlined marquee band can separate sections.
- **Imagery & icons**: Flat illustrations, heavily outlined icons and stickers. Photos also get a black outline and a hard shadow.

## Accessibility

- Use pure black text on every colored background; never put white text on pink or blue.
- Disable the press-shift motion under prefers-reduced-motion and keep only the color change.

_Generated by Style Museum._