SteUP_Dotnet/DESIGN.md

name, description, colors, typography, rounded, spacing, components

name	description	colors	typography	rounded	spacing	components
SteUP	Strumento da campo per ispezioni nei punti vendita — solido, chiaro, offline-first.	primary primary-pressed primary-dark on-primary workspace surface surface-muted divider ink ink-muted danger-ink danger-surface danger-solid warning-ink warning-surface warning-solid success-ink success-surface success-solid info-ink info-surface info-solid neutral-ink neutral-surface focus-ring #ec4c41 #d23a30 #002339 #ffffff #e9edf2 #ffffff #f4f6f9 #d9e0e8 #000000 #465563 #b3120c #fdeceb #e50000 #8a4f00 #fdf0db #b26a00 #10702f #e4f5e9 #26b050 #002339 #dff2ff #1877d8 #465563 #f4f6f9 #258cfb	headline-medium headline-small title-large title-medium body-large body-medium label-large label-medium label-small icon-sm icon-md icon-lg icon-xl fontFamily fontSize fontWeight lineHeight letterSpacing Inter, sans-serif 34px 700 1.2 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter, sans-serif 28px 700 1.25 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter, sans-serif 22px 700 1.3 -0.01em fontFamily fontSize fontWeight lineHeight letterSpacing Inter, sans-serif 18px 700 1.35 normal fontFamily fontSize fontWeight lineHeight letterSpacing Inter, sans-serif 16px 400 1.5 normal fontFamily fontSize fontWeight lineHeight letterSpacing Inter, sans-serif 15px 400 1.45 normal fontFamily fontSize fontWeight lineHeight letterSpacing Inter, sans-serif 14px 600 1.25 normal fontFamily fontSize fontWeight lineHeight letterSpacing Inter, sans-serif 13px 600 1.25 normal fontFamily fontSize fontWeight lineHeight letterSpacing Inter, sans-serif 12px 700 1.3 0.3px fontFamily fontSize fontWeight lineHeight letterSpacing remixicon 15px 400 1 normal fontFamily fontSize fontWeight lineHeight letterSpacing remixicon 20px 400 1 normal fontFamily fontSize fontWeight lineHeight letterSpacing remixicon 26px 400 1 normal fontFamily fontSize fontWeight lineHeight letterSpacing remixicon 44px 400 1 normal	compact control surface sheet pill 8px 16px 20px 24px 999px	xs sm md lg xl touch-min button-height appbar-height navbar-height content-max 8px 12px 16px 24px 32px 44px 48px 80px 68px 920px	panel button-primary button-outlined badge navbar backgroundColor textColor rounded padding {colors.surface} {colors.ink} {rounded.surface} 16px backgroundColor textColor rounded typography padding {colors.primary} {colors.on-primary} {rounded.control} {typography.label-large} 0 24px backgroundColor textColor rounded typography {colors.surface} {colors.ink} {rounded.control} {typography.label-large} rounded typography padding {rounded.pill} {typography.label-small} 5px 9px backgroundColor rounded {colors.surface} {rounded.sheet}

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.

Il sistema visivo segue STILE_UI.md, lo stile condiviso delle app Integry (riferimento: Fixiy). Quel documento definisce forma, ritmo, tipografia e composizione; questo documento fissa i valori concreti di SteUP su quei ruoli.

Caratteristiche portanti:

• Superfici piatte. Nessuna ombra costruisce gerarchia: la separazione viene dal contrasto di superficie (sfondo pagina più freddo delle superfici) e dallo spazio. L'unica ombra del sistema è quella del toast.
• Offline-first. Lo stato di salvataggio e sincronizzazione è sempre esplicito. Il carattere è ospitato in locale: un font che arriva dalla rete è un font che in campo non arriva.
• Il pollice comanda. Tocchi ≥44px, azioni primarie in basso: navigazione flottante, barra azioni ancorata in fondo ai form.
• Alto contrasto. Inchiostro pieno sul corpo del testo, per la luce diretta del sole.
• Un solo accento. Il corallo indica azione e stato attivo, mai decorazione.

