LiveDesign Lab

Typography & density

Preview

A real type scale, mono+caps reserved for labels, and a density toggle. The shipping UI uses a lot of 8–10px text — this experiment proposes a calmer, more readable baseline.

Display density
Affects only the “Proposed” previews on this page.

1. Type scale

Three sizes do almost everything: xs for metadata, sm for body, base for titles. Mono + uppercase + wide tracking is reserved for labels (DEFCON, section headers) — never for content.

Page title
text-xl · semibold · sans
Global Intelligence Network
Card title
text-base · medium · sans · leading-snug
Cease-fire negotiations resume in Geneva after weekend escalation
Body / description
text-sm · sans · leading-relaxed
Diplomats from twelve nations gathered for a fourth round of talks aimed at de-escalating regional tensions.
Metadata
text-xs · sans · muted
BBC · 12 minutes ago · 4 outlets
Section label
text-[11px] · mono · uppercase · accent — labels only
INTELLIGENCE FILTERS

2. Header — before vs after

Now

COMMAND CENTER

GLOBAL INTELLIGENCE NETWORK
Proposed

Command Center

Global Intelligence Network

3. Sidebar section header — before vs after

Now
Event Type

Beacons match category color. Nearby stories cluster (badge = count). Click opens a panel with every story in that cluster.

Conflict12
Political12
Economic12
Proposed
Event type

Color-coded beacons on the globe. Nearby stories cluster automatically.

Conflict12
Political12
Economic12

4. News card — before vs after

Now
political4 outlets·BBC
Cease-fire negotiations resume in Geneva after weekend escalation
12m ago
Proposed
4 outletsPolitical

Cease-fire negotiations resume in Geneva after weekend escalation

BBC12 minutes ago

The card hierarchy gets its own dedicated experiment at /lab/feed — this comparison only swaps typography.

5. The rule, plainly

  • Mono + UPPERCASE is for labels (one or two words). Never for content.
  • No text below 11px. Anything smaller is a readability tax with no information return.
  • One title weight. Titles use medium or semibold, not bold — the dark background already does the heavy lifting.
  • Density is a toggle, not a default. Power users keep Compact; new users start Comfortable.
These pages are isolated experiments — nothing here is wired into the shipping dashboard until you adopt it.All experiments →