simone
03898f2a59
- Archive v2.0 phases (07-10) under .planning/milestones/ - v2.1 REQUIREMENTS/ROADMAP (Phases 11-17: Offer Studio + Proposal AI) - DESIGN-SYSTEM.md (database-view UI contract for Phases 11-14) - Phase 11 CONTEXT, DISCUSSION-LOG, PATTERNS Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
59 lines
4.0 KiB
Markdown
59 lines
4.0 KiB
Markdown
# 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.*
|