Admin Panel

# Admin Panel DESIGN.md

## Product feel

Build a dense admin console for operators who manage records, users, and system state all day.
Prioritize scannability, keyboard speed, and information density over marketing polish. Support
dark-first operations and a first-class light theme with the same layout, state, and semantic roles.

## Color system

### Brand
- Blue: #3b82f6 — primary actions, active nav, selected rows
- Indigo: #6366f1 — secondary emphasis, focus accents
- Violet: #8b5cf6 — chart/data highlight only

### Surfaces (dark)
- Canvas: #0f0f0f — dark app background
- Surface: #1a1a1a — dark panels, tables, cards
- Surface Raised: #2a2a2a — dark hover rows, menus, inputs
- Border: #333333 — dark separators and outlines

### Text
- Text Primary: #fafafa — dark headings, values, body
- Text Secondary: #a1a1a1 — dark labels, metadata
- Text Muted: #737373 — dark captions, disabled, placeholders

### Semantic
- Success: #22c55e — healthy, active, completed on dark surfaces
- Warning: #f59e0b — degraded, pending review on dark surfaces
- Danger: #ef4444 — errors, destructive, offline on dark surfaces
- Info: #3b82f6 — informational, links on dark surfaces

## Light mode

- Blue: #2563eb — primary actions, active nav, selected rows
- Indigo: #6366f1 — secondary emphasis, focus accents
- Violet: #8b5cf6 — chart/data highlight only
- Canvas: #f7f7f8 — app background
- Surface: #ffffff — panels, tables, cards
- Surface Raised: #f0f1f3 — hover rows, menus, inputs
- Border: #d9dce3 — separators and outlines
- Text Primary: #171717 — headings, values, body