Spacing Scale Generator

Griglia 8pt · variabili CSS

Definisci il moltiplicatore base (4 o 8pt) e il numero di step e ottieni la scala completa. Valori in px, rem e variabili CSS pronte con visualizzazione grafica delle proporzioni.

Preset
Griglia base
Unità base 8px
4pt 8pt 12pt

usato per il calcolo rem

Naming

risultato es.: --space-4

Output
Includi :root
Valori rem
Commenti px accanto ai rem
Includi utility Tailwind
Formato SCSS
12 step · base 8px 

                                    

                                    

                                        

                                    

                                    

                                        

                                            
Cos'è la griglia 8pt
La griglia 8pt è il sistema di spaziatura più usato nel design di prodotto. Ogni valore di padding, margin, gap, width o height è un multiplo di 8 — oppure di 4 per i dettagli fini. Il risultato è un'interfaccia visivamente coerente dove tutti gli spazi «suonano bene insieme» senza doverci pensare.
L'origine è empirica: 8 è il minimo comune multiplo di 1, 2, 4 e 8, il che lo rende divisibile in molti contesti. Gli schermi a densità variabile (1x, 1,5x, 2x, 3x) renderizzano bene i multipli di 8 su pixel interi.
Quando usare 4pt invece di 8pt
La base 4pt è più adatta per componenti densi: tabelle, form, editor di codice, dashboard. La base 8pt è ideale per layout e pagine con gerarchia spaziale chiara.
4pt — micro
Badge, padding icone, separatori, gap interni a componenti compatti
8pt — standard
Padding card, gap tra elementi, spaziatura form — il default per la maggior parte dei casi
16pt — respiro
Padding di sezione, margini tra componenti logicamente distinti
32–64pt — layout
Spaziatura verticale tra sezioni, margini pagina, padding hero
WordPress e ACF
In un tema WordPress custom, inserisci le custom properties in style.css o in un partial tokens.css importato prima degli altri stili. Nei blocchi ACF con campi «gap» o «padding», mappa il valore scelto dall'utente su un nome della scala invece che su un valore px grezzo.
Figma: allinearsi alla scala
In Figma, vai su Edit → Preferences → Nudge amount e imposta Small nudge a 8 e Large nudge a 64. Quando definisci le variabili di spaziatura nel file, usa gli stessi nomi della scala generata qui: il passaggio Figma → WordPress diventa una corrispondenza 1:1 senza conversioni manuali.
                                        

                                    

                                

                            

                        

                    


                    

                        
La griglia 8pt è lo standard de facto nella progettazione di interfacce digitali: tutti gli spazi sono multipli di 8 pixel, garantendo coerenza visiva e allineamento preciso tra componenti Figma e CSS.
Questo generatore produce:
  • La sequenza completa di valori (4, 8, 12, 16, 24, 32, 48, 64, 96, 128...)
  • I valori in pixel, rem e unità CSS
  • Le CSS custom properties pronte (--spacing-1, --spacing-2, ecc.)
  • Varianti SCSS come mappa
  • Visualizzazione grafica delle proporzioni
Perché usare una scala di spaziatura
  • Coerenza visiva: multipli di una base (4/8pt) riducono il rumore visivo e velocizzano decisioni di layout.
  • Design ↔ codice: nomi token e valori rem allineati a Figma evitano disallineamenti in produzione.
  • Export flessibile: variabili CSS in :root, blocco @theme per Tailwind v4, opzione SCSS per pipeline Sass.
Usa questo generatore insieme al Design Token Formatter per un flusso token completo.