Web Brutalism

---
name: web-brutalism
description: Apply the Web Brutalism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Web Brutalism, mentions brutalist web design, raw HTML style, unstyled web, or describes unstyled system defaults, #0000ee underlined links, Times New Roman and system mono — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Web Brutalism Design System

The web as the browser ships it: black Times New Roman on white, blue underlined links that turn purple when visited, default-size headings, visible table structure, zero shadows, zero radius, zero decoration. Truth to materials, where the material is HTML.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Web Brutalism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (brutalist web design, raw HTML style, unstyled web, default-web aesthetic, HTML honesty), or describes its traits: unstyled system defaults; #0000ee underlined links; Times New Roman and system mono; single left-aligned column; visible table structure; no shadows, no radius, no images-as-decoration.

## Design tokens

### Color palette

- Bare white browser canvas: `#ffffff` (--color-bg)
- Default black text: `#000000` (--color-text)
- Default unvisited link blue, always underlined: `#0000ee` (--color-accent)
- Default visited-link purple: `#551a8b` (--color-link-visited)
- Default active-link red: `#ff0000` (--color-link-active)
- hr and table border gray: `#808080` (--color-rule)

### Typography

- Display / headings: Times New Roman (fallback: Times, Georgia, serif)
- Body: Times New Roman (fallback: Times, Georgia, serif)
- Mono / data: Courier New (fallback: Courier, monospace)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.2, letter-spacing 0
- Body: line-height 1.2, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 0, 4, 8, 16, 21, 32, 48 — Browser defaults: 8px body margin, 1em paragraph margins, dense line stacking. Content packs tight like a directory listing; whitespace is incidental, never composed.
- Border radius: none 0px — Radius zero everywhere. Rounded corners are ornament, and ornament is a lie.
- Border treatment: 1px solid #000000 — Or the classic border="1" table look: 1px outset #808080 with visible cell seams. Borders mark structure, never style.

### Shadows

- none: `none` — No element ever casts a shadow; the page has no depth to fake

### Layout

- Max content width: 1024px
- Single left-aligned column in source order; no centering, no max-width niceties beyond preventing absurd line lengths
- Table-based structure where tabular — visible cell borders welcome
- hr elements as section dividers
- Navigation as a plain list of underlined links, or one dense link wall

### Motion

- Easing: linear; durations 0ms / 0ms / 0ms
- No transitions or animations of any kind — state changes are instant, as raw HTML behaves

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-accent: #0000ee;
  --color-link-visited: #551a8b;
  --color-link-active: #ff0000;
  --color-rule: #808080;
  --radius-none: 0px;
  --border-default: 1px solid #000000;
  --font-display: "Times New Roman", Times, Georgia, serif;
  --font-body: "Times New Roman", Times, Georgia, serif;
  --font-mono: "Courier New", Courier, monospace;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.2;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: linear;
  --duration-fast: 0ms;
  --duration-base: 0ms;
  --duration-slow: 0ms;
}
```

All fonts are system fonts — nothing to load.

## Component recipes

- **Nav:** A paragraph or ul of underlined blue links separated by pipes or bullets; no bar, no background, no sticky positioning
- **Hero:** An h1 in default bold Times, a paragraph of black text, and an underlined link. Nothing else
- **Card:** No cards. Content is headings, paragraphs, lists, and bordered tables in source order
- **Button (primary):** A default <button> or <input type=submit> exactly as the browser renders it — system chrome, no custom styling
- **Button (secondary):** A plain underlined text link; secondary actions do not earn button chrome
- **Form fields:** Default browser inputs with visible labels above; fieldset/legend for grouping; zero custom styling

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Default hyperlink blue: underlined #0000ee links (purple #551a8b once visited) sitting in black serif text on bare white — the single strongest signal that nothing here has been 'designed'. Spend boldness here; keep everything else quiet.

## Do

- Use semantic HTML in source order and let the browser's stylesheet be the design
- Keep links blue, underlined, and honestly visited-purple — link state is the UI
- Show structure: visible table borders, hr rules, numbered lists
- Let content density be the aesthetic; a wall of links is a feature

## Don't

- No shadows, radii, gradients, web fonts, or hero images — decoration breaks the contract
- Don't center, grid, or art-direct the layout; source order is the layout
- Don't restyle default buttons and inputs; browser chrome is the point
- Don't confuse this with neubrutalism — no candy colors, no cartoon offset shadows, no sticker borders

## Accessibility notes

- Ironically strong by default: black-on-white is 21:1, link blue #0000ee is ~8.6:1, semantic HTML gives free landmark and keyboard support
- Visited purple #551a8b on white passes AA (~7.9:1); keep underlines so color is never the only link signal
- Default 16px Times at 1.2 leading can strain long-form reading — allow user zoom and avoid disabling text size adjustments

## Reference sites

- Craigslist: https://www.craigslist.org
- Drudge Report: https://drudgereport.com
- Brutalist Websites: https://brutalistwebsites.com
- NPR text-only edition: https://text.npr.org

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip web-brutalism.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/web-brutalism.json

Settings → Capabilities → Skills → Upload skill → web-brutalism.zip