Generator Scală de Spațiere — Spațiu Alb Consistent în Design

Valorile arbitrare de margini și padding-uri duc la interfețe inconsistente. O scală de spațiere definește un set limitat de valori bazate pe rapoarte matematice — la fel ca o scală tipografică.

Abordarea dimensionării T-shirt

Tailwind CSS folosește o scală de bază de 4px: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64px (sau 1, 2, 3, 4, 5, 6, 8, 10, 12, 16 în unități rem). Această scală liniară simplă funcționează excelent pentru majoritatea interfețelor. Consistența este mai valoroasă decât progresia matematică perfectă.

Scale exponențiale

4, 8, 16, 32, 64px (dublare) oferă diferențe de spațiu alb mai dramatice. Material Design folosește 8px ca unitate de bază. Ghidurile Apple Human Interface folosesc multipli de 4px. Alege o unitate de bază și respectă-o.

Implementarea cu variabile CSS

--spacing-1: 4px; --spacing-2: 8px; --spacing-4: 16px; --spacing-8: 32px. Token-urile de design leagă variabilele de spațiere de nume semantice. Astfel poți rescala întreaga interfață modificând baza.