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 secondary tertiary ink paper surface-dark success error focus-ring #ec4c41 #002339 #dff2ff #000000 #ffffff #000406 #26b050 #e50000 #258cfb	page-title title body label fontFamily fontSize fontWeight lineHeight letterSpacing Nunito, sans-serif 1.5rem 800 1.2 normal fontFamily fontSize fontWeight lineHeight letterSpacing Nunito, sans-serif 1.1rem 700 1.4 normal fontFamily fontSize fontWeight lineHeight letterSpacing Nunito, sans-serif 0.875rem 400 1.8 normal fontFamily fontSize fontWeight lineHeight letterSpacing Nunito, sans-serif 0.875rem 700 1.4 normal	input panel container skeleton 9px 1em 20px 0.5em	page-x header-h touch-min 1rem 4rem 44px	button-primary button-primary-active input-card panel backgroundColor textColor rounded typography padding {colors.primary} {colors.paper} {rounded.container} {typography.label} 0.5rem 1.25rem backgroundColor textColor rounded {colors.primary} {colors.paper} {rounded.container} backgroundColor textColor rounded padding #f5f5f5 {colors.ink} {rounded.input} 0.5rem 1rem backgroundColor textColor rounded padding {colors.paper} {colors.ink} {rounded.panel} 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".