Swiss Punk

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.5% 0 0)
--fg oklch(5% 0 0)
--muted oklch(42% 0 0)
--surface oklch(97.5% 0 0)
--surface-2 oklch(92% 0 0)
--border oklch(5% 0 0)
--accent oklch(52% 0.24 25)
--accent-fg oklch(97.5% 0 0)
--focus oklch(52% 0.24 25)

Token	Value
--font-body	`'Archivo', Helvetica, Arial, sans-serif`
--font-display	`'Archivo', Helvetica, Arial, sans-serif`
--font-mono	`'Archivo', 'Courier New', monospace`
--radius	`0px`
--radius-sm	`0px`
--shadow	`none`
--shadow-lg	`none`

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,700;0,900;1,400;1,900&display=swap');

:root {
	--bg: oklch(97.5% 0 0);
	--fg: oklch(5% 0 0);
	--muted: oklch(42% 0 0);
	--surface: oklch(97.5% 0 0);
	--surface-2: oklch(92% 0 0);
	--border: oklch(5% 0 0);
	--accent: oklch(52% 0.24 25);
	--accent-fg: oklch(97.5% 0 0);
	--focus: oklch(52% 0.24 25);
	--font-body: 'Archivo', Helvetica, Arial, sans-serif;
	--font-display: 'Archivo', Helvetica, Arial, sans-serif;
	--font-mono: 'Archivo', 'Courier New', monospace;
	--radius: 0px;
	--radius-sm: 0px;
	--shadow: none;
	--shadow-lg: none;
}

Where it came from

Origin: Wolfgang Weingart at the Basel School of Design; punk graphics, UK 1976

Wolfgang Weingart at the Basel School of Design began breaking Swiss conventions in the early 1970s — spacing letters dramatically, mixing weights unexpectedly, layering type over type. His students spread the approach internationally. Punk's DIY zine aesthetic arrived from a different direction and overlapped: both rejected polish for energy. The collision produced some of the most influential graphic design of the late twentieth century.

How to spot it

Grid-based skeleton with deliberate rule violations
Extreme tracking — very tight or dramatically loose
Heavy rule lines and geometric bars used as compositional elements
Unexpected scale contrast: tiny type next to giant type

Trade-offs

Strengths	Weaknesses
High visual energy; nothing is neutral	Difficult to maintain across a large component library
Grid foundation keeps it legible despite the apparent chaos	Aggressive personality excludes careful audiences
Authentically references a real and important design history	Requires strong typographic judgment not to become visual noise

In the wild

Music festival and cultural event posters
Art school publications and exhibition catalogues
Independent magazine and record-label identities

Use it when

The brand needs energy, edge, and discomfort — and the audience is design-literate enough to read through the chaos.