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.
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.
Live, interactive React component · light themeResponsive
About the 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.
It is part of Neo-Brutal. 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.
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.