Dashboard Design System

Theme

Dark theme dashboard with warm gray tones and terracotta brand accent, optimized for developer tooling and data visualization.

Tailwind Theme

Uses Tailwind CSS v4 with CSS-first config (@import 'tailwindcss' in app.css).

Custom @theme block overrides default cool grays with warm grays and adds a brand-* terracotta accent scale.

Colors

Warm Gray Scale (overrides Tailwind defaults)

Token	Hex	Usage
gray-950	#141413	Body/page background
gray-900	#1c1c1a	Card/panel background (with /50 opacity)
gray-800	#2a2926	Borders, dividers
gray-700	#3d3b36	Subtle fills, inactive bars
gray-600	#565349	Disabled states
gray-500	#7a7668	Muted text, timestamps, labels
gray-400	#a39e90	Secondary text, descriptions
gray-300	#cdc8b8	Headings, panel titles
gray-100	#eae6dc	Primary text
white		Emphasis text, hero numbers

Brand Accent (terracotta)

Token	Hex	Usage
brand-300	#f0b8a0	Light accent text
brand-400	#e09070	Links, input tokens, active elements
brand-500	#d97757	Primary accent, tab indicators, logo highlight
brand-600	#c4643f	Buttons, toggles
brand-700	#a8512e	Dark accent

Semantic Colors (unchanged)

Token	Usage
emerald-400	Success / output tokens
amber-400 / amber-500	Warning / cache tokens
purple-400 / purple-500	Cache creation, system overhead
red-400	Error messages, limits

Data Visualization Colors

Category	Color
Primary / Messages	brand-500 (#d97757)
Input tokens	brand-400 (#e09070)
Output tokens	emerald-400
Cache read	amber-400
Cache creation	purple-400
System overhead	purple-500
Free space	gray-700

Chart COLORS Array

const COLORS = ['#d97757', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#b07cc5']

Heatmap Intensity Scale

const INTENSITY_COLORS = ['#2a2926', '#3d2a1e', '#a8512eb3', '#d97757cc', '#e09070']

Tooltip Styling

{ backgroundColor: '#1c1c1a', border: '1px solid #3d3b36' }

Grid/Tick Colors

• Grid stroke: #2a2926
• Tick fill: #7a7668

Component Patterns

Component	Classes
Panel/Card	rounded-xl border border-gray-800 bg-gray-900/50 p-4
Panel title	text-sm font-semibold text-gray-300
Hero number	text-2xl font-bold text-white
Subtitle	text-[10px] text-gray-500
Label	text-xs text-gray-400
Mono value	text-xs font-mono text-gray-300
Badge	rounded bg-gray-800 px-1.5 py-0.5 text-[10px] font-mono text-gray-400
Bar track	h-2 rounded-full bg-gray-800 overflow-hidden
Link	text-sm text-brand-400 hover:underline
Muted link	text-xs text-gray-500 hover:text-gray-300
Active button	bg-brand-600 text-white hover:bg-brand-500
Focus ring	focus:border-brand-500 focus:ring-brand-500
Active tab	border-brand-500 text-white
Toggle on	bg-brand-600

Layout

• 2-column grid at md: breakpoint for stat panels
• Full-width panels for timeline, agents, tasks
• Consistent gap-4 between grid items
• mt-6 between major page sections
• space-y-2 for list items within panels

Header & Navigation

• Logo: <span className="text-brand-500">Claude</span> Dashboard
• Nav icons: inline SVG icons (16x16) instead of ASCII characters
• Footer: GitHub + npm icon links with text-gray-500 hover:text-gray-300

Favicon

• SVG terminal prompt icon at public/favicon.svg
• Uses brand color #d97757
• Meta theme-color: #141413 (matches gray-950)

Typography

• Font: system monospace for values, default sans for labels
• Never use font weights heavier than font-bold
• Use font-mono for numeric values, IDs, model names
• Token counts formatted with K/M suffixes (e.g., 29.5K, 8.3M)

Visual Rules

1. Dark-first -- all backgrounds are dark warm gray, text is light
2. Subtle borders -- border-gray-800 only, no shadows
3. Rounded panels -- rounded-xl for cards, rounded-full for bars/badges
4. Opacity for bars -- colored bar segments use opacity-60
5. Compact density -- small text sizes (text-xs, text-[10px]), tight spacing
6. Recharts styling -- dark tooltips (bg-gray-800), no grid lines, subtle reference lines
7. Brand accent -- use brand-* (terracotta) instead of blue-* for all interactive/accent elements