name: Codex Token Count Design System
description: VS Code-native token and cost dashboard for local Codex session logs.
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-cached: "#b083e0"
token-output: "#57c98a"
token-reasoning: "#e0a458"
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)" }
rateGrid: { columns: "1fr 1fr", gap: 14px }
meter: { height: 12px, radius: 5px }
linechart: { lineStroke: "{colors.token-input}", strokeWidth: 2 }Overview
Codex Token Count is a VS Code extension dashboard for local Codex session logs. It should feel native to VS Code while making token categories, official API-rate equivalents, status-bar metrics, and scan state legible.
The visual source is media/dashboard.css. The extension host in src/extension.ts controls webview lifecycle, status-bar text, scan state, and the current time window.
Colors
The main UI uses VS Code theme variables. Explicit colors are only for token categories: input blue, cached purple, output green, and reasoning amber. This mirrors the pricing categories in the extension data model.
Warnings use amber tint and border. Links use VS Code text link variables. Cost cells use chart green fallback.
Typography
Keep text at VS Code's configured font size. Section headers are uppercase 13px labels. Metric values are 26px with tabular numerics. Tables are compact and optimized for scanning many model rows.
Layout
The toolbar is sticky and wraps. Cards use auto-fit columns with a 150px minimum. Split panels and rate grids collapse to one column on narrow webview widths.
Line charts, bar charts, meters, and tables should fit comfortably in a side panel as well as a full editor tab.
Elevation & Depth
No shadows. Use the editor background, widget background, panel border, hover backgrounds, and active segment fill to separate regions.
Shapes
Use 8px for cards and segmented controls, 6px for buttons and warning boxes, 5px for stack bars and meters, and 3px for small dots.
Components
Cards summarize total tokens, windowed tokens, and cost equivalents. Stack bars and legends break down token categories. Rate grids compare usage rates. Tables show model rows, subrows, totals, and numeric columns.
Do's and Don'ts
Do inherit VS Code colors for base UI.
Do keep input, cached, output, and reasoning colors stable across charts and legends.
Do make billing disclaimers visible near cost equivalents.
Don't use browser-page spacing or marketing cards inside the webview.
Don't hide scan or stale-state feedback.