Introduzione

Panoramica

Il Design System è un insieme di regole e linee guida che permettono di mantenere coerenza e continuità all'interno di un ecosistema digitale, migliorando le performance produttive e fornendo all'utente una brand experience familiare e coerente su tutte le piattaforme.

"Styles come and go. Good design is a language, not a style."

— Massimo Vignelli

Il valore del design system

• Semplificare e migliorare l'esperienza degli utenti.
• Comunicare il brand in modo univoco.
• Semplificare ed efficientare la realizzazione e l'evoluzione dei prodotti digitali.
• Rafforzare la collaborazione interna e la standardizzazione dei flussi operativi.

Foundations

Spaziature

Definiamo un'unità di base con lo scopo di definire una scala utile a posizionare e dimensionare gli elementi in pagina.

Utilizziamo una scala lineare di 4 / 8px (8, 16, 24, 32, 48 …).

Foundations

Raggi

I raggi di arrotondamento ammorbidiscono gli angoli di superfici e controlli. Scala derivata dall'unità di base: card e input a radius-lg (8px), pill e avatar radius-full.

Design system

Design token

Foundations

Colori

I colori hanno un'unica fonte canonica: Brand Guidelines → Palette (primari, gradienti, secondari, neutrali, con Pantone, CMYK e color matching). Questa pagina vi rimanda per evitare divergenze.

Foundations

Tipografia

La tipografia ha un'unica fonte canonica: Brand Guidelines → Tipografia (font primario, secondario, uso della tipografia, don'ts). Questa pagina vi rimanda per evitare divergenze.

Foundations

Icone

Le icone sono uno strumento utile a comunicare ed enfatizzare concetti, supportare la navigazione ed aggiungere valore concettuale all'interfaccia.

Foundations

Griglie

Layout responsive su breakpoint Tailwind. Contenuto centrato in un container da 1110px.

Griglia 12 colonne

La griglia base per le pagine: 12 colonne con gutter da 24px.

Foundations

Superfici

Una sola ombra morbida per le card; gli input usano bordi interni (inner-shadow) invece di outline.

Foundations

Strutture

Lo scheletro dell'app: sidebar fissa a sinistra, contenuto scrollabile, header di pagina.

Sidebar 256px espansa / 80px collassata · container contenuto 1110px · background pagina --ui-secondary, card --ui-primary.

Components

Alert

Banner di feedback inline per i cinque stati di prodotto: fondo tinto, icona satura, testo scuro, rounded-2xl.

Anatomia

Icona guida + titolo + descrizione.

Configurazioni

I tipi di configurazione del componente.

Stati

Varianti: success · error · warning · waiting · info. Taglie sm/md.

Accessibilità

Markup semantico

L’Alert è un componente non interattivo usato per comunicare un messaggio. Va implementato con un <div> o <p> e un role ARIA adatto all’urgenza: role="status" (aria-live “polite”) per messaggi informativi o a bassa priorità, annunciati senza interrompere l’attività; role="alert" (aria-live “assertive”) per messaggi critici, annunciati subito. Essendo non interattivo non deve ricevere focus: evita tabindex="0" o ruoli che implicano interattività.

Quando l’alert viene iniettato dinamicamente nel DOM, la live region deve essere già presente prima dell’inserimento del messaggio: iniettare contenitore e contenuto insieme può impedire il corretto annuncio.

Icona

L’icona dell’alert non deve essere letta dallo screen reader (alternativa testuale vuota): è il testo a veicolare il messaggio. Le icone decorative vanno nascoste con aria-hidden="true".

Contenuto

Il messaggio dev’essere chiaro, conciso e autoesplicativo: comunica cosa è successo e, dove utile, cosa l’utente può o deve fare. Evita un linguaggio vago o puramente tecnico, poco comprensibile fuori contesto.

Components

Avatar

Immagine profilo tonda; mostra le iniziali su fondo mint quando manca src. L’avatar in sidebar usa ring.

Anatomia

Cerchio con immagine o iniziali; ring opzionale.

Configurazioni

I tipi di configurazione del componente.

Stati

Taglie sm/md/lg; con/senza ring; con/senza immagine.

Accessibilità

Fornisci alt con il nome; le iniziali sono decorative.

Components

Badge

Chip solido per stati, conteggi o il flag NEW; uppercase di default.

Anatomia

Pill pieno con testo breve.

Configurazioni

I tipi di configurazione del componente.

Stati

Toni: neutral · brand · success · error · warning · info.

Accessibilità

Affianca sempre un testo esplicito al colore del tono.

Components

Button

Componente usato per eseguire un’azione specifica con un click o un tap.

Anatomia

La composizione del componente.

Configurazioni

