---
title: "رموز التباعد والقياس"
description: "سلّم التباعد، والحد الأدنى للأهداف، وأحجام الأيقونات، وعروض الحدود، وقياسات حلقة التركيز."
url: "https://tanrei.chnotchy.com/ar/tokens/space/"
last_updated: 2026-10-23T17:33:05.000Z
---

# رموز التباعد والقياس

> سلّم التباعد، والحد الأدنى للأهداف، وأحجام الأيقونات، وعروض الحدود، وقياسات حلقة التركيز.

رموز الأبعاد (tokens) تحت `tanrei.sys`. للإرشادات، اقرأ [التخطيط](https://tanrei.chnotchy.com/ar/foundations/layout/) و[إمكانية الوصول](https://tanrei.chnotchy.com/ar/foundations/accessibility/).

## التباعد

| الرمز | القيمة | معاينة |
| --- | --- | --- |
| `--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 |  |

مولَّد من `design/tokens/tanrei.light.tokens.json`, `tokens/sys/space.tokens.json`

## الحد الأدنى للهدف

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.

| الرمز | القيمة | معاينة |
| --- | --- | --- |
| `--tanrei-sys-target-minimum` | 32px |  |
| `--tanrei-sys-target-pointer` | 44px |  |
| `--tanrei-sys-target-spacing` | 8px |  |
| `--tanrei-sys-target-touch` | 48px |  |

مولَّد من `design/tokens/tanrei.light.tokens.json`, `tokens/sys/measure.tokens.json`

## الأيقونة

| الرمز | القيمة | معاينة |
| --- | --- | --- |
| `--tanrei-sys-icon-extra-small` | 16px |  |
| `--tanrei-sys-icon-large` | 32px |  |
| `--tanrei-sys-icon-medium` | 24px |  |
| `--tanrei-sys-icon-small` | 20px |  |

مولَّد من `design/tokens/tanrei.light.tokens.json`, `tokens/sys/measure.tokens.json`

## الحدود

| الرمز | القيمة | معاينة |
| --- | --- | --- |
| `--tanrei-sys-border-hairline` | 1px |  |
| `--tanrei-sys-border-thick` | 2px |  |

مولَّد من `design/tokens/tanrei.light.tokens.json`, `tokens/sys/measure.tokens.json`

## حلقة التركيز

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.

| الرمز | القيمة | معاينة |
| --- | --- | --- |
| `--tanrei-sys-focus-inner-width` | 0px |  |
| `--tanrei-sys-focus-offset` | 2px |  |
| `--tanrei-sys-focus-outer-width` | 2px |  |

مولَّد من `design/tokens/tanrei.light.tokens.json`, `tokens/sys/measure.tokens.json`