Generatore Scala Spaziatura — Sistema di Spaziatura Coerente Gratis

Uno dei segni di un design system maturo è la coerenza degli spazi. Quando margin, padding e gap seguono una scala predefinita invece di valori arbitrari, l'interfaccia ha un ritmo visivo che la fa sembrare professionale e studiata. Il nostro generatore crea questa scala automaticamente.

Scale di Spaziatura Comuni

• Base 4px (T-shirt sizes): 4, 8, 12, 16, 24, 32, 48, 64, 96px. Lo standard di Tailwind CSS. Ottimo per UI dense.
• Base 8px: 8, 16, 24, 32, 48, 64, 96px. Più arioso, ottimo per landing page e marketing.
• Scala modulare con ratio: Come la scala tipografica, usa un ratio moltiplicativo per spaziature armoniche.

Come Usare il Generatore

1. Imposta il valore base (tipicamente 4px o 8px).
2. Scegli il metodo: lineare (multipli del base), modulare (ratio) o T-shirt sizes (XS-XXL).
3. Visualizza la scala con rettangoli proporzionali per una valutazione visiva immediata.
4. Esporta come CSS custom properties: --space-1: 4px, --space-2: 8px, ecc.