# Spacing

> The spacing scale and corner radius of the Home Assistant interface.

Source: https://contributors.home-assistant.io/design/foundations/spacing/

Consistent spacing makes an interface calm and easy to scan. Home Assistant uses a spacing scale in steps of 4 pixels.

## Spacing scale

Use these tokens for padding, margins, and gaps. The small steps are for space inside components, the larger ones for space between them.

- `--ha-space-1`: 4px
- `--ha-space-2`: 8px
- `--ha-space-3`: 12px
- `--ha-space-4`: 16px
- `--ha-space-5`: 20px
- `--ha-space-6`: 24px
- `--ha-space-7`: 28px
- `--ha-space-8`: 32px
- `--ha-space-9`: 36px
- `--ha-space-10`: 40px
- `--ha-space-11`: 44px
- `--ha-space-12`: 48px
- `--ha-space-13`: 52px
- `--ha-space-14`: 56px
- `--ha-space-15`: 60px
- `--ha-space-16`: 64px
- `--ha-space-17`: 68px
- `--ha-space-18`: 72px
- `--ha-space-19`: 76px
- `--ha-space-20`: 80px

## Corner radius

Rounded corners are part of the character of Home Assistant. Cards and dialogs are generously rounded, small elements less so. Buttons and chips use the pill shape.

- `--ha-border-radius-sm`: 4px
- `--ha-border-radius-md`: 8px
- `--ha-border-radius-lg`: 12px
- `--ha-border-radius-xl`: 16px
- `--ha-border-radius-2xl`: 20px
- `--ha-border-radius-3xl`: 24px
- `--ha-border-radius-4xl`: 28px
- `--ha-border-radius-5xl`: 32px
- `--ha-border-radius-6xl`: 36px
- `--ha-border-radius-pill`: 9999px
- `--ha-border-radius-circle`: 50%
- `--ha-border-radius-square`: 0