Phase 2.1 -- Design Tokens & Core Components

Parent: #762

Context

Implement the finalized design system from the UX guidelines document as Tailwind config + React components. These are the atomic building blocks every page uses.

Scope

Design Tokens

• CSS custom properties for all color, typography, spacing tokens
• Tailwind theme configuration extending tokens
• Dark theme (primary and only theme for v0.5.0)

Core Components (each with Storybook story)

• StatusBadge -- status color encoding with optional pulse animation
• MetricCard -- value + label + sparkline + delta/change indicator + optional progress bar
• Sparkline -- pure SVG sparkline with gradient fill and animated draw (port from prototype)
• SectionCard -- titled card with header bar and content slot
• AgentCard -- consistent agent display: avatar (initials), name, role, status dot, current task. Identical everywhere it appears.
• DeptHealthBar -- department name + animated fill bar + health % + agent/task counts
• ProgressGauge -- circular or linear gauge for budget/utilization
• StatPill -- compact label + value pair for inline stats
• Avatar -- circular avatar with initials, department-colored border

Deliverables

• Tailwind config with all design tokens
• CSS custom properties file
• All core components implemented with TypeScript props
• Storybook stories for each component (all states: default, hover, loading, error, empty)
• Unit tests for component logic (conditional rendering, computed values)
• Visual regression baselines via Storybook screenshots

Blocked by

• docs: write UX design guidelines document #767 (UX design guidelines -- need finalized tokens)
• feat: app shell, Storybook, and CI/CD pipeline #770 (app shell + Storybook -- need Storybook running)