---
url: https://brand.okrado.com/foundations/spacing/
title: Spacing and density
description: The 4 px spacing scale and the two densities that switch row, control and card sizes.
kind: reference
owner: Ghassen-Hizem
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
---

# Spacing and density

> The 4 px spacing scale and the two densities that switch row, control and card sizes.

Spacing runs on a 4 px base. Component padding lives on 4, 8, 12, 16 and 20. Use the scale; a value that is not on it is a defect.

| Token               | CSS variable              | Value                            |
| ------------------- | ------------------------- | -------------------------------- |
| `ui.space.0`        | `--okr-ui-space-0`        | `0px`                            |
| `ui.space.1`        | `--okr-ui-space-1`        | `4px`                            |
| `ui.space.2`        | `--okr-ui-space-2`        | `8px`                            |
| `ui.space.3`        | `--okr-ui-space-3`        | `12px`                           |
| `ui.space.4`        | `--okr-ui-space-4`        | `16px`                           |
| `ui.space.5`        | `--okr-ui-space-5`        | `20px`                           |
| `ui.space.6`        | `--okr-ui-space-6`        | `24px`                           |
| `ui.space.8`        | `--okr-ui-space-8`        | `32px`                           |
| `ui.space.10`       | `--okr-ui-space-10`       | `40px`                           |
| `ui.space.12`       | `--okr-ui-space-12`       | `48px`                           |
| `ui.space.16`       | `--okr-ui-space-16`       | `64px`                           |
| `ui.space.20`       | `--okr-ui-space-20`       | `80px`                           |
| `ui.space.24`       | `--okr-ui-space-24`       | `96px`                           |
| `ui.space.32`       | `--okr-ui-space-32`       | `128px`                          |
| `ui.space.42`       | `--okr-ui-space-42`       | `168px`                          |
| `ui.space.0-5`      | `--okr-ui-space-0-5`      | `2px`                            |
| `ui.space.section`  | `--okr-ui-space-section`  | `clamp(96px, 5rem + 5vw, 168px)` |
| `ui.space.hero-top` | `--okr-ui-space-hero-top` | `clamp(40px, 2rem + 4vw, 104px)` |

## Density

`comfortable` is the default and is what marketing and docs use. `compact` is for tables and the app shell; set `data-density="compact"` on the root, and every token below changes. Coarse pointers keep targets of at least 44 px.

| Token                  | CSS variable                 | Comfortable | Compact |
| ---------------------- | ---------------------------- | ----------- | ------- |
| `ui.row.height`        | `--okr-ui-row-height`        | `40px`      | `32px`  |
| `ui.control.height`    | `--okr-ui-control-height`    | `36px`      | `28px`  |
| `ui.control.padding-x` | `--okr-ui-control-padding-x` | `12px`      | `8px`   |
| `ui.control.gap`       | `--okr-ui-control-gap`       | `8px`       | `4px`   |
| `ui.nav.item`          | `--okr-ui-nav-item`          | `32px`      | `28px`  |
| `ui.inset.card`        | `--okr-ui-inset-card`        | `16px`      | `12px`  |