2. Colors

I ruoli sono quelli di STILE_UI.md §2, riempiti con la palette storica di SteUP. Sono stati aggiunti solo i ruoli che mancavano: workspace, surface-muted, divider, ink-muted e le triplette dei toni semantici.

Accento e ancora

• Corallo (#ec4c41) — primary: il colore dell'azione. Pulsanti primari, selezione, progresso, FAB. La sua rarità è ciò che lo rende un segnale.
• Blu Profondo (#002339) — primary-dark: ancora della struttura. Testo su superfici informative, icone metrica, valori in evidenza, bottone di accesso.

Superfici — tre gradini netti

• workspace (#e9edf2): sfondo dell'applicazione, più freddo delle superfici di lavoro.
• surface (#ffffff): card, pannelli, testate, barra di navigazione, dialog.
• surface-muted (#f4f6f9): superficie secondaria dentro una superficie (campo di ricerca, chip a riposo, riquadri interni).
• divider (#d9e0e8): bordi 1px e contorni dei controlli a riposo.

Testo

• ink (#000000): corpo del testo. La Regola del Contrasto da Sole: il grigio chiaro "per eleganza" è vietato sul testo leggibile.
• ink-muted (#465563): testo secondario, metadati, icone non attive. 8.3:1 su surface, 7.4:1 su workspace. Il testo secondario si distingue per colore, mai per opacità o peso sotto 400.

Toni semantici — la regola delle triplette

Ogni tono è una tripletta (ink, surface, solid):

• -ink colora testo e icone sopra la superficie tenue (sempre ≥4.5:1 su quella superficie);
• -surface riempie badge, pannelli di feedback e cerchi-icona dei dialog;
• -solid è il riempimento pieno dei toast, con testo bianco sopra.

I colori "puri" della palette storica (#e50000, #26b050) vivono come -solid: sono giusti per riempimenti e icone, non abbastanza contrastati per il testo. Per questo esistono danger-ink e success-ink.

Tono	Uso
danger	errori, azioni distruttive, schede da inviare
warning	attenzione, dati incompleti, bozze da completare
success	conferme, completamenti, sincronizzato
info	stato informativo, pannelli di riepilogo, selezione
neutral	stati senza carica semantica

Named Rules

La Regola dell'Unico Accento. Il corallo appare solo su azione o stato attivo, mai come decorazione.

Mai il solo colore. Ogni stato porta sempre icona e etichetta testuale. Le mappature stanno in StatusBadgeHelper: uno stato si presenta identico ovunque, e uno nuovo si aggiunge in un punto solo.

3. Typography

Famiglia unica: Inter (variabile 100–900), ospitata in locale in wwwroot/fonts. Scala fissa, pensata per la scansione rapida, non per l'effetto editoriale. La gerarchia si fa con peso e dimensione.

Le cifre sono tabellari (font-feature-settings: "tnum"), così contatori e codici non "ballano" mentre si aggiornano.

Named Rules

La Regola del Peso, non del Maiuscolo. L'enfasi si ottiene con il peso (600/700/800) e la dimensione. Niente maiuscoletto spaziato, niente eyebrow sopra le sezioni.

Il titolo è l'entità. Nelle card di elenco il titolo è il punto vendita o il motivo, non il tipo di record. L'identificativo tecnico sta sopra, in 12px ink-muted.

Le righe di metadato si compongono con separatore ·.

4. Elevation

Zero. Le superfici sono piatte: nessuna ombra, nessun surface-tint. La profondità è tonale (surface su workspace) più lo spazio.

Le uniche eccezioni: il toast, che deve leggersi sopra qualunque contenuto, e i livelli modali di sistema (scrim del bottom sheet e degli overlay). Popover e menu si staccano con un bordo 1px divider, non con un'ombra.

La profondità di impilamento usa una scala semantica (--z-sticky → --z-navbar → --z-connection → --z-overlay → --z-modal → --z-toast), mai valori arbitrari.

5. Components

• Panel — il mattone di tutto: surface, raggio 20, padding 16, senza bordo. Varianti tonali per riepiloghi (info) e sotto-riquadri (muted).
• Card di elenco — identificativo, titolo-entità, riga meta, badge, footer con conteggi, barra azioni interna che passa a colonna sotto i 350px.
• Badge — pillola con icona 15px + etichetta 12px peso 700, costruita da funzione di mappatura.
• Testata — alta 80px, titolo a sinistra, sfondo uguale alla pagina. Non una AppBar colorata col titolo centrato.
• Navigazione — barra flottante in basso (raggio 24, margine 16, bordo 1px), icona outline a riposo e piena da selezionata, pastiglia info-surface sulla voce attiva. Da 720px diventa colonna laterale.
• Bottom sheet — maniglia, testata, un'unica linea di struttura, corpo scorrevole. Sostituisce i menu flottanti.
• Barra azioni ancorata — bordo superiore 1px, bottoni in riga, colonna sotto i 390px. Nei form il salvataggio sta qui, non in fondo allo scroll.
• Campi — riempiti, raggio 16, bordo 1px a riposo e 2px in focus. Sottolineatura Material rimossa: i campi sono schede, non righe.
• Selezione multipla — righe da 56px con casella 26px, non un menu a tendina: con i guanti si centra un bersaglio grande.
• Stato vuoto — icona, titolo, messaggio che suggerisce la mossa successiva, azione facoltativa.
• Caricamento — scheletri che hanno già la forma del contenuto, non spinner in mezzo alla pagina. L'overlay pieno è riservato alle operazioni bloccanti, e dice sempre cosa sta facendo.

Signature: Barra di Stato Connessione

Striscia sottile ancorata in cima che scende con una transizione morbida quando la rete o il backend cambiano stato. È l'incarnazione visiva di "Offline è la verità".

6. Motion

Curve esponenziali in uscita (cubic-bezier(0.22, 1, 0.36, 1)), durate 120/200/280ms. Il movimento serve allo stato: risposta al tocco (l'elemento cede sotto il dito), entrata di un articolo scansionato, salita di uno sheet, disegno della spunta di conferma. Niente animazioni di scena al caricamento.

Nessuno stato dipende dall'hover: su un touch screen non esiste, e lascia elementi accesi dopo il tocco. Gli stili hover sono dietro @media (hover: hover).

prefers-reduced-motion ha un'alternativa per ogni animazione.

7. Do's and Don'ts

Do:

• Do usare solo i token: un colore, un raggio o una spaziatura scritti a mano in una schermata sono un difetto da correggere.
• Do mostrare sempre i conteggi ("12 schede", "3 da inviare"): il rilevatore deve sapere quanto ha davanti senza contare.
• Do distinguere "non c'è nulla" da "i filtri non trovano nulla", e nel secondo caso offrire l'azzeramento.
• Do dimensionare i bersagli ≥44px e tenere le azioni primarie a portata di pollice.
• Do rendere esplicito lo stato offline/sync, sempre con icona più etichetta.
• Do rispettare le safe-area e prefers-reduced-motion.

Don't:

• Don't usare ombre per costruire gerarchia, né surface-tint sulle superfici.
• Don't usare le firme Android di serie: card con ombra, FAB circolare al centro, AppBar colorata col titolo centrato, snackbar di sistema.
• Don't usare bordo-laterale colorato (border-left/right > 1px) come accento.
• Don't usare testo grigio chiaro sul corpo, testo con gradiente, glassmorphism decorativo, griglie di card tutte identiche, eyebrow maiuscoli.
• Don't reinventare affordance standard per "carattere".
• Don't far dipendere un'informazione dal solo colore.