Design system v1.3

Un solo verde di marca in due toni + tinta. I semantici SOLO per stati: mai per decorare. Grigio = fermo/non aggiornato.

Un solo font. 400 testo · 500 medio · 600 titoli ed etichette · 700 SOLO il dato/numero forte. Mai 700 sui titoli. Pavimento contenuto 12px. Niente corsivi.

Consolidamento nella propagazione: 13.5→--fs-body(14) o --fs-card-sm(13) secondo il ruolo · 14.5→--fs-body · 15.5→--fs-section(18) se titolo, altrimenti card-title · 10.5→--fs-micro(11) · 11.5→--fs-meta(12). Ruolo, non pixel.

Una sola per pagina, sempre in alto. Placeholder corto (3 voci max). Unico elemento con ombra oltre alla hero.

Indicatori di stato + scorciatoia di scroll: NON filtrano, NON navigano. Attiva solo "Tutto" (bordo scuro). Numeri solo se > 0; rossi se urgenza nella sezione. Per i filtri veri delle liste: C14.

Il componente lista universale: dot stato · titolo + sottoriga grigia · a destra dato forte + stato colorato. Sempre card separate con gap 10, mai righe unite.

Verde ok/margine ok · Arancione attenzione/da confermare · Rosso problema serio/scaduto · Blu appuntamento/informativo · Grigio fermo/chiuso/non aggiornato. Uguali ovunque, mai altri significati. Si usa su miniature (tile) e righe lista; sulle card grandi con foto si usa la pillolina con la causa.

