I token di design sono la singola fonte di verità per le decisioni visive in un prodotto. Codificano colore, spaziatura, tipografia e movimento in variabili nominate che i componenti utilizzano.
Perché i token sono importanti
Senza token, una modifica al colore principale del brand richiede di cercare in centinaia di file. Con i token, un aggiornamento di variabile si propaga ovunque — dai pulsanti agli avvisi alle barre di navigazione.
I token colmano anche il divario tra strumenti di design e codice. Un designer nomina un colore surface-brand in Figma; un sviluppatore utilizza var(--surface-brand) in CSS. Parlano la stessa lingua.
Esempi pratici
Considera un componente che ha bisogno di uno sfondo, un bordo e testo. Invece di codificare staticamente #1a56db, #e1effe, e #1e429f, il componente fa riferimento a --color-primary, --surface-primary-subtle, e --text-primary-strong. Quando il brand evolve, la palette cambia — il componente no.
Categorie di token
Colore — palette di brand, semantiche e neutre
Spaziatura — una scala consistente da 2px a 64px
Tipografia — dimensioni dei font, pesi e altezze di linea
Raggio — dagli angoli netti a quelli completamente arrotondati
Ombra — livelli di elevazione per profondità e gerarchia
Movimento — curve di easing e passi di durata
La maggior parte delle citazioni trovate su Internet sono probabilmente generate da un'IA.
La funzione content_image() genera un img con loading="lazy" per impostazione predefinita, e lo racchiude in un elemento figure quando è fornita una didascalia.
Senza didascalia — un'immagine semplice, a larghezza intera.
Con didascalia — racchiusa in una figura con una figcaption.
Una figura con una figcaption — usala per accreditare le fonti o aggiungere contesto ai contenuti visivi.
Media con testo
Immagine che occupa un terzo del layout.
Usa content--media per posizionare un'immagine e del testo affiancati. L'immagine prende un terzo della larghezza, il testo due terzi.
Questo layout si adatta a citazioni selettive, definizioni illustrate o a qualsiasi breve blocco editoriale in cui l'immagine rinforza il testo senza dominarlo.
Capolettera
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Barra meta
Comprendere i token di design
I token di design sono la singola fonte di verità per le decisioni visive in un prodotto. Codificano colore, spaziatura, tipografia e movimento in variabili nominate che i componenti utilizzano.
L'altro modo, quando il primo fallisce: la domanda, poi un valore copiato in un clic, o un link. Proprio sotto a ciò che rappresenta, allineato con esso.
Non riesci a scansionare? Digita questa chiave nell'app:JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP
