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

 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
    }

Second Tab