Spaziature

A cosa servono

Le spaziature servono a:

1. organizzare un layout: definiscono la disposizione degli elementi all'interno delle pagine e dei componenti, garantendo il rispetto di una struttura chiara e coesa;
2. creare respiro: forniscono "respiro visuale" agli elementi, evitando sovrapposizioni indesiderate e migliorando la comprensione delle informazioni;
3. fornire coerenza: l'uso consistente delle spaziature contribuisce a garantire che i layout siano uniformi e armoniosi in tutte le pagine.

Come usarle

• definisci una gerarchia per gestire le distanze tra gli elementi in modo logico, utilizzando spazi più ampi tra le sezioni di una pagina e spazi più stretti all'interno di una stessa sezione o componente;
• usa i design token dedicati alle spaziature, rispettando la distinzione tra quelli per lo spazio verticale (spacing-stack), quelli per lo spazio orizzontale (spacing-inline) e infine quelli per lo spazio interno ad un elemento (spacing-inset);

I token per le spaziature

I token globali costituiscono la lista delle misure disponibili. Come tali, non devono essere utilizzati direttamente nel design o nel codice, in favore dei token semantici.

I token semantici per le spaziature sono suddivisi in base al caso d'uso:

• spaziatura verticale (stack) tra sezioni di una pagina o componenti;
• spaziatura orizzontale (inline) tra sezioni di una pagina o componenti;
• spaziatura interna (inset) a una sezione o componente.