193 lines
12 KiB
Markdown
193 lines
12 KiB
Markdown
---
|
||
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".
|