Spacing and layout

A 4px grid with ample space. Interactive controls share one 40px height so rows line up.

Rules

1All spacing is a multiple of 4px. Use Tailwind steps 1, 2, 3, 4, 6, 8, 10, 12 and 16.
2Buttons, inputs and select triggers are 40px tall (h-10) by default, so they align in a row.
3Inside a component, related elements sit 8px apart (gap-2). Label to field: 8px. Field to field: 20px (gap-5).
4Cards use 24px padding and 24px between header, content and footer.
5List items (sidebar, menu, select options) are 36px tall. Sidebar items are 4px apart, popup items 2px apart, with 6px panel padding.
6Page sections are separated by 40px or more (gap-10). Grids of cards use 16px (gap-4) or 24px (gap-6).
7Pages keep 24px side padding on small screens and cap content width at 1152px (max-w-6xl) or 1280px for dashboards.

14px

28px

312px

416px

520px

624px

832px

1040px

1248px

1664px

Element	Value	Class
Button, input, select height	40px	`h-10`
Button side padding	20px	`px-5`
Input side padding	14px	`px-3.5`
Label to field	8px	`gap-2`
Field to field	20px	`gap-5`
Card padding and inner gap	24px	`--card-spacing: 6`
Badge height and padding	24px, 10px	`h-6 px-2.5`
Sidebar item, gap	36px, 4px	`h-9 gap-1`
Menu and select item, gap, panel padding	36px, 2px, 6px	`py-2 my-0.5 p-1`
Card grid gap	16px or 24px	`gap-4 / gap-6`
Page sections	40px+	`gap-10`