# Requirements: Xtablo v3.0 Design System & Visual Polish

**Defined:** 2026-05-16
**Core Value:** A user can sign in and run the Tablos workflow — organize work, attach files, discuss, and plan scheduled events — without a JS framework or managed chat provider.

## v3.0 Requirements

Requirements for milestone v3.0. Each maps to exactly one roadmap phase.

### Design System

- [x] **DS-01**: CSS design tokens (colors, spacing, typography, shadows, gradients) are defined in `backend/internal/web/ui/base.css` matching the go-backend token vocabulary
- [x] **DS-02**: Button component with primary, secondary, ghost, and danger variants
- [x] **DS-03**: Input, Textarea, and Select form field components replace inline raw HTML in all templates
- [x] **DS-04**: Card component is used across tablo list, detail, and content views
- [x] **DS-05**: Badge component supports semantic tones (primary, warning, success, danger)
- [x] **DS-06**: Modal component is available for create/edit dialogs
- [x] **DS-07**: Empty-state component is available for zero-data views
- [x] **DS-08**: Table component is available for list views (files, events)
- [x] **DS-09**: Icon-button component replaces inline icon-button patterns across templates

### Auth Views

- [x] **AUTH-UI-01**: Login page matches the JS app's auth-card layout (gradient background, centered card, brand logo, status banner)
- [x] **AUTH-UI-02**: Signup page matches the same visual treatment as login
- [x] **AUTH-UI-03**: Google sign-in button uses the Material Design button style

### Dashboard & Tablos

- [ ] **DASH-01**: Sidebar uses the go-backend sidebar design (brand section, nav items with icons, tablo list, user/account footer)
- [ ] **DASH-02**: Tablo list uses project-card layout with color accents, creation date, and action controls
- [ ] **DASH-03**: Dashboard empty state uses the empty-state component

### Tablo Detail

- [x] **DETAIL-01**: Tablo detail header area matches the project-card-top design
- [x] **DETAIL-02**: Task kanban board uses the tasks-section design (section header, task rows, add control)
- [x] **DETAIL-03**: Etapes section is visually consistent with the task section
- [x] **DETAIL-04**: Files section uses the table component

### Chat & Planning

- [ ] **CHAT-UI-01**: Discussion view uses consistent card/surface design with message bubbles distinguishing own vs. others
- [ ] **PLAN-UI-01**: Planning page uses the overview-section layout for event aggregation

## Future Requirements

### Responsive / Mobile

- **RESP-01**: Sidebar collapses on small screens (hamburger or bottom-nav pattern)
- **RESP-02**: Kanban board scrolls horizontally on mobile
- **RESP-03**: Auth pages adapt gracefully to narrow viewports

### Dark Mode

- **DARK-01**: All CSS tokens have dark-mode counterparts via `prefers-color-scheme` or a class toggle

## Out of Scope

| Feature | Reason |
|---------|--------|
| New pages or features | v3.0 is purely visual — no new routes or data models |
| Billing / Stripe | Deferred from v1.0, still out of scope |
| Client portal / Admin | Deferred from v1.0, still out of scope |
| Mobile app | Out of scope for this rewrite milestone |
| Dark mode | Future requirement — tokens will be structured to enable it, not implement it |

## Traceability

| Requirement | Phase | Status |
|-------------|-------|--------|
| DS-01 | Phase 13 | Complete |
| DS-02 | Phase 13 | Complete |
| DS-03 | Phase 13 | Complete |
| DS-04 | Phase 13 | Complete |
| DS-05 | Phase 13 | Complete |
| DS-06 | Phase 13 | Complete |
| DS-07 | Phase 13 | Complete |
| DS-08 | Phase 13 | Complete |
| DS-09 | Phase 13 | Complete |
| AUTH-UI-01 | Phase 14 | Complete |
| AUTH-UI-02 | Phase 14 | Complete |
| AUTH-UI-03 | Phase 14 | Complete |
| DASH-01 | Phase 15 | Pending |
| DASH-02 | Phase 15 | Pending |
| DASH-03 | Phase 15 | Pending |
| DETAIL-01 | Phase 16 | Complete |
| DETAIL-02 | Phase 16 | Complete |
| DETAIL-03 | Phase 16 | Complete |
| DETAIL-04 | Phase 16 | Complete |
| CHAT-UI-01 | Phase 17 | Pending |
| PLAN-UI-01 | Phase 17 | Pending |

**Coverage:**
- v3.0 requirements: 21 total
- Mapped to phases: 21
- Unmapped: 0 ✓

---
*Requirements defined: 2026-05-16*
*Last updated: 2026-05-16 after initial definition*