Overview

Spacing is a fundamental building block of a seamless user experience. When used intentionally, spacing defines relationships between elements, reinforces content hierarchy, and enhances visual harmony in our products. The following guidelines will help our team design and build layouts that align with both context and user intent.

4 Pixel Base Unit

Our spacing system is built around a 4px base unit, which defines the spacing scale and maintains visual consistency.

Scale

Our spacing system is built on a limited set of values based on multiples of the 4px base unit. Our scale ranges from 0px to 120px, with finer increments at smaller values for greater flexibility and broader steps at larger values to maintain consistency and rhythm in our product UI.

Fixed Spacing Tokens

Our spacing token system is based on a 4px base unit, spacing-1. Each token represents a multiple of this base unit, with the number suffix indicating the multiplier.

For example, spacing-4 equals 16px (4 × 4px), while smaller values like 2px are represented as spacing-0-5 and 0px is represented as spacing-0.

Responsive Spacing Tokens

Responsive spacing tokens automatically adjust spacing values across different breakpoints (mobile, tablet, and desktop), providing a consistent and scalable approach to spacing in responsive layouts. Use responsive spacing tokens when you need spacing that adapts to different screen sizes, ensuring optimal spacing across all device types.

Each responsive token provides three breakpoint-specific values:

• Mobile: Base spacing value for mobile devices
• Tablet: Spacing value applied at tablet breakpoint and above
• Desktop: Spacing value applied at desktop breakpoint and above