---
title: "Space and measure tokens"
description: "The spacing scale, minimum targets, icon sizes, border widths and focus ring measurements."
url: "https://tanrei.chnotchy.com/tokens/space/"
last_updated: 2026-10-23T17:33:05.000Z
---

# Space and measure tokens

> The spacing scale, minimum targets, icon sizes, border widths and focus ring measurements.

Dimension tokens under `tanrei.sys`. For guidance, read [Layout](https://tanrei.chnotchy.com/foundations/layout/) and [Accessibility](https://tanrei.chnotchy.com/foundations/accessibility/).

## Space

| Token | Value | Preview |
| --- | --- | --- |
| `--tanrei-sys-space-space0` | 0px |  |
| `--tanrei-sys-space-space25` | 2px |  |
| `--tanrei-sys-space-space50` | 4px |  |
| `--tanrei-sys-space-space75` | 6px |  |
| `--tanrei-sys-space-space100` | 8px |  |
| `--tanrei-sys-space-space125` | 10px |  |
| `--tanrei-sys-space-space150` | 12px |  |
| `--tanrei-sys-space-space175` | 14px |  |
| `--tanrei-sys-space-space200` | 16px |  |
| `--tanrei-sys-space-space250` | 20px |  |
| `--tanrei-sys-space-space300` | 24px |  |
| `--tanrei-sys-space-space400` | 32px |  |
| `--tanrei-sys-space-space450` | 36px |  |
| `--tanrei-sys-space-space500` | 40px |  |
| `--tanrei-sys-space-space600` | 48px |  |
| `--tanrei-sys-space-space700` | 56px |  |
| `--tanrei-sys-space-space800` | 64px |  |
| `--tanrei-sys-space-space900` | 72px |  |

Generated from `design/tokens/tanrei.light.tokens.json`, `tokens/sys/space.tokens.json`

## Minimum target

The least sizes of what a person presses. minimum is the least height (and, for an icon-only control, width) anything pressable is drawn at; touch and pointer are the least hit areas, which a control reaches past what it draws where it stands alone.

| Token | Value | Preview |
| --- | --- | --- |
| `--tanrei-sys-target-minimum` | 32px |  |
| `--tanrei-sys-target-pointer` | 44px |  |
| `--tanrei-sys-target-spacing` | 8px |  |
| `--tanrei-sys-target-touch` | 48px |  |

Generated from `design/tokens/tanrei.light.tokens.json`, `tokens/sys/measure.tokens.json`

## Icon

| Token | Value | Preview |
| --- | --- | --- |
| `--tanrei-sys-icon-extra-small` | 16px |  |
| `--tanrei-sys-icon-large` | 32px |  |
| `--tanrei-sys-icon-medium` | 24px |  |
| `--tanrei-sys-icon-small` | 20px |  |

Generated from `design/tokens/tanrei.light.tokens.json`, `tokens/sys/measure.tokens.json`

## Border

| Token | Value | Preview |
| --- | --- | --- |
| `--tanrei-sys-border-hairline` | 1px |  |
| `--tanrei-sys-border-thick` | 2px |  |

Generated from `design/tokens/tanrei.light.tokens.json`, `tokens/sys/measure.tokens.json`

## Focus ring

The focus indicator, from the control outwards: \`offset\` (negative = drawn inside the control), then an optional inner stroke in sys.color.focus-ring-inner, then the outer stroke in sys.color.focus-ring. Never animated.

| Token | Value | Preview |
| --- | --- | --- |
| `--tanrei-sys-focus-inner-width` | 0px |  |
| `--tanrei-sys-focus-offset` | 2px |  |
| `--tanrei-sys-focus-outer-width` | 2px |  |

Generated from `design/tokens/tanrei.light.tokens.json`, `tokens/sys/measure.tokens.json`