Design specification for Cadora's cost attribution and FinOps surfaces: the color and type tokens, the metric tile, the breakdown row, the token-split bar, the since toggle, the panel's anatomy, its states, and what every metric means.

Cadora · design spec

Cost attribution, by the numbers

Everything needed to rebuild or extend the FinOps surface — the exact tokens, the metric tile, the breakdown row, the token split, the since toggle, and every state they must render. The components below are live HTML; edit them here or lift the specs into Figma.

Palette

Dark instrument surface · blue-to-green for cost · amber reserved

Blue--blue · #3b82f6Cost bar start · active toggle
Green--green · #16c784Cost bar end
Green soft--green-soft · #75f0a8Daily bar top
Amber--amber · #ffd08aAttention only · sparingly
Ink--bg · #0f172aPage ground
Panel--panel · #1e2937Metric tile
Panel 2--panel-2 · #162237Split · daily block
Bar track#0d1526Cost bar ground
Line--line · #334158Borders · row rules
Text--text · #f5f7fbNumbers
Muted--muted · #9aa8bcLabels · tokens/$cost

Cost reads blue → green, never red: spend is information, not an error. Amber stays reserved for the review gate and integrity warnings — it does not appear in a healthy FinOps panel.

Type & metrics

System sans for numbers · monospace for the tokens/$cost voice

RoleFamilySize / weightNotes
Metric numbersystem-ui22–24px / 700The tile's headline value
Metric labelsystem-ui11–12px / 400Muted, above the number
Breakdown labelsystem-ui12–13px / 700Model / executor / funding, ellipsis on overflow
tokens / $costmono11–12pxMuted · 990.8k / $1.9895
Panel / section labelsystem-ui12–15pxFinOps · By model
MetricValueMetricValue
Tile radius8pxTile padding14px
Bar height8pxBar radius999px
Cost-row grid.7fr 1fr autoRow gap8px
Daily height92pxDaily-fill width68%
Cost precision$0.0000Token format1.0k · 1.00M

Anatomy — the metric tiles

Four totals across the top of the home page

1 2
Runs7
Generation Tokens26.0k
Context Tokens990.8k
Cost$1.9895
1Muted label — one word or two, 11–12px, in --muted. Names the metric; never competes with the number.
2Large number — 22–24px, --text, weight 700. Tokens abbreviate (26.0k, 1.00M); cost is always four decimals ($1.9895).

Anatomy — the FinOps panel

The panel every attribution question turns on

1 2
FinOps
all30d7d
3 4
Token split
in 6.4kout 19.6kcache 964.8k
Cost by day
07-14
07-15
07-16
07-17
5
By model
claude-opus-4-7[1m]990.8k / $1.9895
By executor
claude990.8k / $1.9895
By funding
subscription990.8k / $1.9895
1Panel title — FinOps, 15px. The one place the cost surface is named.
2Since toggle — all / 30d / 7d. The active window carries a blue border and blue text; it filters every block below, server-side.
3Token split — in / out / cache, each a bold number with a muted label. The cache number is usually the largest.
4Cost by day — one bar per day in the window, height scaled to the costliest day. A zero-cost day still shows a 4% sliver.
5Breakdown columns — the same spend by model, by executor, by funding. Each column is a stack of cost rows.

The breakdown row

Label · cost bar · tokens / $cost

1 2 3
claude-opus-4-7[1m]990.8k / $1.9895
gpt-5.542.1k / $0.3765
1Label — the group key (model id, executor, or funding). Truncates with an ellipsis; the full value is the row.
2Cost bar — blue→green fill, width proportional to this row's cost against the column max (floored at 3% so a tiny non-zero row is still visible).
3tokens / $cost — monospace, muted: context tokens then dollars to four places. Rows sort by context, heaviest first.

States & variants

Every condition the surface must render

Funding · subscription (default)

By funding
subscription990.8k / $1.9895

Funding · metered (billed API)

By funding
subscription990.8k / $1.9895
metered42.1k / $0.3765

gpt-5.5 · cost estimated from the public rate table

Zero-cost run (fixture / mock)

Runs1
Cost$0.0000

No usage yet

Empty window

Cost by day

No runs in window

Cache-heavy split (typical)

in 6.4kout 19.6kcache 964.8k

Undated run

Cost by day
n/a

What each metric means

The number, and the arithmetic behind it

MetricDefinition
RunsArchived runs inside the active window.
Generation tokensinput + output — the tokens the model read fresh and wrote.
Context tokensinput + output + cache creation + cache read — the full volume moved, so cache stays visible.
CostSummed per-node dollars. Backend-reported when the backend gives dollars (Claude Code); otherwise priced from the public rate table and flagged estimated (Codex).
Token splitThe three classes behind context: in, out, and cache (creation + read combined).
By model / executor / fundingThe same spend grouped three ways. Executor is the backend that ran the node; funding is subscription or metered.
Cost by dayPer-day cost bars across the window, scaled to the costliest day.

The usage CLI

The same aggregation, in the terminal — cadora usage

FlagEffect
--archive-dir <dir>Which runs/ archive to read. Default runs.
--since <when>Window cutoff: an ISO timestamp, Nd (days), or Nh (hours). Same filter as the dashboard toggle.
--jsonEmit the structured summary — every by_model / by_executor / by_funding / by_day group plus per-node rows — for another tool.

Voice

Words are part of the design

DoNot
Attribute — "by executor: codex $0.38""Total spend: $2.36"
Mark the estimate — "estimated from the rate table"Show an estimate as a billed figure
$1.9895 · four decimals, always~$2 · $1.99
990.8k · 1.00M990842 tokens
Tokens and metrics are taken verbatim from cadora/dashboard/static/style.css and cadora/usage.py. Edit the rendered components in place, or hand the palette and metrics tables to a Figma library.