Odstępy i układ

Siatka 4 px, wymiary powłoki i cele dotyku.

Skala 4 px

Kiddosy nie ma własnych tokenów odstępów. Zostaje przy skali 4 px Tailwinda i dodaje nazwane rozmiary tylko tam, gdzie układ potrzebuje stałego wymiaru (powłoka, karty, cele dotyku). Dzięki temu cały produkt ma jeden rytm bez równoległej skali.

14 px
28 px
312 px
416 px
520 px
624 px
832 px
1040 px
1248 px
1456 px
1664 px

Wymiary powłoki

Stałe rozmiary ramy aplikacji są tokenami, więc navbar, sidebar i dolna nawigacja trzymają linię na każdym ekranie.

Token	Wartość
`navbar`	56 px telefon · 75 px od 768 px
`sidebar`	224 px · 64 px zwinięty
`bottom-nav`	64 px
`logo`	128 × 30 px · 111 × 26 px na telefonie
`auth-card`	644 px szerokości · formularz 422 px
`step-card`	stała wysokość w każdym lejku: min. 520 px, do 804 px

Cele dotyku

Każda kontrolka ma co najmniej 44 × 44 px, także mały rozmiar przycisku. Gdy widoczny element jest mniejszy (checkbox, serce na zdjęciu), obszar dotyku wokół niego nie jest.

Przerywana linia = obszar dotyku 44 px