Brutalist Web

# DESIGN.md - Brutalist Web

Raw, loud, deliberately unpolished. Thick black borders, system fonts, high-contrast blocks, and one clashing accent. The roughness is intentional and consistent, not careless.

## Palette (tokens)

| Token | Value | Use |
| --- | --- | --- |
| `--paper` | #FFFFFF | Background |
| `--black` | #000000 | Text, thick borders, blocks |
| `--electric` | #2B2BFF | Primary accent block |
| `--acid` | #D6FF3B | Highlight block |
| `--hot` | #FF2D95 | Secondary accent block |

Accents are used as full blocks and fills, not tints. Contrast is maximal and unapologetic.

## Type scale

- Family: system UI stack (`system-ui, -apple-system, "Segoe UI", sans-serif`) or a plain grotesque. No refined typefaces.
- Big, heavy, sometimes uppercase headlines. Body can be plain and slightly oversized.
- Scale (rem): 0.875, 1, 1.25, 1.75, 2.5, 3.5, 5, 7.
- Underlines on links stay visible. Do not remove the default link look entirely.

## Spacing grid

Loose and uneven is acceptable, but stay on an 8px base so it reads as intentional. Elements can butt directly against each other with no gap, or sit with large gaps. Container can run full-bleed.

## Corners and borders

- Corner radius: 0. No exceptions.
- Borders: thick, 2px to 4px solid black. Borders everywhere, and they can be doubled.
- Shadows: hard offset only (for example `8px 8px 0 var(--black)`), never blurred.

## Component patterns

- Buttons: thick black border, flat accent or white fill, hard offset shadow, chunky padding. Hover can invert colors abruptly.
- Cards: bordered blocks, sometimes overlapping, sometimes rotated a degree or two. Visible structure.
- Sections: raw dividing rules, big block headers, occasional full-color background sections.

## Banned patterns

- Gradients, soft shadows, subtle anything. This system has no subtlety.
- Rounded corners.
- Muted or pastel palettes.
- Emojis as a substitute for real content.
- Em dashes. Use a hyphen with spaces.