# 03 · Neo-Brutalist — Design System

> Tactile-brutalism personal site — warm newsprint, black 3px borders, solid offset shadows, zero radius, acid colour blocks, and huge uppercase display type. Trend: the 2026 anti-grid / brutalist counter-movement (v0.dev, The Browser Company, indie SaaS).
> **All content is placeholder** — the persona "MAX WILDER" and every stat/product/post are samples; replace them with your own.

---

## 1. Website Goal
A loud, confident, memorable personal site that positions through contrast — "when everyone else looks like Apple, looking different is the differentiator." It optimizes for a strong, unforgettable first impression and for personality, favouring bold statements over polish.

## 2. Target Audience
Indie hackers, build-in-public developers, and creative technologists — anyone with opinions and a body of scrappy, shipped work. It flatters people who want their site to read as punk and self-made rather than corporate.

## 3. Brand Personality
Bold, raw, opinionated, a little punk, high-energy. Voice is blunt and first-person — "look at me," not "whisper it" — committed to UPPERCASE and strong claims.

## 4. Visual Direction
Warm newsprint page with a subtle dotted texture, every box wrapped in a `3px solid #111` border and a hard 6px offset shadow (never blurred). Acid colour blocks (lime / coral / sky) alternate against ink and white to build rhythm. Type is the interface: huge uppercase Archivo, with an optional outlined word via `-webkit-text-stroke`.

## 5. Color System
High contrast is the point — near-black on light, or paper on ink, with acid blocks for emphasis.

| Token | Hex | Use |
|---|---|---|
| `--paper` | `#f3f1e6` | warm newsprint page (dotted texture) |
| `--paper-2` | `#ffffff` | box fill |
| `--ink` | `#111111` | text + all borders |
| `--ink-2` | `#3b3b36` | secondary text |
| `--accent` | `#2e1df0` | electric blue — primary CTA / links |
| `--lime` | `#ccf13d` | acid block |
| `--coral` | `#ff5b39` | hot block |
| `--sky` | `#8fd6ff` | cool block |

Supporting tokens: `--border: 3px solid var(--ink)`, `--shadow: 6px 6px 0 var(--ink)`, `--shadow-sm: 4px 4px 0 var(--ink)`. **Rule:** commit to high contrast; colour blocks alternate for rhythm — no low-contrast pastels.

## 6. Typography

| Role | Family | Notes |
|---|---|---|
| Display / headings | **Archivo** (`--disp`), system fallback | weights 500–900; UPPERCASE, tight `-0.02em`→`-0.04em` |
| Labels / UI / meta / body | **Space Mono** (`--mono`), mono fallback | weights 400 / 700, UPPERCASE |

- Body is Archivo 16px, weight 500, line-height 1.55.
- Fluid `clamp()`: hero `h1` `clamp(44px, 11vw, 128px)` at `-0.04em`, line-height 0.92; stat `.n` `clamp(40px, 6vw, 68px)`; `.section-title` `clamp(26px, 4vw, 44px)`; box `h3` `clamp(18px, 2vw, 24px)`.
- Signature move: **huge uppercase hero type** with an optional outlined word — `.out` uses `-webkit-text-stroke: 2px var(--ink)` with transparent fill.

## 7. Layout Principles
- **Spacing** gutter `--pad: clamp(16px, 4vw, 44px)`; grid gap `clamp(14px, 1.6vw, 20px)`; section titles get `clamp(40px, 6vw, 72px)` top margin.
- **Container** `.wrap` max-width `1160px`.
- **Grid** 12-column `.grid` (`repeat(12, 1fr)`); boxes span via `.col-4` / `.col-6` / `.col-8` / `.col-12`.
- **Radius** `0` everywhere — no rounded corners on any box, input, or chip.
- **Elevation** solid offset shadows only (`--shadow` 6px, `--shadow-sm` 4px) — never blurred. Interactive boxes "press": hover translates `-2px,-2px`, active translates `+2px,+2px`.

## 8. Homepage Sections
1. **Nav** — sticky, hairline-bordered bottom; uppercase brand with a lime mark, mono links (current = ink fill), EN/中文 toggle.
2. **Hero** — mono kicker chip, huge uppercase headline with an outlined word, lede, two CTAs (solid indigo + lime).
3. **Stats** — three colour stat blocks (lime / sky / coral) with big numbers.
4. **"Stuff I made" projects** — a `.grid` of varied colour boxes (flagship `col-8`, ink toy `col-4`, coral and sky `col-6` project rows with arrows).
5. **"The deal" about strip** — a wide statement box (`col-8`) plus a lime toolbox box (`col-4`), closed by the template note.
6. **Footer** — an ink CTA box ("GOT A WEIRD IDEA?") with social links, plus copyright.

## 9. Component Style
- **Buttons** — `.btn` mono uppercase, `--border`, `--shadow-sm`; hover translates `-2px,-2px` (shadow grows to 6px), active presses to `+2px,+2px`. Variants `.solid` (accent, white text) and `.lime`.
- **Boxes / cards** — `.box` = `--paper-2` fill, `--border`, `--shadow`; colour variants `.lime` / `.coral` / `.sky` / `.ink`; `.flat` drops the shadow. `a.box` presses on hover, arrow translates `6px`.
- **Nav** — sticky, uppercase mono links that gain a 2px ink border on hover; current page is ink-filled.
- **Forms** — `--paper`-filled inputs with `--border`; focus switches to white and adds `--shadow-sm`.
- **Chips / tags** — square, 2px ink border, mono uppercase; invert border/colour inside `.ink` boxes.
- **Chat / AI surface** — a `.chat` box with a `--border` header and a lime square status dot; bordered square bubbles — `.msg.user` on `--sky`, `.msg.ai` on white.
- **Bilingual EN/中文 toggle** — elements with both `data-en` and `data-zh` are swapped by `app.js` (`applyLang`, via `innerHTML` so inline `<span class="out">` survives); inputs use `data-*-ph`. Default English; choice persists in `localStorage` under key **`brut_lang`**; proper nouns carry no `data-*`.

## 10. Motion / Animation
- Scroll reveals: `[data-rise]` starts faded + 18px down and settles via `.in`, a short snappy 0.4s on `--ease` `cubic-bezier(.2,.7,.3,1)`; stagger via `data-d="1|2|3"` (0.05 / 0.1 / 0.15s).
- Press interactions on buttons/boxes (translate + shadow shift); project arrows translate on hover.
- Guarded by `html.js`. `@media (prefers-reduced-motion: reduce)` disables the rises.

## 11. Responsive Design
- **≤ 780px** — the 12-column grid collapses: `.col-4` / `.col-6` / `.col-8` all span the full 12 (single column).
- **≤ 700px** — nav wraps (links drop to a full-width row); blog `.post` rows stack to a single column.

## 12. Things to Avoid
- No `border-radius` anywhere — rounding breaks the brutalist contract.
- No blurred or soft shadows, and no gradients — shadows must be solid offsets.
- No low-contrast pastels; keep colour blocks acid and text near-black or paper.
- Don't abandon UPPERCASE or mix in a quiet, restrained mono label style (that belongs to the darker/hairline templates) — commit fully or it reads as unfinished.