Spacing Scale Generator

Grille 8pt · variables CSS

Définissez le multiplicateur de base (4 ou 8pt) et le nombre de pas pour obtenir l'échelle complète. Valeurs en px, rem et variables CSS avec visualisation graphique des proportions.

Preset
Grille de base
Unite de base 8px
4pt 8pt 12pt

utilise pour le calcul rem

Nommage

ex. --space-4

Sortie
Inclure :root
Valeurs rem
Commentaires px a cote des rem
Inclure utilitaires Tailwind
Format SCSS
12 step · base 8px 

                                    

                                    

                                        

                                    

                                    

                                        

                                            
Qu'est-ce que la grille 8pt
La grille 8pt est le systeme d'espacement le plus repandu en design produit. Padding, margin, gap, largeur et hauteur suivent des multiples de 8 — ou de 4 pour les details fins. Le resultat : une interface visuellement coherente ou les espacements « sonnent juste » sans arbitrage pixel par pixel.
Huit est un multiple commun de 1, 2, 4 et 8, ce qui simplifie bien des decoupages. Les ecrans en densites variees (1x, 1,5x, 2x, 3x) alignent souvent les multiples de 8 sur des pixels entiers.
Quand preferer 4pt a 8pt
Une base 4pt convient aux interfaces denses : tableaux, formulaires, editeurs de code, tableaux de bord. La base 8pt sert surtout aux pages et aux hierarchies spatiales claires.
4pt — micro
Badges, padding d'icones, separateurs, ecarts internes aux composants compacts
8pt — standard
Padding des cartes, ecarts entre elements, formulaires — le defaut dans la plupart des cas
16pt — souffle
Padding de section, marges entre groupes de composants distincts
32–64pt — layout
Rythme vertical entre sections, marges de page, padding hero
WordPress et ACF
Dans un theme WordPress sur mesure, placez les custom properties dans style.css ou un partial tokens.css importe avant les autres styles. Dans les blocs ACF avec champs gap ou padding, mappez la valeur choisie vers un nom de l'echelle plutot qu'un px brut.
Figma : suivre l'echelle
Dans Figma, allez dans Edit → Preferences → Nudge amount et reglez Small nudge sur 8 et Large nudge sur 64. Pour les variables d'espacement, reprenez les memes noms que ce generateur : le passage Figma → WordPress reste une correspondance 1:1 sans conversion manuelle.
                                        

                                    

                                

                            

                        

                    


                    

                        
La grille 8pt est la norme de facto dans la conception d'interfaces numériques : tous les espacements sont des multiples de 8 pixels, garantissant cohérence visuelle et alignement précis entre les composants Figma et le CSS.
Ce générateur produit :
  • La séquence complète de valeurs (4, 8, 12, 16, 24, 32, 48, 64, 96, 128...)
  • Les valeurs en pixels, rem et unités CSS
  • Les propriétés CSS personnalisées prêtes (--spacing-1, --spacing-2, etc.)
  • Des variantes SCSS sous forme de map
  • Une visualisation graphique des proportions
Pourquoi une echelle d'espacement
  • Coherence visuelle : des multiples d'une base (4/8pt) reduisent le bruit et accelerent les choix de mise en page.
  • Design ↔ code : noms de tokens et rem alignes sur Figma limitent les ecarts en production.
  • Export souple : variables CSS dans :root, bloc @theme pour Tailwind v4, option SCSS pour les pipelines Sass.
Combinez cet outil avec le Formateur Design Token pour un flux token complet.