I tipi di configurazione del componente.

Stati

I comportamenti del componente.

Accessibilità

Markup semantico

Per consentire l’uso del bottone con le tecnologie assistive va usato un tag appropriato: in HTML è corretto associare il tag <button>, che ammette stili diversi, può ricevere il focus, è azionabile ed è leggibile da uno screen reader.

Per ogni bottone, indipendentemente dal tipo, è possibile specificare un nome accessibile (es. aria-label) per chiarirne scopo e contesto.

Icona

L’icona presente nei bottoni non deve essere letta dallo screen reader (alternativa testuale vuota) perché:

• se il bottone ha anche testo visibile, va letto quello — o il nome accessibile del bottone;
• se il bottone ha solo icona, va letto il nome accessibile del bottone.

Contenuto

Un bottone, per essere accessibile, deve avere un contenuto chiaro che evochi un’azione, usare parole specifiche legate all’azione ed essere conciso.

Per i bottoni con sola icona, oltre al nome accessibile, fornisci un testo di accompagnamento chiaro che ne descriva la funzione (es. «Modifica»): verrà mostrato come tooltip.

Components

Card

La superficie bianca usata ovunque: rounded-lg, l’unica ombra morbida del sistema, nessun bordo, padding 24px.

Anatomia

Contenitore + contenuto libero; variante interactive cliccabile.

Configurazioni

I tipi di configurazione del componente.

Stati

Statica · Interactive (si solleva all’hover).

Accessibilità

Markup semantico

La Card è un componente contenitore: l’elemento giusto dipende dal contesto. Usa <article> quando rappresenta un contenuto autonomo; <section> quando fa parte di una struttura raggruppata; un <div> generico quando non serve veicolare significato semantico. La card in sé non è interattiva: l’interattività è sempre delegata ai singoli elementi che contiene — non rendere focusabile o azionabile l’intero contenitore.

Elementi interni

Ogni elemento dentro la card (bottoni, link, input, icone, immagini) deve rispettare le linee guida di accessibilità del proprio componente. La card funge solo da contenitore di layout e non sostituisce i requisiti dei suoi figli: un bottone segue le regole del Button, un’immagine fornisce un’alternativa testuale, un link segue le regole del Link.

Components

Checkbox

Selezione multipla: riempimento mint e segno di spunta bianco quando attiva.

Anatomia

Box 20px + label cliccabile.

Configurazioni

I tipi di configurazione del componente.

Stati

Default · Checked (mint) · Focus · Disabled.

Accessibilità

Label associata e cliccabile; lo stato è comunicato da checked, non solo visivamente. Area di tocco ≥ 44px.

Components

Drawer

Pannello che scorre dal bordo dello schermo per ospitare contenuti o azioni secondarie senza lasciare la pagina.

Anatomia

Header con titolo e chiusura, corpo scorrevole e azione primaria in basso a destra.

Configurazioni

Pannello ancorato a destra con header, corpo e azione primaria.

Stati

Chiuso · Aperto (scorre dal bordo, scrim sul contenuto sottostante).

Accessibilità

Markup semantico

Come la modale, il drawer va definito come contenitore separato con role="dialog" e aria-modal="true", così che il resto della pagina risulti inerte. Associa il titolo via aria-labelledby e un’eventuale descrizione via aria-describedby.

Icona

L’icona di chiusura deve avere un nome accessibile (es. aria-label="Chiudi"). Le illustrazioni decorative vanno marcate aria-hidden="true".

Contenuto

Ad apertura sposta il focus dentro al pannello e intrappolalo (Tab non esce); alla chiusura riportalo sull’elemento che l’ha attivato. Esc chiude sempre. Contenuto conciso, azione primaria distinguibile.

Components

Dropdown

Componente per selezionare informazioni, dati e valori generici da un elenco a comparsa.

Anatomia

Container, label, help text, icona chevron e lista a comparsa.

Configurazioni

Stato chiuso e aperto, con help text ed errore.

Stati

Default · Filling/Active · Filled/Active · Error · Disabled; lista in Open Hover/Pressed.

Accessibilità

Markup semantico

Il campo va associato a una label esplicita tramite for/id: è questo legame a comunicare il nome del campo alle tecnologie assistive. Il placeholder non sostituisce la label. Se obbligatorio, indicalo visivamente (asterisco + legenda) e semanticamente con required/aria-required="true"; in errore usa aria-invalid="true" e collega il messaggio con aria-describedby, annunciandolo con role="alert". Il campo resta navigabile da tastiera con focus visibile.

Icona

Le icone di stato non sono mai l’unico mezzo per comunicare uno stato: vanno accompagnate da testo. Le decorative usano aria-hidden="true"; quelle funzionali un’etichetta via aria-label o aria-describedby.

