clienthub/.planning/DESIGN-SYSTEM.md

Design System — Offer Studio UI direction (v2.1)

Definito: 2026-06-13 (via skill ui-ux-pro-max) Scope: Applies to Phase 11 (Catalog DB-view), 12 (Offer composition/DnD), 13 (Servizi Attivi), 14 (CRM Attio-style) — any "database view" table in /admin/*.

Direzione

ClickUp / Pipedrive: dense ma leggibile, flat, zero decorazione. Pattern: Minimalism & Swiss Style + Flat Design — grid-based, alto contrasto, hover/transition rapidi (150-250ms), nessuna ombra/gradiente pesante.

Brand tokens — INVARIATI (da src/app/globals.css)

Non introdurre una nuova palette: ClickUp/Pipedrive è una direzione di LAYOUT/interazione, non di colore. Il brand iamcavalli resta:

Token	Valore	Uso
--color-primary	#1A463C (verde scuro)	azioni primarie, focus ring, link attivi
--color-accent	#DEF168 (lime)	highlight/badge di stato attivo, CTA secondarie
--color-background	#ffffff	sfondo pagina/tabella
--color-muted / --color-bg-subtle	#f9f9f9	righe alternate, header tabella, quick-add row
--color-border	#e5e7eb	bordi cella sottili (1px), MAI ombre pesanti
--color-foreground	#1a1a1a	testo primario
--color-muted-foreground	#71717a	placeholder, metadati, celle vuote
Font	Geist Sans (già configurato)	nessun cambio — coerente con "Minimal Swiss"

Pattern tabella database-view (Phase 11-13)

• Riga: altezza compatta (~40px), padding orizzontale px-3, bordo inferiore border-border 1px — NO bordi verticali tra celle (look ClickUp, non Excel)
• Inline edit: click su cella → diventa <input>/<select> borderless con ring-1 ring-primary on focus → Enter salva, Esc annulla, blur salva. Nessun modal, nessun reload.
• Tag multi-select: Badge (già in components/ui/badge.tsx) con colori derivati da una palette fissa a rotazione (6-8 colori pastello su sfondo, testo scuro per contrasto AA) + pulsante "+" inline per creare un nuovo tag senza uscire dalla riga
• Quick-add row: ultima riga della tabella, sempre visibile, placeholder "+ Aggiungi servizio" — stile identico alle righe dati ma text-muted-foreground, diventa riga normale dopo il primo salvataggio
• Filtri/ricerca: barra sopra la tabella, input singolo con icona search (Lucide), filtro client-side istantaneo su nome/tag — NO bottone "Cerca", NO reload
• Header tabella: sticky, bg-muted, font-weight 600, NO maiuscolo decorativo eccessivo (small-caps ok, ALL-CAPS pesante no)
• Hover riga: bg-muted/50, transizione transition-colors duration-150, cursore pointer solo su celle editabili

Componenti shadcn da riusare/estendere

Già presenti: table, badge, dialog, select, input, button, form. Per Phase 11 servirà probabilmente:

• Un componente EditableCell (input/select inline, non in shadcn — da costruire ad-hoc su input.tsx)
• Un TagMultiSelect (combobox + badge, da costruire su select.tsx/badge.tsx — shadcn command/popover non ancora installati, valutare in planning)

Anti-pattern da evitare

• Ombre pesanti, glassmorphism, gradienti decorativi
• Icone emoji (usare SVG Lucide, coerente col resto dell'app)
• Tabelle senza filtro/ricerca
• Azioni riga-per-riga quando serve bulk (Phase 12+: valutare checkbox + action bar per operazioni multiple)
• Hover che causa layout shift (no scale transform su righe tabella)

Checklist pre-delivery (per ogni componente nuovo)

• Contrasto testo ≥ 4.5:1 (light mode — testo muted minimo #475569/text-muted-foreground attuale è #71717a, verificare su bg-muted)
• cursor-pointer su celle/righe editabili e cliccabili
• Focus ring visibile (ring-1 ring-primary o --color-ring) su input inline e bottoni
• Transizioni 150-250ms, transform/opacity non width/height
• Responsive: tabella in overflow-x-auto wrapper sotto 1024px, niente layout rotto

---

Riferimento per CONTEXT.md (Phase 11) e per eventuale /gsd-ui-phase su fasi 11-14.