Metro

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(16% 0 0)
--fg oklch(97% 0 0)
--muted oklch(60% 0 0)
--surface oklch(22% 0 0)
--surface-2 oklch(27% 0 0)
--border oklch(32% 0 0)
--accent oklch(46% 0.22 262)
--accent-fg oklch(98% 0 0)
--focus oklch(68% 0.18 262)

Token	Value
--font-body	`'Raleway', system-ui, sans-serif`
--font-display	`'Raleway', system-ui, sans-serif`
--font-mono	`ui-monospace, monospace`
--radius	`0px`
--radius-sm	`0px`
--shadow	`none`
--shadow-lg	`none`

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;700&display=swap');

:root {
	--bg: oklch(16% 0 0);
	--fg: oklch(97% 0 0);
	--muted: oklch(60% 0 0);
	--surface: oklch(22% 0 0);
	--surface-2: oklch(27% 0 0);
	--border: oklch(32% 0 0);
	--accent: oklch(46% 0.22 262);
	--accent-fg: oklch(98% 0 0);
	--focus: oklch(68% 0.18 262);
	--font-body: 'Raleway', system-ui, sans-serif;
	--font-display: 'Raleway', system-ui, sans-serif;
	--font-mono: ui-monospace, monospace;
	--radius: 0px;
	--radius-sm: 0px;
	--shadow: none;
	--shadow-lg: none;
}

Where it came from

Origin: Microsoft Windows Phone 7, Windows 8

Metro — officially named "Microsoft Design Language" — was introduced in Windows Phone 7 (2010) and carried into Windows 8 and Xbox 360. It was a radical departure from the skeuomorphic era: no bevels, no gradients, no icons that tried to look real. Content was king: panoramic scrolling, large typography, and flat coloured tiles. It was critically praised but commercially unsuccessful, and Windows 10 walked most of it back.

How to spot it

Flat coloured tiles as primary navigation
Light-weight Segoe typography at very large sizes
Panoramic horizontal scrolling navigation
Minimal chrome — content takes the full surface

Trade-offs

Strengths	Weaknesses
Content-first philosophy is genuinely elegant	Discoverability is poor without icons and labels
Very clear visual hierarchy with type alone	Panoramic scroll is unfamiliar to most users today
Unique and distinctive — nothing looks like it	Strongly associated with a failed Microsoft era

In the wild

Windows Phone 7 and 8 home screen
Windows 8 Start screen
Xbox 360 and Xbox One dashboard

Use it when

Bold information dashboards, data-rich TV/kiosk UIs, or any project celebrating Microsoft design history.