# Design Brief: Interactive Project Dashboard Component

## Metadata
- **Initiative ID**: #2
- **Date**: 2026-04-06
- **Requested by**: Claude Code (pilot validation)
- **Target surfaces**: Next.js app

## Problem Statement
Validate the shared UI component system and token pipeline through an interactive component that demonstrates client-side state management, component composition, and token-driven styling.

## Requested Outcome
A project dashboard component that shows project status, filters by category, and demonstrates the multi-project design system working for rich interactive surfaces. Should feel like a real operational tool.

## Constraints
- **Technical**: Next.js 15 + React 19, TypeScript strict
- **Brand**: aiChemist dark palette (same tokens as CMS surface)
- **Accessibility**: Keyboard navigation, focus management, screen reader labels
- **Performance**: Static build must succeed, zero runtime errors

## Existing Components to Reuse
- Button (primary/secondary, sm/md/lg from packages/ui)
- Card (content container from packages/ui)
- Tabs (interactive tab navigation from packages/ui)

## Token Palette Reference
- Source: packages/tokens/src/tokens.json
- Status colors: success green, warning amber, error red (from token palette)
- All spacing, radius, shadow from tokens

## Breakpoints
- Mobile: 375px
- Tablet: 768px
- Desktop: 1280px

## Variants Requested
- **Variant A**: Tab-based dashboard — Tabs for project categories, Card grid within each tab, filter/sort controls
- **Variant B**: Sidebar filter — Left sidebar with filters, main content area with project cards, stats header

## Success Criteria
- Component renders with mock project data
- Filter/tab interactions work client-side
- All 3 shared UI components used (Button, Card, Tabs)
- Zero hardcoded colors or spacing
- Next.js static build succeeds

## Related Issues
- #2: feat: pilot interactive component — end-to-end lifecycle