name: Claude Usage Cost Design System
description: VS Code-native cost dashboard for local Claude transcript usage and billing-equivalent estimates.
colors:
vscode-foreground: "var(--vscode-foreground)"
vscode-editor-background: "var(--vscode-editor-background)"
vscode-panel-border: "var(--vscode-panel-border, rgba(128,128,128,0.25))"
vscode-widget-background: "var(--vscode-editorWidget-background, rgba(128,128,128,0.08))"
token-input: "#4aa3ff"
token-output: "#57c98a"
token-cache-write: "#e0a458"
token-cache-read: "#b083e0"
warning-bg: "rgba(224,164,88,0.12)"
warning-line: "rgba(224,164,88,0.4)"
typography:
body: { fontFamily: "var(--vscode-font-family)", fontSize: "var(--vscode-font-size, 13px)", fontWeight: 400, lineHeight: 1.4, letterSpacing: 0 }
section: { fontFamily: "var(--vscode-font-family)", fontSize: 13px, fontWeight: 600, lineHeight: 1.2, letterSpacing: 0.06em }
metric-value: { fontFamily: "var(--vscode-font-family)", fontSize: 26px, fontWeight: 650, lineHeight: 1.1, letterSpacing: 0 }
table: { fontFamily: "var(--vscode-font-family)", fontSize: 12.5px, fontWeight: 400, lineHeight: 1.4, letterSpacing: 0 }
spacing:
gap: 14px
toolbar-y: 12px
card-y: 14px
card-x: 16px
table-y: 7px
table-x: 10px
rounded:
sm: 3px
button: 6px
md: 8px
components:
toolbar: { stickyTop: 0, gap: 10px, padding: "12px 0", borderBottom: "1px solid {colors.vscode-panel-border}" }
segment: { radius: 8px, buttonPadding: "5px 12px" }
cardGrid: { minColumn: 150px, gap: 14px }
card: { padding: "14px 16px", radius: 8px, border: "1px solid var(--vscode-panel-border)" }
stackbar: { height: 16px, radius: 5px }
linechart: { lineStroke: "{colors.token-input}", strokeWidth: 2 }
capGauge: { height: 20px, radius: 6px }Overview
Claude Usage Cost is a VS Code extension dashboard, so it should inherit the active editor theme rather than invent a standalone web palette. The dashboard visualizes local transcript usage, cost estimates, cache categories, model breakdowns, history, and soft-cap reference lines.
The visual source is media/dashboard.css. The extension host provides data through src/extension.ts, while parser and pricing modules drive the numbers. This document covers only the webview UI.
Colors
Core surfaces use VS Code theme variables: foreground, editor background, panel border, widget background, button colors, chart colors, and list hover backgrounds. The explicit token-category colors distinguish input, output, cache write, and cache read.
Warnings use a muted amber fill and border. The primary cost metric inherits the VS Code chart green fallback.
Typography
Use VS Code's configured font family and font size. Section headings are small uppercase labels with 0.06em letter spacing. Metric values use 26px, semibold, tabular numeric styling.
Tables are compact at 12.5px, with right-aligned numbers and left-aligned model names.
Layout
The toolbar is sticky and wraps. Segment controls handle time windows. Cards use an auto-fit grid with 150px minimum columns. Split panels collapse to one column under narrow widths.
Tables support sticky headers below the toolbar. Charts use compact inline SVG or bar layouts sized for the webview panel, not a browser page.
Elevation & Depth
Do not add shadows. VS Code webviews should read as in-editor panels. Use widget background, border, hover states, and opacity.
Shapes
Use 8px for cards and segmented controls, 6px for buttons and gauges, 5px for stack bars, and 3px for dots or inline code backgrounds.
Components
Cards show label, value, and subtext. Stack bars show category composition. Legends align label, value, and percentage. Cap gauges show overflow and reference lines. Tables show model rows, total rows, cost cells, and numeric token cells.
Do's and Don'ts
Do inherit VS Code theme variables wherever possible.
Do preserve color consistency for input, output, cache write, and cache read.
Do keep cost estimates visibly scoped as estimates.
Don't use hardcoded editor backgrounds outside fallbacks.
Don't make wide charts that assume a full browser viewport.