# Spacing

## 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.

![](https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LzHFYmeIeIAXhaJNJng%2F-LzHHrggayhO9pa-Qjng%2F4-1-1-Spacing.png?alt=media\&token=ee78d1ef-ac0c-4862-9423-f135551c00d5)

[**Typography**](https://zoomuxd.gitbook.io/drift/typography#roboto-android) 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

{% tabs %}
{% tab title="🍎 iOS" %}

```swift
 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
    }
```

{% endtab %}

{% tab title="Second Tab" %}

{% endtab %}
{% endtabs %}