DocsFoundations
Spacing & layout
4 px grid, shell dimensions and touch targets.
A 4 px scale
Kiddosy has no spacing tokens of its own. It keeps Tailwind’s 4 px spacing scale and adds named sizes only where the layout needs a fixed dimension (the shell, cards, touch targets). That keeps one rhythm across the product without inventing a parallel scale.
14 px28 px312 px416 px520 px624 px832 px1040 px1248 px1456 px1664 px
Shell dimensions
Fixed sizes of the app frame are tokens, so the navbar, sidebar and bottom navigation line up on every screen.
| Token | Value |
|---|---|
navbar | 56 px phone · 75 px from 768 px |
sidebar | 224 px · 64 px collapsed |
bottom-nav | 64 px |
logo | 128 × 30 px · 111 × 26 px on phones |
auth-card | 644 px wide · form 422 px |
step-card | fixed height in every funnel: min. 520 px, up to 804 px |
Touch targets
Every control is at least 44 × 44 px, including the small button size. Where the visible element is smaller (a checkbox, a heart on a photo), the hit area around it is not.
Dashed outline = 44 px hit area