Material & depth · 2010s–present
Teenage Engineering
Dense monospaced labels, one strong accent on near-black or cream, and the sense that every element is exactly where function demands it — a spec sheet turned beautiful.
Live preview base style — press Wear
$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(96% 0.014 88) - --fg
oklch(12% 0.01 60) - --muted
oklch(46% 0.02 80) - --surface
oklch(98% 0.008 88) - --surface-2
oklch(93% 0.016 88) - --border
oklch(80% 0.02 84) - --accent
oklch(82% 0.2 86) - --accent-fg
oklch(12% 0.01 70) - --focus
oklch(82% 0.2 86)
| Token | Value |
|---|---|
| --font-body | 'IBM Plex Mono', ui-monospace, 'Courier New', monospace |
| --font-display | 'IBM Plex Mono', ui-monospace, monospace |
| --font-mono | 'IBM Plex Mono', ui-monospace, monospace |
| --radius | 3px |
| --radius-sm | 2px |
| --shadow | 0 1px 0 oklch(70% 0.02 84 / 0.5), 0 2px 4px oklch(12% 0.01 60 / 0.08) |
| --shadow-lg | 0 8px 24px oklch(12% 0.01 60 / 0.14) |
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
:root {
--bg: oklch(96% 0.014 88);
--fg: oklch(12% 0.01 60);
--muted: oklch(46% 0.02 80);
--surface: oklch(98% 0.008 88);
--surface-2: oklch(93% 0.016 88);
--border: oklch(80% 0.02 84);
--accent: oklch(82% 0.2 86);
--accent-fg: oklch(12% 0.01 70);
--focus: oklch(82% 0.2 86);
--font-body: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
--font-display: 'IBM Plex Mono', ui-monospace, monospace;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
--radius: 3px;
--radius-sm: 2px;
--shadow: 0 1px 0 oklch(70% 0.02 84 / 0.5), 0 2px 4px oklch(12% 0.01 60 / 0.08);
--shadow-lg: 0 8px 24px oklch(12% 0.01 60 / 0.14);
}Where it came from
Origin: Teenage Engineering, Stockholm (product design studio, founded 2005)
Teenage Engineering's visual language — readable anywhere on the OP-1, OP-Z, and Pocket Operators — became an aesthetic reference for tool-making studios and hardware-adjacent software. The look is spare: near-black or cream ground, one signal-colour accent, monospaced or ultra-condensed type for labelling, and a strict grid that places nothing arbitrarily. It communicates intention through discipline.
How to spot it
- Monospaced or ultra-condensed type throughout — even for body copy
- Strict two-colour palette: near-black or cream plus one strong accent
- High information density with consistent machine-like labelling
- Grid precision — components align as if on circuit board silk-screen
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Instantly communicates craft and intention | Hard to pull off without reading as a Teenage Engineering pastiche |
| Extremely distinctive — rarely mistakable for another style | Limited emotional register — cold to non-technical audiences |
| Works at both micro (screen labels) and macro (landing page) scale | Monospaced type at small sizes needs careful kerning and line-height |
In the wild
- OP-1 and OP-Z hardware interface graphics
- Pocket Operator screen layouts
- Hardware-adjacent developer tool sites borrowing the TE vocabulary
Use it when
Technical products targeting precision-oriented users who read density as honesty rather than overload.