Stat tiles and hero figures

A number gets a stat tile, one hero per view, and a same-ramp meter.

From dataviz (references/marks-and-anatomy.md, palette.md).

Stat tile builder

Pick Error rate, or untick Up is good.

Ad hocBad

tone = sign(delta)
Stat tile contractGood

tone = (delta > 0) === upIsGood
const tone = delta === 0 ? "neutral" : (delta > 0) === upIsGood ? "good" : "bad";
Intl.NumberFormat("en-US", { notation: "compact" }).format(4200000); // 4.2M

One proportional sans hero

Switch the hero to tabular and watch the 1s.

Support overviewGood

Open tickets

Opened per week

  1. Week 351,118
  2. Week 36971
  3. Week 371,040
  4. Week 38811

First reply

4.1h

Resolved

1,118

Satisfaction

94%

.hero { font: 600 64px var(--sans); font-variant-numeric: normal; }
td.num { font-variant-numeric: tabular-nums; }

Meter on a same-ramp track

Drag Used past 70% and 90%.

Gray trackBad
Storage used
track: var(--gray-200)
Same-ramp trackGood
Storage used
track: color-mix(in oklab, var(--fill) 24%, var(--surface))
.meter-track { background: color-mix(in oklab, var(--fill) 24%, var(--surface)); }

Why it matters, pros and cons

Why it matters

The number is the chart. A fixed contract lets a row of tiles be scanned, not read.

Pros

  • Costs and error rates stop going green
  • Compact values fit a 360px tile
  • One hero sets the reading order

Cons

  • Compacting drops precision; put exact values in tooltips
  • Up is good is per metric; defaults mislead
  • Live-ticking numbers jitter unless tabular