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 (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.
Live, interactive React component · dark themeResponsive
About the 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. The delta has screen-reader text ("up 12.4%"). Set a currency symbol a step smaller and raised, as below.
It is part of Noir Aurora. The style’s 91 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.
Soft Bento Metric
A KPI: label, value (tabular-nums, never wraps), a delta pill whose colour says good or bad news, and a hint.
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.