Broken Grid

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(97% 0.006 80)
--fg oklch(10% 0 0)
--muted oklch(48% 0 0)
--surface oklch(100% 0 0)
--surface-2 oklch(95% 0.005 80)
--border oklch(82% 0 0)
--accent oklch(89% 0.22 98)
--accent-fg oklch(10% 0 0)
--focus oklch(72% 0.22 98)

Token	Value
--font-body	`'Space Grotesk', system-ui, sans-serif`
--font-display	`'Space Grotesk', system-ui, sans-serif`
--font-mono	`ui-monospace, monospace`
--radius	`4px`
--radius-sm	`3px`
--shadow	`3px 4px 0 oklch(10% 0 0)`
--shadow-lg	`6px 8px 0 oklch(10% 0 0)`

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
	--bg: oklch(97% 0.006 80);
	--fg: oklch(10% 0 0);
	--muted: oklch(48% 0 0);
	--surface: oklch(100% 0 0);
	--surface-2: oklch(95% 0.005 80);
	--border: oklch(82% 0 0);
	--accent: oklch(89% 0.22 98);
	--accent-fg: oklch(10% 0 0);
	--focus: oklch(72% 0.22 98);
	--font-body: 'Space Grotesk', system-ui, sans-serif;
	--font-display: 'Space Grotesk', system-ui, sans-serif;
	--font-mono: ui-monospace, monospace;
	--radius: 4px;
	--radius-sm: 3px;
	--shadow: 3px 4px 0 oklch(10% 0 0);
	--shadow-lg: 6px 8px 0 oklch(10% 0 0);
}

Where it came from

Origin: Swiss print typography tradition; editorial experimentation on the web

Deliberate off-grid placement has a long history in Swiss typography and editorial design. On the web, CSS Grid's explicit placement control made it practical to position elements precisely, overlap them, and rotate them without hacks. Creative agencies and editorial sites adopted it to escape the "Bootstrap look" — identical left-aligned columns — and signal that the design itself is a craft object.

How to spot it

Elements that cross column boundaries or overlap adjacent items
Deliberate small rotations on cards or images (1–5 degrees)
Asymmetric layouts that refuse consistent outer margins
Negative space used intentionally — the gap is as designed as the content

Trade-offs

Strengths	Weaknesses
High visual energy and sense of dynamic movement	Very hard to maintain as content volume scales or changes
Feels crafted and intentional — resists the generic template look	Tab order and screen-reader order must be checked carefully
Each layout is distinct; nothing repeats in the same way twice	Requires significant responsive redesign at mobile widths

In the wild

Creative agency portfolio index pages
Editorial art direction on long-form features
Art and fashion brand websites

Use it when

Agency portfolios, artist sites, or editorial layouts where the design itself is a signal of creative capability.