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
1---2name: uiux-33description: Dashboard design system — colors, typography, spacing, components, and visual patterns for the session dashboard UI.4---5
6# Dashboard Design System
7
8## Theme
9
10Dark theme dashboard with warm gray tones and terracotta brand accent, optimized for developer tooling and data visualization.
11
12## Tailwind Theme
13
14Uses Tailwind CSS v4 with CSS-first config (`@import 'tailwindcss'` in `app.css`).
15
16Custom `@theme` block overrides default cool grays with warm grays and adds a `brand-*` terracotta accent scale.
17
18### Colors
19
20#### Warm Gray Scale (overrides Tailwind defaults)
21
22| Token | Hex | Usage |
23|-------|-----|-------|
24| `gray-950` | `#141413` | Body/page background |
25| `gray-900` | `#1c1c1a` | Card/panel background (with `/50` opacity) |
26| `gray-800` | `#2a2926` | Borders, dividers |
27| `gray-700` | `#3d3b36` | Subtle fills, inactive bars |
28| `gray-600` | `#565349` | Disabled states |
29| `gray-500` | `#7a7668` | Muted text, timestamps, labels |
30| `gray-400` | `#a39e90` | Secondary text, descriptions |
31| `gray-300` | `#cdc8b8` | Headings, panel titles |
32| `gray-100` | `#eae6dc` | Primary text |
33| `white` | | Emphasis text, hero numbers |
34
35#### Brand Accent (terracotta)
36
37| Token | Hex | Usage |
38|-------|-----|-------|
39| `brand-300` | `#f0b8a0` | Light accent text |
40| `brand-400` | `#e09070` | Links, input tokens, active elements |
41| `brand-500` | `#d97757` | Primary accent, tab indicators, logo highlight |
42| `brand-600` | `#c4643f` | Buttons, toggles |
43| `brand-700` | `#a8512e` | Dark accent |
44
45#### Semantic Colors (unchanged)
46
47| Token | Usage |
48|-------|-------|
49| `emerald-400` | Success / output tokens |
50| `amber-400` / `amber-500` | Warning / cache tokens |
51| `purple-400` / `purple-500` | Cache creation, system overhead |
52| `red-400` | Error messages, limits |
53
54### Data Visualization Colors
55
56| Category | Color |
57|----------|-------|
58| Primary / Messages | `brand-500` (`#d97757`) |
59| Input tokens | `brand-400` (`#e09070`) |
60| Output tokens | `emerald-400` |
61| Cache read | `amber-400` |
62| Cache creation | `purple-400` |
63| System overhead | `purple-500` |
64| Free space | `gray-700` |
65
66#### Chart COLORS Array
67
68```ts
69const COLORS = ['#d97757', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#b07cc5']
70```
71
72#### Heatmap Intensity Scale
73
74```ts
75const INTENSITY_COLORS = ['#2a2926', '#3d2a1e', '#a8512eb3', '#d97757cc', '#e09070']
76```
77
78#### Tooltip Styling
79
80```ts
81{ backgroundColor: '#1c1c1a', border: '1px solid #3d3b36' }
82```
83
84#### Grid/Tick Colors
85
86- Grid stroke: `#2a2926`
87- Tick fill: `#7a7668`
88
89## Component Patterns
90
91| Component | Classes |
92|-----------|---------|
93| Panel/Card | `rounded-xl border border-gray-800 bg-gray-900/50 p-4` |
94| Panel title | `text-sm font-semibold text-gray-300` |
95| Hero number | `text-2xl font-bold text-white` |
96| Subtitle | `text-[10px] text-gray-500` |
97| Label | `text-xs text-gray-400` |
98| Mono value | `text-xs font-mono text-gray-300` |
99| Badge | `rounded bg-gray-800 px-1.5 py-0.5 text-[10px] font-mono text-gray-400` |
100| Bar track | `h-2 rounded-full bg-gray-800 overflow-hidden` |
101| Link | `text-sm text-brand-400 hover:underline` |
102| Muted link | `text-xs text-gray-500 hover:text-gray-300` |
103| Active button | `bg-brand-600 text-white hover:bg-brand-500` |
104| Focus ring | `focus:border-brand-500 focus:ring-brand-500` |
105| Active tab | `border-brand-500 text-white` |
106| Toggle on | `bg-brand-600` |
107
108## Layout
109
110- 2-column grid at `md:` breakpoint for stat panels
111- Full-width panels for timeline, agents, tasks
112- Consistent `gap-4` between grid items
113- `mt-6` between major page sections
114- `space-y-2` for list items within panels
115
116## Header & Navigation
117
118- Logo: `<span className="text-brand-500">Claude</span> Dashboard`
119- Nav icons: inline SVG icons (16x16) instead of ASCII characters
120- Footer: GitHub + npm icon links with `text-gray-500 hover:text-gray-300`
121
122## Favicon
123
124- SVG terminal prompt icon at `public/favicon.svg`
125- Uses brand color `#d97757`
126- Meta theme-color: `#141413` (matches `gray-950`)
127
128## Typography
129
130- Font: system monospace for values, default sans for labels
131- Never use font weights heavier than `font-bold`
132- Use `font-mono` for numeric values, IDs, model names
133- Token counts formatted with K/M suffixes (e.g., `29.5K`, `8.3M`)
134
135## Visual Rules
136
1371. **Dark-first** -- all backgrounds are dark warm gray, text is light
1382. **Subtle borders** -- `border-gray-800` only, no shadows
1393. **Rounded panels** -- `rounded-xl` for cards, `rounded-full` for bars/badges
1404. **Opacity for bars** -- colored bar segments use `opacity-60`
1415. **Compact density** -- small text sizes (`text-xs`, `text-[10px]`), tight spacing
1426. **Recharts styling** -- dark tooltips (`bg-gray-800`), no grid lines, subtle reference lines
1437. **Brand accent** -- use `brand-*` (terracotta) instead of `blue-*` for all interactive/accent elements
majiayu000