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 and Accessibility.
| 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
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
| 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
| 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
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