Spacing
4px grid foundation with density multipliers per language. All spacing values snap to the 4px base grid for visual consistency.
Spacing Scale
Language Multipliers
Consumer
Generous, editorial
Multiplier: 1.75x
space-28px → 14px
space-416px → 28px
space-624px → 42px
space-832px → 56px
space-1248px → 84px
Merchant
Compact, efficient
Multiplier: 0.875x
space-28px → 7px
space-416px → 14px
space-624px → 21px
space-832px → 28px
space-1248px → 42px
Courier
Protective, glanceable
Multiplier: 1.5x
space-28px → 12px
space-416px → 24px
space-624px → 36px
space-832px → 48px
space-1248px → 72px
Spacing adapts to context needs:
- Consumer (1.75x): Generous spacing for leisurely browsing
- Merchant (0.875x): Compact spacing for information density
- Courier (1.5x): Large spacing for glanceable content while moving
4px Grid Rules
All spacing must align to 4px increments:
✅ Valid: 0, 4px, 8px, 12px, 16px, 20px, 24px...
❌ Invalid: 3px, 5px, 7px, 15px, 17px...
Exceptions
- 2px for hairline borders only
- 1px for focus rings only
Grid visible (4px)
Card Title
All padding, margins, and sizes are multiples of 4px. This ensures perfect alignment.
Note: All elements snap to the 4px baseline grid. Toggle the grid to verify alignment.
Touch Targets
Minimum interactive element sizes by language:
Consumer: 44px × 44px (WCAG AA minimum)
Merchant: 40px × 40px (compact density)
Courier: 56px × 56px (glove-friendly, WCAG AAA)