Foundations

Spacing & Layout

The spacing scale that backs every margin, padding, and gap in the system, plus the container widths and breakpoints layouts are built against.

Spacing scale

Each bar is rendered at the token's actual pixel width.

space-0

0px

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-5

20px

space-6

24px

space-8

32px

space-10

40px

space-12

48px

space-16

64px

space-20

80px

space-24

96px

Standard content widths used across cornerstone pages and composite layouts.

max-w-3xl

768px — reading-width content, forms

max-w-5xl

1024px — dashboard panels, focused pages

max-w-7xl

1280px — full app shells, wide tables

Standard Tailwind breakpoint defaults, used as-is.