Web Brutalism

Live preview base style — press Wear

This month

$2,100

Revenue, up 12% from last month.

Customer	Plan	Status	MRR
Northwind	Studio	Active	$1,240
Acme Labs	Team	Trial	$0
Kaldi Coffee	Studio	Active	$860

Use this style 16 tokens

--bg oklch(100% 0 0)
--fg oklch(6% 0 0)
--muted oklch(38% 0 0)
--surface oklch(97% 0 0)
--surface-2 oklch(91% 0 0)
--border oklch(8% 0 0)
--accent oklch(38% 0.32 265)
--accent-fg oklch(100% 0 0)
--focus oklch(38% 0.32 265)

Token	Value
--font-body	`'Times New Roman', Times, Georgia, serif`
--font-display	`'Courier New', Courier, monospace`
--font-mono	`'Courier New', Courier, monospace`
--radius	`0px`
--radius-sm	`0px`
--shadow	`none`
--shadow-lg	`none`

:root {
	--bg: oklch(100% 0 0);
	--fg: oklch(6% 0 0);
	--muted: oklch(38% 0 0);
	--surface: oklch(97% 0 0);
	--surface-2: oklch(91% 0 0);
	--border: oklch(8% 0 0);
	--accent: oklch(38% 0.32 265);
	--accent-fg: oklch(100% 0 0);
	--focus: oklch(38% 0.32 265);
	--font-body: 'Times New Roman', Times, Georgia, serif;
	--font-display: 'Courier New', Courier, monospace;
	--font-mono: 'Courier New', Courier, monospace;
	--radius: 0px;
	--radius-sm: 0px;
	--shadow: none;
	--shadow-lg: none;
}

Where it came from

Origin: Independent web and art scenes — Yale School of Art website is an early landmark

Web Brutalism borrows its name from architectural Brutalism (exposed concrete, structural honesty) and applies the ethos to the web: refuse to hide the structure, refuse cosmetic polish, let the medium show. The Yale School of Art website — a wiki its students and faculty can edit, raw by design — is an early reference. The style gained traction in the mid-2010s as a reaction against the uniformity of Bootstrap-and-flat-design SaaS.

How to spot it

System fonts and browser-default styles embraced, not overridden
No border-radius; harsh rectangular edges everywhere
Monospace type for body text or headings
Visible structure — grid lines, borders, tables as decoration

Trade-offs

Strengths	Weaknesses
Extremely fast — almost nothing to load	Hostile to users who expect polish
Forces the content to carry the page	Easy to make something that is just bad, not purposefully raw
Memorable and distinctive in a sea of identical SaaS	Navigation affordances can be genuinely unclear

In the wild

Yale School of Art website
Bloomberg Businessweek interactive stories
Various art and literary magazine sites

Use it when

Art, editorial, cultural or portfolio contexts where honesty and rawness matter more than comfort.