Un design token è una variabile con un significato semantico, non solo un valore riutilizzabile. '--color-blue-500' non è un token — è un alias. '--color-brand-primary' è un token, perché esprime un ruolo nel sistema.
La struttura che uso: tre livelli. Livello 1 — valori primitivi ('--blue-500: #3b82f6'). Livello 2 — token semantici ('--color-action: var(--blue-500)'). Livello 3 — token per componente ('--btn-bg: var(--color-action)'). Ogni livello conosce solo il livello sopra.
Il vantaggio pratico: quando il brand cambia colore primario, aggiorno un solo token al livello 2. Tutto il sistema si aggiorna. Senza questa struttura, cerco e sostituisco ovunque — e qualcosa sfugge sempre.