# Neo-Brutalism — AI design spec

> Thick black edges, offset shadows and saturated pastel fills.
>
> Style page: https://www.aiwebstyle.com/styles/neo-brutalism.html · Live preview: https://www.aiwebstyle.com/previews/neo-brutalism.html
>
> Drop this file at the root of a project and point your coding agent at it. Every value is copied from the working stylesheet, not estimated.

## 1. What this style is

Neo-brutalism keeps the load-bearing parts of brutalism — heavy outlines, flat fills, hard offset shadows — and swaps the concrete grey for candy. The result is loud but friendly, which is why it colonised startup landing pages while the original brutalism stayed in art schools. The rule that makes or breaks it: every shadow is a hard offset with zero blur, and every border is identical in weight. Soften either one and the whole thing reads as a sloppy card grid instead of a deliberate style.

**Signature rules**

- border: 3px solid #000
- radius: 0
- shadow: 8px 8px 0
- press: translate 4px
- fills: 4 pastels
- text: black only

## 2. Tokens

### Page surface

| Token | Value | Purpose |
|---|---|---|
| `--page-bg` | `#fdfdf7` | Page background (solid fallback) |
| `--page-bg-gradient` | `none` | Page background gradient; overrides the solid unless `none` |

### Text

| Token | Value | Purpose |
|---|---|---|
| `--text-color` | `#111111` | Body text |
| `--heading-color` | `#000000` | Headings |

### Links

| Token | Value | Purpose |
|---|---|---|
| `--link-color` | `#4b2fd6` | Link and inline accent |

### Borders

| Token | Value | Purpose |
|---|---|---|
| `--border-color` | `#000000` | Dividers and input borders |

### Cards

| Token | Value | Purpose |
|---|---|---|
| `--card-bg` | `#ffffff` | Card surface |
| `--card-border-radius` | `0` | Card corner radius |
| `--card-shadow` | `8px 8px 0 #000000` | Card at rest |
| `--card-hover-shadow` | `4px 4px 0 #000000` | Card on hover |

### Header

| Token | Value | Purpose |
|---|---|---|
| `--header-bg` | `#c9b8ff` | Sticky header surface |
| `--header-text-color` | `#000000` | Header text and nav links |

### Buttons

| Token | Value | Purpose |
|---|---|---|
| `--button-bg` | `#000000` | Primary button fill |
| `--button-text-color` | `#ffffff` | Primary button label |
| `--button-hover-bg` | `#4b2fd6` | Primary button hover fill |

### Code / prompt block

| Token | Value | Purpose |
|---|---|---|
| `--prompt-bg` | `#ffe08a` | Code / prompt block surface |
| `--prompt-text-color` | `#000000` | Code / prompt block text |

### Type

| Token | Value | Purpose |
|---|---|---|
| `--base-font` | `var(--font-inter)` | Body font stack |
| `--heading-font` | `var(--font-montserrat)` | Heading font stack |

## 3. Do

- Drive every color, radius and shadow from the tokens below. No literal hex values in component code.
- Reuse the `--card-*` tokens for any elevated surface (card, panel, modal, dropdown) so elevation stays consistent.
- Keep header and footer on `--header-*` / `--footer-*` even when the page background is a gradient.
- Consumer products and indie tools that want to feel human and a bit cheeky.
- Launch pages where the page itself is part of the marketing.
- Portfolios and event sites where standing out matters more than looking restrained.

## 4. Don't

- Do not blend tokens from another style in this library — one page, one token set.
- Do not invent a hover state: every interactive element has a `*-hover-*` token above.
- Fintech, health or anything where trust is the primary currency — hard edges read as shouting.
- Dense data UI. The borders consume space that tables need.
- Long reading sessions; the high contrast and flat fills fatigue the eye quickly.

## 5. Using this with a coding agent

Place this file at the project root as `DESIGN.md`, then instruct the agent:

> Follow `DESIGN.md` for all UI. Every color, radius and shadow comes from its token table. If you need a state that is not listed, derive it from the nearest listed token and add the new token to `DESIGN.md` instead of hard-coding a value.

If the project already has a token layer (Tailwind config, CSS custom properties, a theme file), map these tokens onto it one-to-one and keep the names unchanged.

## 6. Original prompt

```text
Design a neo-brutalist interface. Every card, button and input uses a 3px solid #000 border. The same weight everywhere, no exceptions. Border radius 0. Nothing rounded.
```

---

*Generated from the `neo-brutalism` theme in `style.css`. Token values are verbatim — regenerate rather than edit by hand.*