Design token

I design token sono i valori con un nome su cui si costruisce un design system. Qui raccogliamo come nominarli e strutturarli, il formato W3C e i temi e i brand ricavati da un solo set di primitive.

4 articoli

Inizia da qui

Three stacked isometric planes: a dense grid of colour swatches at the bottom, a few tiles in the middle, one component card on top, joined by a lit line

Design

Convenzioni di naming dei design token: un sistema a 3 livelli

Uno schema a tre livelli (primitivo, semantico, di componente) tiene stabili i nomi dei token mentre il sistema cresce. Come strutturare e nominare ogni livello.

Design

Design token multi-brand: 6 passi da un solo livello di primitive

Un livello di primitive, un file di soli alias per ogni brand, componenti che leggono solo nomi semantici: sei passi sulla specifica DTCG 2025.10 e su Figma.

Thirteen black tiles on a white ground, one showing colour stripes and twelve showing size, weight, timing, easing, shadow and other token types

Design

Design token oltre il colore: comportamento e contesto nel 2026

Il formato DTCG stabile ha 13 tipi di token. Uno è il colore. Gli altri dodici portano misure, tempo, easing e stato, e quasi nessuno li definisce.

Three stacked bands: three lit tiles on top, six swatch pills in the middle and eighteen small chips at the bottom, each joined by lines to the one above

Design

Design token vs variabili CSS vs Tailwind, spiegato (2026)

Design token, variabili CSS e Tailwind stanno su tre livelli: significato, valori a runtime e classi utility. Come scegliere e come si combinano fra loro.

Torna agli Appunti