Drift Design System
Search…
⌃K

Spacing

Consistent spacing creates visual balance that makes the user interface (UI) easier for zoomer & Zappers to scan. Apply consistent spacing to improve the quality of the UI.

The Spacing System

All spacing for components and typography is done in increments of 4 pixels(4px Scale). This 4px value forms the basic unit of measurement for spacing.
Not all elements will align to this scale, and that's OK. The scale is meant as a helpful place to start by limiting the choice of arbitrary values. When you deviate, it's important to try to use multiples of 8 (or 4) as it will enable natural alignment.
Typography doesn’t use a traditional baseline grid. Instead, line heights are set in increments of 4px and spacing is measured from the edges of the text boxes.

Exceptions

🧑🏻‍💻 Usage Guidelines

PX
Naming
2px
Extra Tight
4px
Tight
8px
Base tight
12px
Base
16px
Base Loose
24px
Loose
32px
Extra Loose
36px
Very Extra Loose
48px
--

Spacing Token

🍎 iOS
Second Tab
public enum Padding: CGFloat {
case k48 = 48
case k36 = 36
case k32 = 32
case k24 = 24
case k16 = 16
case k12 = 12
case k8 = 8
case k4 = 4
case k2 = 2
}