Salta al contenuto principale
Principi

Ridurre il carico, aumentare il successo

Il design system Presago serve a rendere le interfacce più facili da usare senza chiedere attenzione in più. Le scelte visive e interattive devono guidare l’utente nel workflow, prevenire azioni a vuoto e rendere chiaro lo stato operativo di ogni elemento.

Feedback continuo

Ogni componente comunica se è pronto, in corso, disabilitato, selezionato o in errore prima che l’utente perda un’azione.

Forma coerente con la funzione

Gli elementi seguono associazioni forma/funzione già familiari, rendendole più ordinate e prevedibili.

Poche varianti, molte combinazioni

Il sistema limita token e varianti formalizzate. Le eccezioni locali possono esistere, ma non diventano fondazione.

Basso rumore visivo

Contrasto, enfasi e movimento hanno uno scopo operativo: orientare, confermare o prevenire errori.

Do & don’t

Esempi pratici per mantenere l’interfaccia silenziosa, leggibile e integrata nel workflow.

Do
  • Usa guardrails sulle azioni in corso: blocca l'interazione con loading spinner o tooltip informativi.
  • Usa pattern semplici e riconoscibili: button per azioni, link per navigazione, input sempre con label.
  • Anima ogni cambio di stato con transizioni rapide e coerenti.
Don’t
  • Non lasciare interazioni a vuoto: disattiva i link/button che portano alla pagina/funzione attualmente attiva.
  • Non formalizzare eccezioni locali come nuovi token o varianti globali.
  • Non usare effetti decorativi senza funzione.

Accessible by default

Accessibilità, contrasto e navigazione da tastiera sono parte del sistema, non una fase separata.

Global code & structure
  • <html lang="it"> — idioma dichiarato
  • Title univoco della pagina
  • Struttura lineare, niente layout con table
  • Landmark: <header>, <nav>, <main>, <footer>
Keyboard & focus
  • Skip link all'inizio, visibile al focus
  • Focus ring custom (2px, offset 2px) via token --presago-focus-ring-*
  • Ordine di Tab coerente con l'ordine visivo
  • Nessun elemento focusable invisibile
Headings
  • Un solo <h1> per pagina
  • Gerarchia senza salti (h1 → h2 → h3)
  • Componente Heading con data-level obbligatorio
Forms & controls
  • <label for> associato a ogni input
  • <fieldset>/<legend> per RadioGroup
  • Errori via aria-describedby + icona (non solo colore)
  • IconButton: aria-label obbligatorio, validato a runtime
Color & contrast
  • Testo ≥ 4.5:1 (AA normal)
  • Large text ≥ 3:1, UI e bordi input ≥ 3:1
  • Contrast checker live nella sezione Tokens → Colors
  • Informazione mai veicolata dal solo colore
Motion & appearance
  • prefers-reduced-motion: transizioni disattivate, spinner statico
  • Zoom testo 200% senza overflow orizzontale
  • Target touch ≥ 44×44px sugli interattivi
  • High contrast mode: bordi espliciti su input e controlli