Sistemi colore che funzionano davvero
Un sistema colore non è una palette. È un insieme di regole che permettono a chiunque nel team di usare i colori in modo coerente, senza doverci pensare.
La maggior parte dei design system ha una palette di colori. Pochi hanno un vero sistema. La differenza è che un sistema definisce non solo quali colori esistono, ma come si usano: quale colore è per l'action primaria, quale per lo stato di errore, quale per i bordi interattivi. Senza queste regole, ogni designer fa scelte diverse e il prodotto risulta incoerente.
Il punto di partenza è separare i colori primitivi dai token semantici. I primitivi sono i valori grezzi: blue-500, green-300, red-700. I token semantici sono i ruoli: action-primary, feedback-error, border-interactive. I componenti usano solo i token, mai i primitivi direttamente. Questo permette di cambiare tema senza toccare un singolo componente.
L'errore più comune è creare troppi token. Se hai 40 varianti di grigio con nomi come gray-warm-subtle-hover, il sistema è inutilizzabile. La regola che seguo: se non riesci a spiegare la differenza tra due token in una frase, probabilmente sono la stessa cosa. Meno token, più coerenza.