xtablo-source/.planning/REQUIREMENTS.md

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

• 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
• DS-02: Button component with primary, secondary, ghost, and danger variants
• DS-03: Input, Textarea, and Select form field components replace inline raw HTML in all templates
• DS-04: Card component is used across tablo list, detail, and content views
• DS-05: Badge component supports semantic tones (primary, warning, success, danger)
• DS-06: Modal component is available for create/edit dialogs
• DS-07: Empty-state component is available for zero-data views
• DS-08: Table component is available for list views (files, events)
• DS-09: Icon-button component replaces inline icon-button patterns across templates

Auth Views

• AUTH-UI-01: Login page matches the JS app's auth-card layout (gradient background, centered card, brand logo, status banner)
• AUTH-UI-02: Signup page matches the same visual treatment as login
• 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

• DETAIL-01: Tablo detail header area matches the project-card-top design
• DETAIL-02: Task kanban board uses the tasks-section design (section header, task rows, add control)
• DETAIL-03: Etapes section is visually consistent with the task section
• 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	Complete
PLAN-UI-01	Phase 17	Complete

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