🎨 Design Systems

System odstępów — co to jest?

Zdefiniowany zestaw wartości odstępów (marginesy, paddingi, gapy), który zapewnia wizualną spójność i rytm w całym interfejsie.

Jak to działa?

Zamiast wpisywać losowe wartości (13px tu, 17px tam), korzystasz z ustalonej skali, np. 4, 8, 12, 16, 24, 32, 48, 64px. Każda wartość to wielokrotność bazowej jednostki (najczęściej 4px lub 8px). Na przykład, padding wewnątrz przycisku to 8px 16px, odstęp między polami formularza to 16px, a między sekcjami strony to 48px. Dzięki temu interfejs wygląda uporządkowanie i profesjonalnie.

Dlaczego to ważne?

Niespójna siatka odstępów sprawia, że interfejs wygląda "brudno", nawet jeśli poszczególne elementy są ładne. System odstępów to jedno z najprostszych usprawnień o największym wpływie wizualnym.