> For the complete documentation index, see [llms.txt](https://zoomuxd.gitbook.io/drift/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zoomuxd.gitbook.io/drift/foundations/spacing.md).

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

![](/files/-LzHHrggayhO9pa-Qjng)

[**Typography**](/drift/foundations/typography.md#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 %}