Spacing Tokens

A consistent spacing scale based on a 4px base unit. Use generous negative space per the brand guidelines — elements should “float” in space.

Spacing Scale

Based on a 4px grid. Prefer larger values for padding and gaps to maintain the premium, airy feel.

spacing-0.5

2px

spacing-1

4px

spacing-1.5

6px

spacing-2

8px

spacing-3

12px

spacing-4

16px

spacing-5

20px

spacing-6

24px

spacing-8

32px

spacing-10

40px

spacing-12

48px

spacing-16

64px

spacing-20

80px

spacing-24

96px

Usage Guidelines

Recommended spacing values for common use cases.

Component Internal Padding

Cards, buttons, inputs: spacing-3 to spacing-4

Between Components

Sibling elements: spacing-4 to spacing-6

Section Spacing

Between major sections: spacing-8 to spacing-12

Page Margins

Content container: spacing-6 to spacing-16