Spatiëringsschaal Genereren — Consistente Witruimte in Ontwerp

Willekeurige marge- en paddingwaarden leiden tot inconsistente interfaces. Een spatiëringsschaal definieert een beperkte set waarden gebaseerd op wiskundige verhoudingen — net als een typografische schaal.

T-shirt sizing aanpak

Tailwind CSS gebruikt een 4px-basisschaal: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64px (of 1, 2, 3, 4, 5, 6, 8, 10, 12, 16 in rem units). Deze eenvoudige lineaire schaal werkt uitstekend voor de meeste interfaces. Consistentie is waardevoller dan perfecte wiskundige progressie.

Exponentiële schalen

4, 8, 16, 32, 64px (verdubbeling) geeft meer dramatische witruimteverschillen. Material Design gebruikt 8px als basisenheid. Apple's Human Interface Guidelines gebruiken veelvouden van 4px. Kies één basisenheid en houd je eraan.

Implementatie met CSS variabelen

--spacing-1: 4px; --spacing-2: 8px; --spacing-4: 16px; --spacing-8: 32px. Design tokens koppelen spatiëringsvariabelen aan semantische namen. Zo kun je de gehele interface herschalen door de basis te wijzigen.