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: label, value (tabular-nums, never wraps), a delta pill whose colour says good or bad news, and a hint.
Live, interactive React component · light themeResponsive
About the Soft Bento Metric
A KPI: label, value (tabular-nums, never wraps), a delta pill whose colour says good or bad news, and a hint. The delta has screen-reader text ("up 12.4%").
It is part of Soft Bento. 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.
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.