Neo-Brutal Metric
A KPI: a mono label, a narrow 800 figure (tabular-nums, never wraps), a square delta pill (volt for good news, tomato for bad, paper-2 for flat) with screen-reader text ("up 12.4%"), and a hint.
Metric
A KPI: mono caps label, a tabular value (never wraps), a change tag (lime when the news is good, red when it is bad) and a mono hint.
Live, interactive React component · light themeResponsive
About the Swiss Tech Mono Metric
A KPI: mono caps label, a tabular value (never wraps), a change tag (lime when the news is good, red when it is bad) and a mono hint. The delta has screen-reader text ("up 12.4%").
It is part of Swiss Tech Mono. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
Noir Aurora Metric
A KPI: label, value (type-display tabular-nums, never wraps), a mono delta pill (▲ / ▼) whose colour says good or bad news, and a hint, always stacked so a row of metrics shares baselines.
Soft Bento Metric
A KPI: label, value (tabular-nums, never wraps), a delta pill whose colour says good or bad news, and a hint.