Costruire un design system in puro CSS: token, architettura e pragmatismo

Perché disegnare interfacce su Figma rallenta i freelance e come trasformare i figli illegittimi del codice in blocchi riutilizzabili.

Progettare su Figma va benissimo se hai un team di designer e sviluppatori da dover allineare. Lavorando da solista, di solito salto questo passaggio intermedio e apro direttamente l'editor di testo. Mi occupo dello sviluppo web in puro HTML e CSS per portare avanti il cronoprogramma reale, in modo da ragionare prima possibile su UI e UX.

L'idea di stilare questo manuale pratico sul Design System mi è riaffiorata riguardando un video di Code with Jason (canale YouTube ora rimarchiato CodeTV, un rebrand gelido che ha ucciso l'anima umana del progetto). Mostrava come i veri design system vivano nel codice e che possono essere definiti usando i CSS, non in un PDF statico chiuso in un server condiviso.

Un design system aziendale rappresenta una raccolta rigida di componenti riutilizzabili, pattern funzionali (form, tasti) e percettivi (spaziature, palette). Il suo scopo nudo e crudo è accelerare il rilascio del prodotto, abbassando il gap tecnico.

Il progetto: enterprise contro freelance

Gli esempi di Atlassian, Uber, Airbnb e altri marchi famosi per rilasciare e condividere al pubblico i propri design system devono gestire ecosistemi multi-prodotto.

Le piccole agenzie e i freelance, al contrario, devono cercare solo due cose: velocità d'esecuzione e riconoscibilità visiva. Non serve mappare l'intero sistema. Costruisci il primo modulo richiesto dalla roadmap e parti impostando solo le variabili CSS (sì, meglio chiamarle custom properties) che ti servono in quel momento.

L'infrastruttura dei token CSS a tre livelli

L'implementazione in puro CSS (Vanilla) svincola l'azienda da Tailwind, Bootstrap o qualsiasi framework destinato a morire tra tre anni. Il nucleo tecnologico ruota attorno alle Custom Properties (le variabili CSS), organizzate in una piramide a tre strati.

Token Globali (Primitivi): I valori grezzi. Numeri assoluti, codici esadecimali o percentuali. (--blue-50-hsl: 210, 100%, 50%;). Non si legano a nessuna logica.
Token Contestuali (Semantici): Il significato. Definiscono l'intento logico prendendo in pancia un valore globale (--brand-primary: hsl(var(--blue-50-hsl));). Se l'azienda domani cambia i colori corporate, modifichi la base e le dipendenze si aggiornano a cascata.
Token dei Componenti: La granularità. Legati esclusivamente all'elemento in corso (--btn-bg: var(--brand-primary);).

Tutto chiaro? Se non è chiaro, scrivimi e convincimi a creare una guida completa ai CSS. Che ci penso da un bel po'.

Due web designer sorridenti in uno studio caldo e luminoso che impilano simbolicamente grandi blocchi colorati per costruire un'interfaccia

Gestiamo i colori con HSL

:root {
  /* Global colors */
  --blue-900-hsl: 230 35% 7%;
  --red-500-hsl: 350 80% 50%;

  /* Semantics */
  --surface-main: hsl(var(--blue-900-hsl));
  --alert-error: hsl(var(--red-500-hsl));
}

.button {
  /* Components */
  --bg: var(--surface-main);
  background-color: var(--bg);

  /* Doniamo un'ombra realistica all'elemento */
  box-shadow: 0 4px 10px hsl(var(--blue-900-hsl) / 0.5);
}

Esistono manuali teorici che consigliano di modernizzare i token usando il nuovo spazio colore oklch. Sulla carta, i suoi valori sono cromaticamente perfetti, per questo ho provato a basare un mio framework interamente su questo standard. Il risultato? I compilatori pre-processori e gli strumenti di minificazione si bloccavano sistematicamente sulle sintassi oklch, portando alla rottura dei layout in produzione.

Sono quindi tornato all'HSL o al vecchio caro esadecimale. Nel mondo dello sviluppo UI/UX, l'efficienza reale vince sulla teoria. Trattare i colori in HSL offre un vantaggio tecnico enorme: isolando in una variabile esclusivamente la stringa dei numeri HSL e wrappandola nella funzione hsl() (come si vede nel codice sopra), sarai in grado di aggiungere un valore alpha (opacità) con un banale / 0.5.

CUBE CSS e l'organizzazione modulare

Un design system entra in crisi profonda (leggi: non si capisce più una mazza) se inizi a mescolare le scelte strutturali della pagina con l'estetica di bottoni e bordi. Ecco perché è utile abbracciare approcci modulari come CUBE CSS (CUBE sta per Composition Utility Block Exception), perfetti per chi studia l'architettura dei fogli di stile. Questi metodi suddividono tutto in tre blocchi chiari:

Layout: Definisce lo scheletro astratto (spesso usando CSS Grid o Flexbox) e gestisce solo l'impaginazione dei contenitori master.
Utility: Singole classi minime studiate per compiere un'operazione singola, riutilizzabili come mattoncini Lego (ad esempio, per l'allineamento o i margini).
Componenti: Elementi completi della user interface (UI) come Card, Alert o Navbar, costruiti assemblando le variabili semantiche e le utility.

Accessibilità e vantaggi del CSS puro

Lo studio della UI/UX deve porsi un obbligo inscindibile dal codice visivo: l'accessibilità. Affida tutte le misure (soprattutto per i testi) all'unità di misura rem e dimentica per sempre i px. I pixel impongono dimensioni rigide, mentre i rem permettono al browser di occuparsi del rendering dei testi in modo meno rigido e più proporzionale. Ciò garantisce migliore nitidezza e leggibilità.

Sviluppare l'infrastruttura del brand tramite CSS puro garantisce altri vantaggi:

Massima Manutenibilità: Anziché combettere i CSS, ne si sfrutta la natura "a cascata" facendo ereditare tutti gli stili principali dai pochi token primari. Il peso dei file ne esce alleggerito e molto performante.
Indipendenza sui Server: Funziona tutto senza vincoli. Un pannello React, un framework JS futuristico o un banale file HTML: quel che hai salvato non diventerà obsoleto.

Puoi usare tutti i programmi di grafica che vuoi ma un design system nato sui CSS rimane sul campo per sempre, permettendo ai team (o ai freelance) di scalare il prodotto senza colli di bottiglia. Questa èa la mia modesta opinione e la mia intenzione è di approfondire con una guida più dettagliata che preparerò in futuro.

Per completare questa breve guida, ho generato un video riassuntivo e un'infografica con NotebookLM.