dashbook
Foundations / Spacing

Spacing.

0.25rem base. Tailwind's scale, with named tokens for the values that show up in the system. Always use gap-* between siblings — never margin.

Scale

The entire system uses these 10 values. If you're reaching for a different number, you're probably wrong.

--space-1 p-1
4px 0.25rem

Tight inline gaps, icon-to-label

--space-2 p-2
8px 0.5rem

Button gap, chip padding

--space-3 p-3
12px 0.75rem

Card-internal gaps, table cells

--space-4 p-4
16px 1rem

Default block gap, form rows

--space-6 p-6
24px 1.5rem

Section gap — workhorse for layout

--space-8 p-8
32px 2rem

Page padding (desktop), section padding

--space-10 p-10
40px 2.5rem

Wide page chrome

--space-12 p-12
48px 3rem

Page padding (desktop), block separation

--space-16 p-16
64px 4rem

Hero pad, section breaks

--space-20 p-20
80px 5rem

Large hero, page-end breathing room

Page padding
Mobile
24px
Tablet
32px
Desktop
48px
Layout rules
  • Always use gap-* between siblings — flex or grid. Never margin-bottom on a child to space the next sibling. Margins compound, gaps don't.
  • Section gap is 24px (gap-6). Page padding is 24/32/48 for mobile/tablet/desktop. Maximum content width is 1800px.
  • Sidebar is 256px expanded, 56px collapsed. Always at left. The Dashbook portal itself uses the same 220px secondary sidebar pattern for sub-section navigation.
  • Hairline borders live in spacing, not in margin. Use border-top + padding-top: 1.5rem instead of margin-top to create separation.