Layout-driven · 2010s–present
Data Dense
Maximum information per viewport: tight spacing, small but legible type, multiple simultaneous panels, and no pixel left unused.
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(7% 0 0) - --fg
oklch(88% 0.01 85) - --muted
oklch(55% 0.01 80) - --surface
oklch(11% 0 0) - --surface-2
oklch(15% 0 0) - --border
oklch(22% 0 0) - --accent
oklch(72% 0.18 73) - --accent-fg
oklch(7% 0 0) - --focus
oklch(72% 0.18 73)
| Token | Value |
|---|---|
| --font-body | 'JetBrains Mono', ui-monospace, 'Courier New', monospace |
| --font-display | 'JetBrains Mono', ui-monospace, monospace |
| --font-mono | 'JetBrains Mono', ui-monospace, monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | none |
| --shadow-lg | 0 0 0 1px oklch(22% 0 0) |
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
:root {
--bg: oklch(7% 0 0);
--fg: oklch(88% 0.01 85);
--muted: oklch(55% 0.01 80);
--surface: oklch(11% 0 0);
--surface-2: oklch(15% 0 0);
--border: oklch(22% 0 0);
--accent: oklch(72% 0.18 73);
--accent-fg: oklch(7% 0 0);
--focus: oklch(72% 0.18 73);
--font-body: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
--font-display: 'JetBrains Mono', ui-monospace, monospace;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: none;
--shadow-lg: 0 0 0 1px oklch(22% 0 0);
}Where it came from
Origin: Bloomberg Terminal; financial data displays; developer and DevOps tooling
The Bloomberg Terminal — displaying hundreds of data points on a single screen — is the archetype of data-dense design. Traders, developers, and engineers depend on UIs where every action and data point is visible without navigating. The web version appears in monitoring dashboards, analytics tools, IDEs, and financial platforms: environments where context-switching is the real cost and density is a feature.
How to spot it
- Compact spacing: 4–8px padding, tight line-height (1.2–1.35)
- Small type (11–13px) in a high-contrast readable weight
- Multiple columns or panels visible simultaneously without scrolling
- Tabular data, inline sparklines, and status indicators over full-scale charts
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Expert users see everything without navigating — maximum context at once | Overwhelming for new users — no progressive disclosure |
| Extremely efficient for power users who live in the tool | Small text sizes fail WCAG AA contrast at low font weights |
| Reduces the context-switch cost that is the real productivity killer | Requires deep domain expertise to design well — each panel needs justification |
In the wild
- Bloomberg Terminal
- Grafana monitoring dashboards
- Advanced trading platform and DevOps tooling
Use it when
Expert-facing tools — monitoring, analytics, trading, DevOps — where the user needs maximum simultaneous context.