System spacingu
System spacingu definiuje odstępy między elementami interfejsu. Spójny spacing tworzy porządek wizualny i pomaga użytkownikowi grupować powiązane elementy.
Co to jest?
System spacingu to uporządkowany zbiór wartości odstępów (margin i padding) stosowanych w całym interfejsie. Bazuje na siatce bazowej (base grid) — zwykle 4px lub 8px — i definiuje skalę wielokrotności: 4, 8, 12, 16, 24, 32, 48, 64px. Spójny spacing sprawia, że interfejs wygląda profesjonalnie i jest łatwiejszy do skanowania wzrokiem.
Jak to działa?
Siatka bazowa (np. 4px) działa jak jednostka miary — wszystkie odstępy są jej wielokrotnościami. Mniejsze odstępy (4–8px) stosuje się między blisko powiązanymi elementami (ikona + tekst). Średnie (16–24px) między grupami elementów. Duże (32–64px) między sekcjami strony. Ta hierarchia wspiera zasadę bliskości z Gestalt — elementy bliżej siebie są postrzegane jako powiązane.
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
Carbon IBM używa siatki 8px (mini unit) z mnożnikami 2x, 3x, 4x, 5x. Material Design 3 bazuje na siatce 4px z increment spacing. Tailwind CSS oferuje skalę od 0 do 96 (384px) z krokiem 1 = 4px.