--- name: SteUP description: Strumento da campo per ispezioni nei punti vendita — solido, chiaro, offline-first. colors: primary: "#ec4c41" secondary: "#002339" tertiary: "#dff2ff" ink: "#000000" paper: "#ffffff" surface-dark: "#000406" success: "#26b050" error: "#e50000" focus-ring: "#258cfb" typography: page-title: fontFamily: "Nunito, sans-serif" fontSize: "1.5rem" fontWeight: 800 lineHeight: 1.2 letterSpacing: "normal" title: fontFamily: "Nunito, sans-serif" fontSize: "1.1rem" fontWeight: 700 lineHeight: 1.4 letterSpacing: "normal" body: fontFamily: "Nunito, sans-serif" fontSize: "0.875rem" fontWeight: 400 lineHeight: 1.8 letterSpacing: "normal" label: fontFamily: "Nunito, sans-serif" fontSize: "0.875rem" fontWeight: 700 lineHeight: 1.4 letterSpacing: "normal" rounded: input: "9px" panel: "1em" container: "20px" skeleton: "0.5em" spacing: page-x: "1rem" header-h: "4rem" touch-min: "44px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.paper}" rounded: "{rounded.container}" typography: "{typography.label}" padding: "0.5rem 1.25rem" button-primary-active: backgroundColor: "{colors.primary}" textColor: "{colors.paper}" rounded: "{rounded.container}" input-card: backgroundColor: "#f5f5f5" textColor: "{colors.ink}" rounded: "{rounded.input}" padding: "0.5rem 1rem" panel: backgroundColor: "{colors.paper}" textColor: "{colors.ink}" rounded: "{rounded.panel}" padding: "1rem" --- # Design System: SteUP ## 1. Overview **Creative North Star: "Il taccuino da campo"** SteUP è lo strumento che il rilevatore tiene in mano mentre gira i punti vendita: deve funzionare come carta e inchiostro — sempre, anche senza rete, leggibile in pieno sole, comprensibile con un'occhiata. La chiarezza viene prima di qualsiasi ornamento. L'interfaccia poggia su MudBlazor con un'unica famiglia tipografica (Nunito) e una palette essenziale: un solo accento caldo per l'azione, un blu profondo come base stabile, superfici bianche e pulite con angoli generosamente arrotondati. Il sistema è **tattile e sicuro**: bersagli ampi pensati per il pollice, una sola mano e i guanti; feedback fisico immediato a ogni tocco e a ogni scansione (effetto ripple, cambi di stato evidenti). Lo stato — salvato in locale, in attesa di sync, inviato al server, completato — non è mai ambiguo: è la funzione più importante che la UI comunica. Questo sistema rifiuta esplicitamente due cose. Non è un **gestionale datato e denso**: niente tabelle fittissime, testo minuscolo, grigio ovunque, densità che non serve al lavoro da campo. E non è un'**app consumer social/giocosa**: niente colore ludico, niente decorazione fine a sé stessa. È uno strumento professionale. **Key Characteristics:** - Offline-first: lo stato di salvataggio e sincronizzazione è sempre esplicito - Mobile-first, uso a una mano/guanti: tocchi ≥44px, azioni a portata di pollice - Alto contrasto e testo generoso per la leggibilità all'aperto - Un solo accento (Arancio-Rosso Allerta), usato per azione e stato, mai per decorazione - Un'unica famiglia tipografica, angoli arrotondati coerenti (9px → 20px → 1em) ## 2. Colors Una palette essenziale: un accento caldo che chiama l'azione, un blu profondo come ancora, il resto neutro e pulito. ### Primary - **Arancio-Rosso Allerta** (#ec4c41): il colore dell'azione e dello stato attivo. Pulsanti primari, FAB, selezione corrente, icone d'azione, indicatori di stato che richiedono attenzione. Riservato: la sua presenza segnala "qui si agisce". ### Secondary - **Blu Profondo** (#002339): base stabile e di struttura. Testo forte, intestazioni, elementi strutturali, superfici scure in dark mode. È l'ancora visiva contro cui l'accento risalta. ### Tertiary - **Azzurro Tenue** (#dff2ff): tocco freddo e leggero per evidenziazioni informative e superfici secondarie, dove serve distinguere senza gridare. ### Neutral - **Inchiostro** (#000000): corpo del testo su fondo chiaro; massimo contrasto per la lettura al sole. - **Carta** (#ffffff): superficie di contenuto primaria (pannelli, card, dialog). - **Superficie Scura** (#000406): sfondo della dark mode (attualmente predisposta ma disattivata). - **Grigio Campo** (~#f5f5f5): fondo delle input-card e delle superfici tonali secondarie; distingue per tono, non per bordo. ### Semantic - **Verde OK** (#26b050): validazione positiva, esito riuscito. - **Rosso Errore** (#e50000): validazione fallita, messaggi d'errore, connessione/servizio KO. - **Blu Focus** (#258cfb): anello di focus per la navigazione da tastiera. ### Named Rules **La Regola dell'Unico Accento.** L'Arancio-Rosso Allerta è l'unico accento del sistema e appare solo su azione o stato attivo, mai come decorazione. La sua rarità è ciò che lo rende un segnale. **La Regola del Contrasto da Sole.** Il testo di corpo è inchiostro (#000) su carta (#fff). Il grigio chiaro "per eleganza" è vietato sul testo leggibile: si progetta per lo schermo colpito dal sole, non per lo screenshot. ## 3. Typography **Display / Body / Label Font:** Nunito (variable 200–1000, con fallback `sans-serif`). Caricata da Google Fonts; usata su tutta l'interfaccia. **Character:** un'unica famiglia sans humanist e morbida per tutto — titoli, etichette, pulsanti, corpo, dati. Gli angoli tondeggianti di Nunito si accordano con i raggi ampi dei componenti e rafforzano il tono solido ma accessibile del "taccuino da campo". Nessun accostamento display/body: la gerarchia si fa con peso e dimensione. ### Hierarchy - **Page Title** (peso 800, ~1.5rem/x-large, line-height stretta): titolo di schermata; ancora l'utente al compito corrente. - **Title** (peso 700, ~1.1rem): intestazioni di sezione, titoli di dialog e message-box. - **Body** (peso 400, 0.875rem/14px, line-height 1.8): testo corrente e dati. Per la prosa mantenere 65–75ch; dati e UI compatta possono essere più densi. - **Label** (peso 700, 0.875rem): etichette dei pulsanti e dei controlli di form. Il grassetto dà presenza al tocco senza ricorrere al maiuscolo. ### Named Rules **La Regola del Peso, non del Maiuscolo.** L'enfasi si ottiene con il peso (700/800) e la dimensione, non con il maiuscolo spaziato. Niente eyebrow maiuscoli tracciati sopra le sezioni. ## 4. Elevation Sistema prevalentemente **piatto con ombre funzionali leggere**. La profondità è tonale (Carta su Grigio Campo) più un'ombra morbida e diffusa dove un elemento deve staccarsi davvero (card in rilievo, overlay). MudBlazor fornisce la scala di elevazione; sopra di essa il progetto definisce due ombre custom soffuse. Le superfici a riposo sono piatte; l'ombra è una risposta al ruolo (galleggiamento, overlay), non decorazione. ### Shadow Vocabulary - **Ombra Custom** (`box-shadow: 1px 2px 5px hsl(from var(--mud-palette-overlay-dark) h s 40%)`): stacco morbido per card ed elementi che devono galleggiare sul contenuto. - **Ombra Eccezione** (`box-shadow: 1px 2px 5px rgba(0,0,0,0.3)`): rilievo leggermente più marcato per box di errore/eccezione. ### Named Rules **La Regola del Piatto-di-Default.** Le superfici sono piatte a riposo. L'ombra compare solo quando un elemento deve galleggiare (overlay, dialog, card sollevata) o rispondere a uno stato. Se sembra un'app del 2014, l'ombra è troppo scura e troppo stretta. ## 5. Components Componenti **tattili e sicuri**: bersagli generosi e arrotondati, feedback fisico, presenza netta, pensati per il pollice in campo. ### Buttons - **Shape:** angoli molto arrotondati (raggio 20px sul contenitore `container-button`; i pulsanti MudBlazor ereditano `--mud-default-borderradius: 20px`). - **Primary:** fondo Arancio-Rosso Allerta (#ec4c41), testo Carta (#fff), etichetta in peso 700; padding compatto verticale ma area di tocco ampia. - **Hover / Focus / Active:** effetto **ripple** al tocco (chiaro su fondo scuro, scuro su fondo chiaro); focus da tastiera con doppio anello (bianco + Blu Focus #258cfb). Nei contenitori `ripple-container` il ripple nativo Mud è disattivato in favore di quello custom. - **Settings buttons:** riga con icona in "pill" arrotondata (raggio 6px) tinta per ruolo — grigio (neutro), primary (azione), verde (successo), rosso (distruttivo) — su fondo tenue della stessa tinta. - **FAB (`custom-mudfab`):** azione primaria fissa in basso a destra (bottom 4rem, right 16px), a portata di pollice; rispetta la safe-area inferiore. ### Cards / Containers - **Corner Style:** pannelli e dialog a 1em; contenitori d'azione a 20px; input-card a 9px. - **Background:** Carta (#fff) per il contenuto; Grigio Campo (~#f5f5f5) per input-card e superfici tonali secondarie. - **Shadow Strategy:** piatte di default; Ombra Custom solo quando devono galleggiare (vedi Elevation). - **Border:** preferire lo stacco tonale al bordo; quando serve, bordo pieno sottile (`--card-border-color`). Mai bordo-laterale colorato come accento. - **Internal Padding:** input-card `.5rem 1rem`; pannelli ~1rem; margine orizzontale di pagina `--m-page-x: 1rem`. ### Inputs / Fields - **Style:** input dentro `input-card` su fondo Grigio Campo, raggio 9px; underline Mud rimossa (`:before/:after` a `none`) per un aspetto pulito a "scheda". - **Layout:** `form-container` a due colonne (etichetta in peso 700 a sinistra, valore a destra), altezza minima 35px per un tocco comodo. - **Valid / Error:** valido → outline verde 1px (#26b050); invalido → outline rosso 1px (#e50000) con `validation-message` in rosso. ### Navigation - **NavMenu** in testa alla pagina; barra di stato connessione (`ConnectionState`) che scorre dall'alto: verde (SystemOk) o rosso (NetworkKo / ServicesIsDown), peso 700, testo bianco. Comunica lo stato di rete/servizio senza rubare spazio al contenuto. ### Signature: Barra di Stato Connessione Striscia sottile animata (`.Connection`) ancorata in cima che appare/scompare con transizione morbida (translateY) per segnalare rete assente o backend giù. È l'incarnazione visiva del principio "Offline è la verità": lo stato di connettività è sempre onesto e visibile. ## 6. Do's and Don'ts ### Do: - **Do** usare l'Arancio-Rosso Allerta (#ec4c41) solo per azione e stato attivo; mantenerlo raro (Regola dell'Unico Accento). - **Do** tenere il testo di corpo in inchiostro (#000) su carta (#fff); alto contrasto per la lettura al sole. - **Do** dimensionare i bersagli di tocco ≥44px e collocare le azioni primarie a portata di pollice (FAB in basso a destra), pensando all'uso a una mano/guanti. - **Do** rendere sempre esplicito lo stato offline/sync (barra di connessione, stati di scheda/ispezione). - **Do** dare feedback fisico immediato a ogni tocco e scansione (ripple, cambio di stato). - **Do** usare un'unica famiglia (Nunito) e fare gerarchia con peso e dimensione. - **Do** rispettare le safe-area iOS/Android e `prefers-reduced-motion`. ### Don't: - **Don't** costruire un **gestionale datato e denso**: niente tabelle fittissime, testo minuscolo, form infiniti, grigio ovunque. - **Don't** virare verso un'estetica **consumer social/giocosa**: niente colore ludico o decorazione fine a sé stessa. - **Don't** usare testo grigio chiaro sul corpo "per eleganza": è la causa numero uno di illeggibilità al sole. - **Don't** usare bordo-laterale colorato (`border-left/right` > 1px) come accento su card, liste o alert. - **Don't** usare testo con gradiente (`background-clip: text`), glassmorphism decorativo, griglie di card tutte identiche, o eyebrow maiuscoli tracciati su ogni sezione. - **Don't** introdurre animazioni di scena orchestrate al caricamento: l'app entra dritta nel compito; il movimento serve allo stato, non allo spettacolo. - **Don't** reinventare affordance standard (scrollbar strane, controlli di form non convenzionali) per "carattere".