Frontend Atlas

Web brutalism

Also called: Brutalist web design

Raw HTML shown honestly – zero radius, zero shadow anywhere, default link blue, and a hover that inverts with no transition.

Lineage: Named by Pascal Deville (brutalistwebsites.com, 2014) – "truth to materials", borrowed from the architecture.

Web brutalism

Raw HTML shown honestly – zero radius, zero shadow anywhere, default link blue, and a hover that inverts with no transition.

Read the entry

Seen in: Bloomberg's design and graphics team · Craigslist

Project settings

Weekly digest
Advanced options
bg-page
bg-raised
text-primary
text-secondary
accent-solid
on-accent
radius · shadow
Aathe type voice

A working sample – the controls are live (hover, press, focus, the toggle's two states) and everything inside the frame is painted by the token block shown in the recipe below. Nothing saves anything; "Advanced options" jumps to the recipe. The page around the frame stays in Atlas's own system.

Spot it

  • System or monospace fonts (ui-monospace, SF Mono, Courier New) – genuinely browser-default typography, not a designed choice.
    A stark page as raw material: black monospace-feel text blocks on white, hard 1px rules, underlined default-blue links, no decoration.
    Generated with Gemini from this entry's own prompt vocabulary – the copyable brief doing its job.
  • Zero border-radius anywhere.
  • Zero box-shadow anywhere – the property that most concretely separates it from neubrutalism.
  • Solid 1-2px black borders on interactive elements; pure black-on-white (#ffffff background, #000000 ink).
    • ground#ffffff
    • ink#000000
    • the default link blue#0000ee
  • Links in browser-default blue (#0000ee), underlined – using the actual unstyled link colour is itself the signal.
  • Hover states are a hard colour inversion (ink background, white text) with no transition or easing – instant, jarring, deliberately un-smooth.
  • Generous heading letter-spacing, uppercase, bold; visible focus outlines (3px solid, 2px offset) rather than subtle focus states.

Show the web page as what it actually is – text, links, borders – with nothing pretending otherwise. Web brutalism takes its name and philosophy from the architecture: raw, unclad concrete, “truth to materials”. Deville’s own framing is the core of it – a reaction “by a younger generation to the lightness, optimism, and frivolity” of template-driven, click-and-drag web design. On the catalogue index, hovering this style’s card inverts it instantly – no transition, because easing would be a lie. (The stage card here is pinned, per its caption.)

This is also the entry where not loading a custom font is the authentic move – the card renders in your browser’s own monospace stack, because browser-default typography is the entire point. Deville distinguished three micro-styles within his own curation, worth knowing the category isn’t monolithic: purists (closest to raw markup), UX minimalists, and artists (using the constraint expressively).

Where it came from

Coined by Pascal Deville, founder of brutalistwebsites.com (2014). The 2026 adoption data shows a genuine but bounded revival: a peak of 3.6% of 208,000-plus generations in March 2026, declining to 2.37% by June. (Single-source figures from one generation log; the shape of the curve is more trustworthy than the decimals.)

When it fits

A portfolio, an artist’s site, or any brand explicitly signalling “we reject templated SaaS sameness” – where the rawness is the message, not an accident.

When it’s wrong

Any product where usability, not statement-making, is the job. The purist micro-style in particular sacrifices conventional patterns by design – dropdown menus are often simply absent – which is defensible for a portfolio and indefensible for a checkout flow.

Don’t confuse it with

Neubrutalism – the derivative that added what brutalism refuses: candy colour, playful shapes and the signature hard offset shadow. The test is one property: any box-shadow at all means it isn’t web brutalism. In a brief, “zero box-shadow anywhere” is the phrase that most reliably stops an agent drifting to neubrutalism when you asked for the raw thing.

The recipe

The actual scope from style-scopes.css – the CSS that painted the stage above.

/* ===== style: web-brutalism ===== */
/* Truth to materials: browser-default typography, zero radius, zero
   shadow anywhere, default link blue, instant hover inversion. */
[data-style='web-brutalism'] {
  --bg-page: #ffffff;
  --bg-raised: #ffffff;
  /* Pure black-on-white per the tell: the secondary action and unchecked
     switch ride this token; the hover inversion uses its own literal.
     (Review v1.1 B1 - bg-active-as-black made Cancel 1.00:1.) */
  --bg-active: #ffffff;
  --border-default: #000000;
  --border-hover: #000000;
  --border-input: #000000;
  --text-primary: #000000;
  --text-secondary: #000000;
  --accent-solid: #0000ee;
  --accent-solid-hover: #0000bb;
  --accent-text: #0000ee;
  --on-accent: #ffffff;
  --radius-s: 0px;
  --radius-m: 0px;
  --radius-l: 0px;
  --shadow-1: none;
  --shadow-2: none;
  --font-sans: ui-monospace, 'SF Mono', 'Courier New', monospace;
}
.sty-card[data-style='web-brutalism'],
[data-style='web-brutalism'] .sty-btn,
[data-style='web-brutalism'] .sty-btn-2,
[data-style='web-brutalism'] .sty-toggle,
[data-style='web-brutalism'] .sty-knob {
  transition: none;
}
[data-style='web-brutalism'] .sty-name {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
[data-style='web-brutalism'] .sty-link {
  text-decoration: underline;
}
.sty-card[data-style='web-brutalism']:hover {
  background: #000000;
  border-color: #000000;
  box-shadow: none;
}
.sty-card[data-style='web-brutalism']:hover .sty-name,
.sty-card[data-style='web-brutalism']:hover .sty-body,
.sty-card[data-style='web-brutalism']:hover .sty-meta {
  color: #ffffff;
}
/* Vignette: the raw materials themselves – bordered boxes and one
   default-blue underlined "link" bar. Nothing else is the point. */
[data-style='web-brutalism'] .sty-art > i {
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 0;
  opacity: 1;
}
[data-style='web-brutalism'] .sty-art .sty-art-a {
  background: #000000;
}
[data-style='web-brutalism'] .sty-art .sty-art-b {
  border: none;
  height: 3px;
  background: #0000ee;
  box-shadow: 0 3px 0 #ffffff, 0 4px 0 #0000ee;
}
/* ===== end web-brutalism ===== */

Prompt vocabulary

Meant to be copied, not paraphrased – anchors beat adjectives when briefing an agent.

  • brutalist web design
  • raw unstyled HTML aesthetic
  • monospace or system font only
  • zero border-radius
  • zero box-shadow anywhere
  • pure black-on-white
  • default browser blue underlined links
  • hard instant hover inversion with no transition
  • visible 3px focus outline

Exemplars

Named links out – the vignettes above are reconstructions, never screenshots (ADR #006).

  • Bloomberg's design and graphics team – genuinely brutalist editorial pages, at points
  • Craigslist – the accidental exemplar – unstyled by necessity, visually indistinguishable from the intentional version
  • brutalistwebsites.com – the canonical curated gallery