HTML nei design system

Un design system è una libreria condivisa di componenti, token, pattern e linee guida, utilizzata nei prodotti di un'organizzazione. La parte HTML del sistema incapsula le convenzioni di markup, così ogni prodotto utilizza strutture coerenti per pulsanti, finestre modali, form e card.

I token sono valori atomici di design (colore: blue-500, spaziatura: 16px). I componenti sono unità HTML+CSS+JS riutilizzabili (Button, Modal, TextField). I pattern sono composizioni di livello superiore (form di accesso, card di contenuto con avatar). La struttura HTML è fissa a livello di componente; i pattern combinano i componenti.

I componenti incorporano le best practice: ogni Button utilizza l'elemento <button> (non un div) con l'attributo type corretto. Ogni Modal gestisce il focus, supporta Escape e presenta i ruoli ARIA corretti. Adottare i componenti evita di reimplementare l'accessibilità per ogni funzionalità del prodotto.

Storybook esegue il rendering di ogni componente in isolamento, con diverse props e varianti. Designer e product manager possono vedere i componenti disponibili senza leggere il codice; gli sviluppatori vedono esempi d'uso senza dover cercare nel codice sorgente. È lo standard de facto per la documentazione dei design system.

Tratti il design system come un package pubblicato secondo semver. Le modifiche HTML/CSS incompatibili (come rinominare una classe CSS da cui dipendono i consumer o rimuovere uno slot di un componente) richiedono un incremento della versione major. I consumer effettuano l'aggiornamento intenzionalmente, secondo le proprie tempistiche, senza sorprese.

Le props, gli slot e le parti esposte dei componenti costituiscono l'API pubblica. Una volta distribuiti ai consumer, li consideri costosi da modificare. Deprechi gradualmente: aggiunga la nuova API accanto a quella precedente, registri avvisi per l'utilizzo della vecchia API e la rimuova solo dopo un periodo di tempo valutato con dati concreti.

I token rendono possibile la tematizzazione: basta sostituire la mappa dei token dei colori perché ogni componente adotti la nuova palette. Il white labeling, cioè la condivisione dei componenti tra brand diversi con stili visivi differenti, diventa semplice quando tutto è guidato dai token e i componenti fanno riferimento ai token anziché a valori codificati direttamente.

Per le organizzazioni che utilizzano più framework (React, Vue, Angular), i web component offrono un'unica implementazione funzionante ovunque. Li si può creare con Lit, FAST o JavaScript vanilla e utilizzarli nello stesso modo in qualsiasi framework. La struttura HTML è il contratto, non il framework.

I design system incorporano una volta per tutte l'accessibilità in ogni componente: gestione della tastiera, ruoli ARIA, gestione del focus e contrasto dei colori. I team di prodotto che adottano il sistema ereditano l'accessibilità invece di implementarla da zero per ogni funzionalità, riducendo in modo misurabile i problemi di accessibilità nell'intera azienda.

Monitori quali prodotti utilizzano ciascuna versione del design system. Strumenti come il catalogo dei componenti di Backstage, bot Slack personalizzati che monitorano package.json o semplici dashboard interne mostrano dove non è ancora stata adottata la versione più recente. Le metriche di adozione giustificano il proseguimento degli investimenti.

Decida chi può aggiungere componenti: solo un team centrale dedicato ai design system? Contributi federati da parte dei team di prodotto? Ogni modello comporta dei compromessi. I team centrali rilasciano più lentamente, ma mantengono la qualità; i team federati si muovono più rapidamente, ma rischiano la frammentazione. Scelga consapevolmente in base alle dimensioni dell'organizzazione.

I design system sono prodotti in continua evoluzione. Aggiunga componenti quando nei prodotti compaiono nuovi pattern, deprechi quelli che non sono più adatti e faccia refactoring quando è necessario modificare decisioni fondamentali. Tratti il sistema come un software con una roadmap, non come un prodotto finito.

Perché i token di design (come color: blue-500 e spacing: 16px) sono preferibili ai valori codificati direttamente nei componenti?

I design system raccolgono token (valori atomici), componenti (unità HTML riutilizzabili) e pattern (composizioni di livello superiore) in una libreria versionata e condivisa tra i prodotti. Utilizzi Storybook per la documentazione, i web component per l'utilizzo con più framework e semver per garantire la stabilità. Incorpori l'accessibilità in ogni componente, monitori l'adozione ed evolva il sistema come un prodotto in continua evoluzione.