Dashboard design system — colors, typography, spacing, components, and visual patterns for the session dashboard UI.
name: uiux
description: Dashboard design system — colors, typography, spacing, components, and visual patterns for the session dashboard UI.
user-invocable: false
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 sectionsspace-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
- Dark-first -- all backgrounds are dark warm gray, text is light
- Subtle borders --
border-gray-800 only, no shadows
- Rounded panels --
rounded-xl for cards, rounded-full for bars/badges
- Opacity for bars -- colored bar segments use
opacity-60
- Compact density -- small text sizes (
text-xs, text-[10px]), tight spacing
- Recharts styling -- dark tooltips (
bg-gray-800), no grid lines, subtle reference lines
- Brand accent -- use
brand-* (terracotta) instead of blue-* for all interactive/accent elements