Contenuto

Messaggi d’errore chiari e associati al campo, in linguaggio non tecnico. In contesti multilingua imposta lang; help text e tooltip accessibili via aria-describedby quando il campo è a fuoco.

Components

IconButton

Bottone con sola icona: ghost per toolbar e chiusure, secondary bordato, primary come CTA iconica.

Anatomia

Container quadrato (lato pari all’altezza) con una sola icona centrata.

Configurazioni

I tipi di configurazione del componente.

Stati

Default · Hover (fondo tinto o più scuro) · Focus (outline midnight) · Disabled.

Accessibilità

Specifica sempre un aria-label che descriva l’azione: senza testo visibile è l’unica fonte per lo screen reader. L’icona ha alternativa testuale vuota.

Components

Input

Campo a riga singola, senza bordo: un ring inner-shadow 2px che diventa mint al focus e rosso in errore. Supporta label, password reveal e icona finale.

Anatomia

Label, campo con ring e messaggio d’errore opzionale.

Configurazioni

I tipi di configurazione del componente.

Stati

Default · Focus (ring mint) · Invalid (ring rosso + messaggio) · Disabled.

Accessibilità

Markup semantico

In HTML l’<input> va associato a una label esplicita tramite for, che punta all’id del campo: è questo legame a far leggere il nome del campo alle tecnologie assistive. Ogni campo deve avere una label visibile; il placeholder non la sostituisce (sparisce al focus). Se il campo è obbligatorio, indicalo sia visivamente (asterisco + legenda) sia semanticamente con required o aria-required="true"; in errore marca l’input con aria-invalid="true" e collegalo al messaggio via aria-describedby. I messaggi d’errore vanno annunciati con role="alert" e il campo deve restare navigabile da tastiera con un focus visibile.

Icona

Le icone di stato (errore, successo, warning) non devono mai essere l’unico mezzo per comunicare lo stato: accompagnale sempre con testo o un messaggio associato. Le icone decorative usano aria-hidden="true"; se l’icona ha funzione (es. tooltip al click) fornisci un’etichetta accessibile via aria-label o aria-describedby.

Contenuto

Il placeholder può mostrare un esempio del formato atteso ma non sostituisce la label. I messaggi d’errore vanno associati al campo che li genera, con linguaggio comprensibile e non tecnico (“Questo campo è obbligatorio” invece di “Validation error”). In contesti multilingua imposta correttamente l’attributo lang; eventuale help text o tooltip va reso accessibile via aria-describedby.

Components

Link

Link testuale inline: accento viola, semibold, sottolineato; scurisce all’hover. Per la navigazione dentro al testo o come link autonomo.

Anatomia

Label testuale con icona opzionale per i link esterni.

Configurazioni

Default, esterno e disabilitato; inline nel testo.

Stati

Default · Hover (scurisce verso accent-dark) · Focus (outline visibile) · Disabled.

Accessibilità

Markup semantico

Usa sempre un <a> con href valido: un link senza destinazione va trattato come bottone. Il testo del link dev’essere descrittivo e comprensibile fuori contesto — evita “clicca qui” o “scopri di più” isolati. Il focus dev’essere sempre visibile da tastiera.

Link esterni

I link che aprono in una nuova scheda (target="_blank") vanno segnalati — con un’icona o un testo — così l’utente sa cosa aspettarsi; aggiungi rel="noopener noreferrer". L’icona accanto al testo è decorativa (aria-hidden="true").

Contenuto

La label deve descrivere la destinazione o l’azione in modo conciso. Non affidare il significato al solo colore: la sottolineatura distingue il link dal testo circostante.

Components

Modal

Dialog centrato — header (titolo + chiusura xmark rossa), body diviso da hairline, footer con Annulla/Conferma. Scrim greyscale-dark/40.

Anatomia

Header + body + footer CTA; chiusura in alto a destra.

Configurazioni

I tipi di configurazione del componente.

Stati

Nascosto · Visibile (fade + scale); content-only con showCta={false}.

Accessibilità

Markup semantico

Per essere accessibile la modale va definita come contenitore separato dal resto della pagina, con role="dialog" (oppure role="alertdialog" se contiene un messaggio critico che richiede conferma). Imposta aria-modal="true" per indicare che il contenuto esterno è temporaneamente inerte. Associa un titolo via aria-labelledby (puntando all’id dell’heading interno) e, se serve, una descrizione via aria-describedby.

Icona

Se per chiudere si usa un’icona (es. la “X”) deve avere un nome accessibile chiaro (es. aria-label="Chiudi") e non essere letta come “immagine” o “bottone senza nome”. Eventuali illustrazioni di sfondo vanno marcate aria-hidden="true". L’indicatore di focus dev’essere sempre visibile sui bottoni.

