Spacing

An 8-point base grid keeps rhythm consistent across every component and layout. All values are multiples of 4px. Reference tokens as Scale.* — never hardcode pixel values.

Grid rhythm

48121624324864

Dense range (4–16px) grows in 4px steps for precise component internals. Above 16px the scale shifts to 8px steps to govern layout-level spacing.

8-point base grid

The core rhythm is 8px. Every layout spacing value is a multiple of 8. This keeps vertical rhythm consistent across components and pages.

4px for precision

The 4px subdivisions handle tight internal spacing — icon gaps, input padding, inline label offsets — without breaking the larger rhythm.

Context governs density

Compact UI elements (4–12px), comfortable containers (16–24px), page-level layout (32px+). Density is intentional, not arbitrary.

Density in practice

Compact

Badges, chips, tags, inline icons — 8px padding, 4px gaps.

Comfortable

Buttons, cards, inputs, modals — 16px padding, 8px gaps.

Spacious

Page sections, hero areas — 32px padding, 16px gaps.

noneScale.00px--scale-0

2Scale.22px--scale-2

4Scale.44px--scale-4

8Scale.88px--scale-8

12Scale.1212px--scale-12

16Scale.1616px--scale-16

20Scale.2020px--scale-20

24Scale.2424px--scale-24

32Scale.3232px--scale-32

40Scale.4040px--scale-40

48Scale.4848px--scale-48

56Scale.5656px--scale-56

64Scale.6464px--scale-64

72Scale.7272px--scale-72

80Scale.8080px--scale-80

88Scale.8888px--scale-88

96Scale.9696px--scale-96

104Scale.104104px--scale-104

120Scale.120120px--scale-120

128Scale.128128px--scale-128

200Scale.200200px--scale-200

Compact — 4–12px

Icon-to-label gapScale.4–8Gap between an icon and its adjacent label text.Scale.4Scale.8

Inline element paddingScale.8–12Horizontal padding inside badges, chips, and tag elements.Scale.8Scale.12

Input helper text offsetScale.4Margin between an input and its helper or error text.Scale.4

Comfortable — 16–24px

Button paddingScale.16Horizontal padding inside primary, secondary, and tertiary buttons.Scale.16

Card internal paddingScale.16–24Padding inside card and panel components.Scale.16Scale.24

Form field gapScale.16Vertical gap between stacked form fields.Scale.16

Modal paddingScale.24Internal padding for dialog and bottom-sheet containers.Scale.24

Layout — 32–64px

Section vertical marginScale.32–40Vertical space between major page sections.Scale.32Scale.40

Page horizontal gutterScale.24–40Left/right padding on the main content container.Scale.24Scale.40