Gli esempi di design system più utili da studiare sono pubblici: Google ha Material Design, Apple le Human Interface Guidelines, IBM il suo Carbon. Sono documentati, aggiornati e consultabili da chiunque, e mostrano in modo concreto come un'azienda tiene insieme centinaia di schermate senza che sembrino fatte da persone diverse.

Un'azienda di Rimini, un hotel o un e-commerce non hanno bisogno di un sistema grande come quello di Google. Ma le idee che ci sono dietro funzionano anche in piccolo, e capirle aiuta a chiedere (e a valutare) il lavoro di chi progetta il tuo sito o il tuo gestionale.

Cos'è un design system, in una riga

È l'insieme di regole, componenti e codice condivisi con cui si costruisce un prodotto digitale: colori, tipografia, pulsanti, moduli, tabelle, con le istruzioni su quando e come usarli. Se vuoi approfondire cosa contiene e quando conviene, lo spiego nella pagina su UI design e design system. Qui guardiamo gli esempi.

Material Design (Google): i token e il colore dinamico

Material Design è il sistema con cui Google progetta Android e le sue app, ed è usato da moltissime app di altre aziende. La lezione più interessante della versione Material 3 riguarda i design token.

Un token è un nome che descrive il ruolo di un colore, non il colore in sé: "primario", "testo sul primario", "superficie", "errore". I componenti usano il ruolo, e il valore si decide altrove. Google lo porta all'estremo con il colore dinamico, introdotto con Android 12: il sistema ricava una palette dallo sfondo scelto dall'utente e la applica alle app, che continuano a usare gli stessi token. Secondo la documentazione per sviluppatori Android, questo approccio rende più semplice gestire con coerenza tema chiaro e tema scuro.

Cosa prendere: anche nel sito più semplice, chiama i colori per ruolo ("colore delle azioni", "colore di errore") e non per tinta ("blu", "rosso"). Il giorno in cui cambi il colore del brand o aggiungi la dark mode, modifichi un valore invece di cento pagine.

Human Interface Guidelines (Apple): principi prima dei componenti

Le Human Interface Guidelines di Apple sono una guida più che una libreria: spiegano come deve comportarsi un'app su iPhone, iPad, Mac, Apple Watch, Apple TV e Vision Pro, partendo dai principi e arrivando ai singoli controlli.

Nel giugno 2025 Apple ha presentato un nuovo linguaggio visivo basato su un materiale chiamato Liquid Glass, esteso per la prima volta in modo uniforme a iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 e tvOS 26. Secondo Apple, i controlli diventano uno strato separato che si fa da parte per lasciare spazio ai contenuti e si espande quando servono più opzioni; agli sviluppatori sono state date API aggiornate per adottare il nuovo design.

Cosa prendere: due cose. La prima è che un design system vive se è facile da adottare: Apple non chiede di ridisegnare ogni app a mano, aggiorna i componenti e le app li ereditano. La seconda è la gerarchia: i contenuti (le foto delle camere, i prodotti, i dati) vengono prima, i comandi stanno al servizio. Vale per un sito di hotel come per una scheda prodotto.

Carbon (IBM): il design system per software complessi

Carbon è il design system open source di IBM, pensato per prodotti aziendali: tabelle di dati, moduli lunghi, filtri, pannelli di controllo. Sul sito ufficiale è organizzato in fondamenta (colore, tipografia, icone, accessibilità), componenti, pattern come moduli, login e ricerca, e una sezione dedicata alla visualizzazione dei dati, con il codice pronto per React e Web Components.

Una novità che mi interessa molto: IBM propone anche Carbon MCP, un modo per dare agli assistenti AI accesso a componenti, token, icone, linee guida e codice del sistema. In pratica, chi sviluppa con l'AI riceve suggerimenti già coerenti con il design system, invece di componenti inventati ogni volta.

Cosa prendere: se hai un gestionale o una piattaforma interna, guarda come Carbon documenta i pattern, non solo i componenti: come si compila un modulo lungo, come si mostrano gli errori, come si filtra una tabella. Sono le stesse domande che affronto quando progetto una dashboard leggibile.

Cosa hanno in comune i tre esempi di design system

• Fondamenta scritte: colori, testi, spaziature e icone hanno regole d'uso, non solo valori.
• Componenti con tutti gli stati: un pulsante non è un rettangolo, è normale, attivo, disabilitato, in caricamento.
• Accessibilità dentro il sistema: contrasti, dimensioni e uso da tastiera sono previsti nei componenti, così ogni nuova schermata parte già in regola.
• Design e codice allineati: quello che si disegna esiste anche nel codice, con lo stesso nome.
• Aggiornamento continuo: nessuno dei tre è "finito". Cambiano con i prodotti, e chi li usa riceve le novità senza ripartire da zero.

Come applicarlo a un sito, un e-commerce o un gestionale

Non serve copiare Material o Carbon: un'azienda locale ha bisogno di un sistema piccolo, che usa davvero. Il percorso che seguo di solito è questo:

• Inventario: raccolgo tutte le versioni di pulsanti, titoli, moduli e schede presenti oggi. Di solito sono molte più del necessario.
• Token di base: una palette per ruoli, una scala tipografica, una scala di spaziature.
• 10–15 componenti: quelli che tornano ovunque, con i loro stati.
• Una pagina di regole: breve, con esempi giusti e sbagliati, per chi aggiorna il sito o sviluppa nuove funzioni.

È lo stesso principio che ho applicato per Blueat, il cui sito è passato da vetrina istituzionale a e-commerce grazie a un'architettura a componenti, e per Sky Voice, dove l'esperienza resta la stessa su computer e smartphone. Ed è una delle tendenze di web design per il 2027: si progettano sistemi, non pagine singole.

Se il tuo prodotto è cresciuto e ogni schermata sembra fatta da qualcuno di diverso, possiamo partire da un inventario e costruire un design system su misura: ne parlo nella pagina su UI design e design system e, per i software aziendali, in UX/UI design di software e gestionali.

Fonti

• Android Developers – Dynamic colors (Material 3)
• Apple Newsroom – Apple introduces a delightful and elegant new software design (giugno 2025)
• IBM – Carbon Design System

Altri articoli su Siti web e design

• Dark mode: perché l'AI la preferisce
• Come progettare una dashboard leggibile
• Gestionale difficile da usare: 7 errori di UX e come correggerli
• UX audit: cos'è e come si fa (con checklist)
• Come creare un sito web: la guida da dove partire
• Come creare un sito di vendita online: la guida da dove partire
• Landing page o sito web: quando basta una pagina e quando serve il sito
• Sito web per professionisti e studi: cosa deve avere
• Sito immobiliare collegato al gestionale: gli annunci si aggiornano da soli
• Sito web per agenzie immobiliari: cosa deve avere
• Sito web per parrucchieri: cosa serve per riempire l'agenda
• Web agency o freelance a Rimini: come scegliere
• 10 domande da fare prima di scegliere chi rifà il tuo sito
• Sito web per ristoranti a Rimini: cosa deve avere
• Sito per stabilimenti balneari: la guida per la Riviera
• Natale: landing page regalo che vendono (il metodo Diffusione Luce)
• Tendenze web design e UX/UI 2027
• Restyling prima della stagione: il calendario per gli hotel della Riviera
• Sito per hotel: 10 elementi per più prenotazioni dirette
• Tutti gli articoli su Siti web e design

Approfondisci

• Realizzazione siti web a Rimini
• UI design e design system
• UX/UI design di software e gestionali
• Tutti gli articoli del blog

Domande frequenti