Monospace UI

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(98% 0.002 250)
--fg oklch(12% 0.01 250)
--muted oklch(52% 0.02 250)
--surface oklch(100% 0 0)
--surface-2 oklch(96% 0.003 250)
--border oklch(86% 0.005 250)
--accent oklch(50% 0.14 250)
--accent-fg oklch(98% 0 0)
--focus oklch(50% 0.14 250)

Token	Value
--font-body	`'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace`
--font-display	`'JetBrains Mono', 'Fira Code', ui-monospace, monospace`
--font-mono	`'JetBrains Mono', ui-monospace, monospace`
--radius	`0px`
--radius-sm	`0px`
--shadow	`0 0 0 1px oklch(86% 0.005 250)`
--shadow-lg	`0 8px 24px oklch(12% 0.01 250 / 0.12)`

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

:root {
	--bg: oklch(98% 0.002 250);
	--fg: oklch(12% 0.01 250);
	--muted: oklch(52% 0.02 250);
	--surface: oklch(100% 0 0);
	--surface-2: oklch(96% 0.003 250);
	--border: oklch(86% 0.005 250);
	--accent: oklch(50% 0.14 250);
	--accent-fg: oklch(98% 0 0);
	--focus: oklch(50% 0.14 250);
	--font-body: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
	--font-display: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
	--font-mono: 'JetBrains Mono', ui-monospace, monospace;
	--radius: 0px;
	--radius-sm: 0px;
	--shadow: 0 0 0 1px oklch(86% 0.005 250);
	--shadow-lg: 0 8px 24px oklch(12% 0.01 250 / 0.12);
}

Where it came from

Origin: Teletype machines, early computer terminals, Unix culture

Monospace began as a hardware constraint: teleprinters and cathode-ray terminals had fixed character cells. When proportional fonts took over GUIs, monospace became associated with terminals and text editors. Developer tools used it as a signal of technical competence, and designers started applying it to full UIs to communicate precision and a no-marketing-spin philosophy.

How to spot it

Single monospaced typeface throughout — headings and body
Tabular figures for all numbers, naturally aligned in columns
Spare palettes — often dark or cold grey
Grid-aligned layouts with no decorative type mixing

Trade-offs

Strengths	Weaknesses
Unambiguous: every character the same width, numbers align perfectly	Lower reading speed for prose than proportional fonts
Strong technical identity that reads as credible	Can feel impersonal for consumer-facing products
Readable in low-light and dense-data contexts	Very long lines become harder to scan

In the wild

Developer tools and CLIs with branded UIs
Finance dashboards and data terminals
Personal sites of engineers and hackers

Use it when

Data accuracy and technical credibility are the message — code editors, finance tools, data terminals.