Design base v1

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.

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.

5 per riga in home, fondo tile chiaro (nell'app: foto cantiere), semaforo in alto a sinistra, nome 1 riga + % sotto. Mai riempimenti scuri.

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.

17/700 + 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 semaforo.
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.