Philosophy
Brutalism on the web takes its cue from béton brut — raw concrete — not from rudeness. The point is honesty of material: you show the HTML for what it is. Default-looking links stay blue and underlined. System stacks or loud grotesques sit next to each other without apology. Borders are visible, spacing is structural rather than decorative, and nothing hides behind rounded corners or soft shadows.
A good brutalist site feels engineered, not unfinished. The difference between brutalism and laziness is intention: every exposed edge is placed, every clash is deliberate.
Typography
Type carries the entire design. Go extremely large or unapologetically plain:
- Display: Archivo Black, Anton, or Bricolage Grotesque at 800–900 weight. Set headlines at clamp(3rem, 10vw, 9rem) with line-height 0.95 and letter-spacing -0.03em.
- Body / labels: a monospace — IBM Plex Mono, Space Mono, or Fragment Mono — used for nav, meta, captions, even paragraphs at small scale.
- Mixing one screaming sans with one dry mono is the canonical pairing. Add an italic serif only as a single deliberate glitch.
Color
Either near-monochrome (black on off-white) or clashing primaries. The accent should feel like industrial paint — safety orange, signal red, cobalt. In OKLCH terms pick accents at chroma ≥ 0.19 so they vibrate against neutral grounds. Never gradient, never soft-pastel.
Surfaces & backgrounds
Flat fills only. Texture comes from structure: visible grids, ruled lines, table borders, repeating-linear-gradient hazard stripes, oversized index numbers. If you need depth, use hard offset shadows (box-shadow: 6px 6px 0 #000) — never blurs.
Layout grammar
- Expose the grid: hairline borders around every block, or none at all — no middle ground.
- Asymmetry and overlap are welcome; centered symmetry reads corporate.
- Marquees, rotated labels, sticky side rails and full-bleed type are idiomatic.
- Whitespace is allowed but should feel like empty concrete, not luxury air.
Motion
Minimal and mechanical: instant hover inversions (background flips to accent), no easing curves longer than 120ms, optional blinking cursors or scrolling tickers. Anything springy or bouncy breaks the register.
Reference theme
[data-theme="brutal"] {
color-scheme: light;
--color-base-100: oklch(0.97 0.005 95);
--color-base-200: oklch(0.92 0.008 95);
--color-base-content: oklch(0.15 0.01 95);
--color-primary: oklch(0.62 0.23 32);
--color-primary-content: oklch(0.98 0.01 95);
--color-neutral: oklch(0.2 0.01 95);
--color-neutral-content: oklch(0.97 0.005 95);
--radius-box: 0rem;
--radius-field: 0rem;
--radius-selector: 0rem;
--border: 2px;
--depth: 0;
}
Pair it with font-family: "Archivo Black" on headings and "IBM Plex Mono" everywhere else.
Pitfalls
- Don't skip hierarchy just because styling is raw — brutalist pages still need clear reading order.
- Don't use low-contrast gray-on-gray; brutalism is usually high contrast.
- Don't fake it with one wobbly border. Commit: expose structure everywhere or nowhere.