Design Tokens Italia

I design tokens del Design system .italia definiscono, documentano e consentono l'applicazione di decisioni progettuali su larga scala, garantendo la coerenza di progettazione e sviluppo delle interfacce digitali della Pubblica Amministrazione italiana.

Rappresentano associazioni fra attributi, come colori, tipografia, spaziature e dimensioni e i loro valori. Per questo motivo sono considerati i fondamenti strutturali del design system.

Per maggiori informazioni consulta la documentazione ufficiale del design system.

Installazione

Si richiede Node >= 22

npm install design-tokens-italia

Utilizzo

CSS Custom Properties

@import 'design-tokens-italia/dist/css/variables.css';

.mio-elemento {
  color: var(--color-text-primary);
  padding: var(--spacing-md);
}

Variabili Sass

@import 'design-tokens-italia/dist/scss/variables';

.mio-elemento {
  color: $color-text-primary;
  padding: $spacing-md;
}

Contenuto del package

I design token sono classificati in tre livelli di profondità in base al contesto di applicazione:

• Token globali (tokens/global.json) - fondamenti visivi strutturali, usati come riferimento per i livelli semantici e specifici
• Token semantici (tokens/semantic.json) - decisioni progettuali riutilizzabili per più elementi e componenti
• Token specifici (tokens/specific.json) - rappresentazione esaustiva di ogni valore associato a un elemento o componente

I file CSS e SCSS nella cartella dist/ sono generati automaticamente dai file JSON tramite Style Dictionary.

Contribuire allo sviluppo

Setup locale

npm install

Workflow di aggiornamento

1. I design token vengono esportati da Figma utilizzando Tokens Studio for Figma in formato JSON
2. I file JSON vengono salvati nella cartella tokens/
3. Style Dictionary genera automaticamente le variabili CSS e SCSS:

npm run build

Questo comando processa i file JSON e genera:

• dist/css/variables.css - CSS Custom Properties
• dist/scss/_variables.scss - Variabili Sass