🪜 Scale
A spacing scale system streamlines the design of page layouts and user interfaces.
Base unit
Our spacing system is built around a base unit of 4 pixels. This base unit determines the spacing scale and ensures visual consistency across products.
Spacing scale
Starting with a 4px base unit, the cornerstone of our spacing strategy is the spacing scale. This scale comprises a select range of space values, specifically designed for arranging UI elements uniformly.
Each value within this scale is derived as a multiple of the 4px base unit. The range extends from 0px up to 384px, providing ample flexibility while ensuring a consistent look and feel across various layout designs.
| Name | Value |
|---|---|
| Scale-0 | 0px |
| Scale-1 | 4px |
| Scale-2 | 8px |
| Scale-3 | 12px |
| Scale-4 | 16px |
| Scale-5 | 20px |
| Scale-6 | 24px |
| Scale-7 | 28px |
| Scale-8 | 32px |
| Scale-9 | 36px |
| Scale-10 | 40px |
| Scale-11 | 44px |
| Scale-12 | 48px |
| Scale-14 | 56px |
| Scale-16 | 64px |
| Scale-20 | 80px |
| Scale-24 | 96px |
| Scale-28 | 112px |
| Scale-32 | 128px |
| Scale-36 | 144px |
| Scale-40 | 160px |
| Scale-44 | 176px |
| Scale-48 | 192px |
| Scale-52 | 208px |
| Scale-56 | 224px |
| Scale-60 | 240px |
| Scale-64 | 256px |
| Scale-72 | 288px |
| Scale-80 | 320px |
| Scale-96 | 384px |