4 per riga in home, fondo tile chiaro (nell'app: foto cantiere), dot stato in alto a sinistra, nome 1 riga + % sotto. Mai riempimenti scuri. Regola: dot sulle miniature (tile), pillolina con la causa sulle card grandi con foto e nel dettaglio lavoro.

Una sola per pagina, per la cosa più importante. Titolo forte, sottotesto corto con "·", cerchio-freccia a destra.

Solo per: margine in rosso, timbratura mancante, mezzo/documento bloccante, handoff urgente Erica. Sopra tutto. Se non c'è nulla: non esiste.

MAIUSCOLO 11px. Canale: ERICA verde, TELEFONATA blu, SITO grigio. Stato: ok/warn/urg. Max 2 per card.

Primario verde cta, ghost per azioni secondarie. FAB: solo "+", fisso in basso a destra sopra la tab bar (bottom: 84px + safe-area), apre le azioni rapide.

18/600 + cerchio-freccia a destra se esiste una lista completa. La freccia apre la sezione, mai un popup.

(a) informativo con CTA · (b) positivo calmo (tinta verde, niente CTA) · (c) grande con bottone per liste vuote. La scelta per ogni sezione è nel file stati-v1.

Header: saluto+data a sinistra, campanella (pallino solo se non-lette) + avatar a destra. Tab bar: 5 voci (Home, Calendario, Chiama, Erica, Azienda); il pulsante centrale Chiama è rialzato (telefonata al volo → sheet). Attiva verde; sulla tab Erica/Azienda pallino rosso se ci sono urgenze o code. Il contenuto pagina ha SEMPRE padding-bottom per non finire sotto la tab bar.

P1 · Card lista grande (tab Lavori): foto orizzontale 3:2 (non quadrata) con angoli arrotondati · overlay: stato in alto a sinistra, eventuale azione in alto a destra · sotto, 4-5 righe MAX in quest'ordine: titolo → tipo · luogo → stato → dato forte per ULTIMO in grassetto (per noi: consegna/scadenza o importo, non il prezzo).

P2 · Pannello filtri (liste Richieste/Lavori): sheet con header fisso (titolo + X) e footer fisso: a sinistra "Cancella tutto", a destra il bottone primario con conteggio live ("Mostra 12 lavori") che è anche l'applicazione. Corpo scorrevole a gruppi; controlli ammessi: checkbox, slider range, accordion, "mostra di più". Niente chip dentro i filtri.

P3 · Dettaglio (lavoro/richiesta): identità in testa (foto + titolo + metadati con "·"), barra azione primaria sempre visibile ancorata (l'azione cambia con lo stato: "Fissa sopralluogo" / "Prepara fattura"…) · sezioni sotto in ordine fisso, ognuna con anteprima + "Mostra tutto" · il dettaglio di un singolo elemento (variante, materiale, pacchetto) si apre in sheet/modale, non in pagina nuova · desktop: colonna identità sticky + colonna sezioni scrollabile; mobile: stack.

P4 · Overlay su foto: massimo 2 elementi (uno per angolo alto). Badge testuali a pillola bianca, indicatori a dot.

P5 · Galleria foto (dettaglio lavoro): vista dedicata a schermo intero, griglia scrollabile verticale (righe alternate: 2 foto affiancate / 1 grande), barra fissa in alto con indietro + azioni. MAI carosello a slide. Una foto può diventare cover; allegati separati dalle foto.

P6 · Modali "scopri di più": dettaglio prezzo/fattura (righe voce/importo + Totale in grassetto), condizioni, dettaglio variante/materiale/documento → modale o sheet con titolo + X, righe leggibili, CTA solo se serve. Mai pagina nuova per un singolo elemento.

P7 · Anatomia empty state (definitiva): segnale visivo + titolo breve + microcopy che spiega COSA manca e COME rimediare (il gesto esatto) + CTA di recupero — il tutto DENTRO il contenitore normale: la struttura della pagina non collassa mai. Stati "quantità zero": il contatore resta come indicatore. Indisponibilità dentro un pannello: badge sull'asset + causa + CTA, senza svuotare la pagina. Anche errore/404: messaggio umano + vie d'uscita.

P8 · Ordine dettaglio lavoro (12 sezioni): cover+stato → titolo cliente/lavoro → riepilogo rapido → AZIONE PRIMARIA → oggi/cantiere vivo → timeline → foto e documenti → squadra/mezzi → materiali/costi → extra/varianti → area cliente → margine (solo titolare, in fondo).

Principio madre: DATO → INSIGHT → CAUSA → AZIONE. Un grafico esiste solo se porta a una decisione. L'AI prepara, Fabri controlla, Fabri approva — MAI invio automatico, in MVP e per sempre.

C15 · Insight Card (pattern madre): chi parla (firma "Erica ha preparato" SOLO se è lavoro suo; mai la parola "Agent") · cosa è successo · perché conta (1-2 numeri o cause) · cosa fare (1 azione primaria + eventuale "Non ora"). In Home max 3, dentro Priorità — nessun feed nuovo.

C16 · Drill-down: tap sulla card → report completo; tap su numero/punto critico → popover ancorato LÌ (base C14) con mini-grafico + causa in UNA frase + "vedi dettaglio".

C17 · Due strade: max 2 opzioni, ognuna con titolo + effetto stimato + rischio + CTA (Applica / Promemoria / Ignora), una marcata "Consigliata". Mai applicazione automatica.

C18 · Checklist con progresso: fatte in verde, da fare numerate, CTA sul primo mancante. Per: chiusura lavoro, preventivo, sopralluogo, commercialista, setup, trasloco.

C19 · Success sobrio: check verde + una riga + CTA se serve. Niente coriandoli, niente toni USA.

Regole grafici G1-G6: G1 Home: ZERO grafici. G2 i grafici economici vivono in Azienda → Soldi → Analisi. G3 dettaglio lavoro: sezione "Margine e rischi" con cause elencate (solo titolare). G4 contestuali: Calendario carico settimana · Richieste funnel · Commercialista checklist · Documenti coda. G5 MVP = SOLO 5 grafici: liquidità 30gg, da incassare, margine lavori attivi, carico settimana, funnel richieste. G6 benchmark SOLO interni (vs preventivo/obiettivo/suoi lavori/mese scorso); confronti con altre aziende mai senza dati veri.

1 · REGOLA VISIVA: Foto = lavori veri già esistenti (tile lavori con cover pulita, dettaglio lavoro, gallery). 3D = categorie e oggetti da scegliere (tipo lavoro, inventario trasloco) e fallback tile senza foto. Stroke = azioni e navigazione (tab, cerca, campanella, +, modifica, invia). Foto brutta/scura/confusa → si usa il fallback 3D.
2 · Ombre: pill e hero usano --sh-card; tutte le card/righe/sezioni usano --sh-soft; le chip un'ombra leggera. Nessun rettangolo resta piatto. Il bordo 1px resta sotto l'ombra.
3 · Mai numeri di margine espliciti dove passa il cantiere: solo lo stato (dot sulle miniature, pillolina sulle card grandi).
4 · Ogni lista in home: massimo 3-5 elementi + freccia alla lista completa.
5 · Nessuna sezione vuota: sparisce, oppure card leggera, oppure CTA (vedi stati-v1).
6 · Ogni card che chiede un'azione la suggerisce esplicitamente ("Richiama →").
7 · Testi: titolo max 1 riga con ellipsis; sottotesto con "·" come separatore.
8 · Un solo dato forte per card, a destra, 700.
9 · Tap sempre sull'intera card, mai solo sul testo.
10 · Contenuto con padding-bottom var(--pad-bottom) quando c'è la tab bar.