Contenuto

A modale aperta, il Tab deve spostare il focus solo tra gli elementi interni, senza uscire sulla pagina sottostante. All’apertura sposta il focus sul primo elemento interattivo o sul titolo; alla chiusura riportalo esattamente sull’elemento che l’ha attivata. Dev’essere sempre possibile chiudere con Esc oltre che col bottone visibile. Il contenuto sia conciso e l’azione primaria (“Salva”, “Elimina”, “Conferma”) facilmente distinguibile da quella di annullamento.

Components

ProgressBar

Track grigio con riempimento mint; nel prodotto indica “Percorso completo al: X%”.

Anatomia

Track + fill + label percentuale opzionale.

Configurazioni

I tipi di configurazione del componente.

Stati

Valore 0–100; label opzionale.

Accessibilità

Usa role="progressbar" con aria-valuenow/min/max.

Components

Radio

Selezione singola: ring mint e dot mint quando attivo. Lo stesso name raggruppa le opzioni.

Anatomia

Cerchio 20px + label; un gruppo condivide il name.

Configurazioni

I tipi di configurazione del componente.

Stati

Default · Selected (mint) · Focus · Disabled.

Accessibilità

Raggruppa con fieldset/legend; naviga le opzioni con le frecce.

Components

Spinner

Piccolo anello mint rotante per il caricamento inline.

Anatomia

Anello con segmento mint in rotazione continua.

Configurazioni

I tipi di configurazione del componente.

Stati

Dimensione configurabile.

Accessibilità

Usa role="status" + testo “Caricamento” per lo screen reader.

Components

Tabs

Navigazione underline: il tab attivo è scuro con sottolineatura mint.

Anatomia

Lista di tab con indicatore attivo e contenuto associato.

Configurazioni

I tipi di configurazione del componente.

Stati

Default · Attivo (scuro + underline mint) · Hover.

Accessibilità

Usa role="tablist/tab/tabpanel"; naviga con le frecce, attiva con Invio/Spazio.

Components

Tag

Pill outline per categorie/topic: bordo e testo condividono un colore su fondo trasparente.

Anatomia

Bordo 1px + label; il colore guida sia bordo sia testo.

Configurazioni

I tipi di configurazione del componente.

Stati

Tre taglie (sm/md/lg); un colore per topic.

Accessibilità

Markup semantico

Essendo un componente puramente informativo che non innesca azioni o navigazione, il Tag va implementato con un elemento neutro come <span> o, dentro una lista, <li>. Non usare elementi interattivi come <button> o <a>, che implicano un’interattività che il componente non offre. Non deve ricevere focus da tastiera (evita tabindex="0" o ruoli interattivi); un aria-label può essere aggiunto solo se la label visibile da sola non basta a comunicarne il significato.

Icona

Un’eventuale icona nel tag non va letta dallo screen reader (alternativa testuale vuota): se c’è una label visibile basta quella; se il tag usa solo l’icona, fornisci un’etichetta accessibile.

Contenuto

La label dev’essere concisa e autoesplicativa, con parole specifiche che descrivono un attributo, una categoria o uno stato. Evita abbreviazioni o termini ambigui senza contesto.

Components

Textarea

Campo multilinea con lo stesso ring dell’Input (mint al focus, rosso in errore).

Anatomia

Label, area di testo ridimensionabile e messaggio d’errore opzionale.

Configurazioni

I tipi di configurazione del componente.

Stati

Default · Focus (ring mint) · Invalid (ring rosso + messaggio) · Disabled.

Accessibilità

Associa label e campo; comunica l’errore con aria-describedby, non col solo colore.

Components

Toggle

Interruttore on/off: track mint quando attivo, knob bianco che scorre a destra.

Anatomia

Track + knob; due taglie (sm/md).

Configurazioni

I tipi di configurazione del componente.

Stati

Off · On (mint) · Disabled.

Accessibilità

Usa role="switch" + aria-checked ed etichetta cosa attiva il controllo.

Tiles

Carouselwip

Sequenza scorrevole di card (corsi, master, testimonianze) con controlli avanti/indietro. Da costruire sopra il componente Card.

Tiles

Footer

Blocco di chiusura pagina: marchio centrato, colonne di link, social e nota legale. Superficie scura, hover mint sui link. È il componente Footer del Design System.

Tiles

Menu Spallawip

Il menu laterale dell'app-shell: logo, blocco utente (avatar, punti, streak) e navigazione verticale con la barra attiva viola. È il componente Sidebar del Design System.

Prodotto

UI Kit

Ricostruzioni interattive ad alta fedeltà dei prodotti reali.