Quattro design system pubblici che vale la pena studiare, cosa pubblica ciascuno e un builder live che trasforma le tue scelte di colore, font e angoli in una style guide di una pagina con CSS.
Un design system è l'insieme condiviso di token, componenti e regole d'uso con cui lavora un team; una style guide per siti web ne è la forma più piccola, una pagina di colori, tipografia e componenti di base. Studia sistemi pubblici come USWDS, GOV.UK, Carbon e Atlassian, poi usa il builder qui sotto per creare una guida di partenza per il tuo sito.
Cosa contiene di solito un design system
Gli elenchi di design system rimandano altrove e si fermano lì. Questa pagina spiega cosa prendere da quattro sistemi pubblici ben documentati, poi ti dà un builder di style guide funzionante che disegna pulsanti, un campo di modulo, una card e un avviso a partire dalle tue scelte ed esporta le custom properties CSS corrispondenti.
Una style guide registra le regole visive: colori, font, uso del logo e tono. Un design system aggiunge i componenti in codice, i token e la documentazione che portano quelle regole nei prodotti, e di solito un processo per modificarle. La maggior parte dei siti piccoli ha bisogno solo della style guide più una manciata di componenti.
I sistemi governativi come USWDS e GOV.UK sono pubblici, spiegano le ragioni di ogni scelta e puntano sull'accessibilità. Carbon mostra come una grande azienda documenta componenti complessi. Atlassian è un buon modello per dare ai token nomi basati sul ruolo.
Diversi pubblicano codice open source, ma ognuno fissa la propria licenza e le proprie regole sul brand, e l'aspetto di un governo o di un'azienda su un sito estraneo può trarre in inganno i visitatori. Leggi la licenza e le regole sul brand sul sito del sistema prima di riutilizzarne componenti o aspetto.
Parti da un colore del brand, un quasi nero per il testo, uno o due grigi per bordi e superfici e un rosso per gli errori. Aggiungine altri solo quando un componente reale ne ha bisogno.
Ogni regola legge una custom property, quindi cambiare --brand o --radius ridisegna tutti i componenti in una volta.
US General Services Administration
Design token, componenti con indicazioni di accessibilità e implementazione
Scale di token per colore, tipografia e unità di spaziatura
UK Government Digital Service
Stili, componenti e pattern
Pattern per compiti completi, come chiedere i nomi
IBM
Componenti open source per React e Web Components, basati sul font IBM Plex
Tabelle di dati enterprise e layout densi
Atlassian
Design token nominati per fondamenta, proprietà e modificatore, come color.text
Uno schema chiaro di denominazione dei token
Sans di sistema
Serif di sistema
Arrotondato
Monospaziato
Scegli un colore del brand, una serie di font, un raggio degli angoli e un passo di spaziatura. Il foglio e il CSS qui sotto si aggiornano insieme.
Colore del brand
Serie di font
Raggio degli angoli: {n}px
Passo di spaziatura: {n}px
Testo bianco sul colore del tuo brand:
(rispetta 4.5:1 per il testo normale)
(solo testo grande, richiede 3:1)
(troppo basso per il testo)
Salva
Annulla
Titolo della card
Le card raggruppano un'idea con la sua azione.
Inserisci un indirizzo email nel formato [email protected]
Copia CSS
Design system pubblici che vale la pena studiare
Verificato sul sito ufficiale di ogni sistema, ottobre 2026
Sistema
Realizzato da
Cosa pubblica
Studialo per
Inizia gratis · Nessuna carta di credito richiesta