Numeric tokens
Original values beside a useful comparison, from the active preset.
Spacing with its representation
| Token | Value | px | Representation |
|---|---|---|---|
--spacing-4xs | .125rem | 2px | |
--spacing-3xs | .25rem | 4px | |
--spacing-2xs | .375rem | 6px | |
--spacing-xs | .5rem | 8px | |
--spacing-sm | .75rem | 12px | |
--spacing-md | 1rem | 16px | |
--spacing-lg | 1.5rem | 24px | |
--spacing-xl | 2rem | 32px | |
--spacing-2xl | 3rem | 48px | |
--spacing-3xl | 4rem | 64px | |
--spacing-4xl | 6rem | 96px | |
--spacing-5xl | 8rem | 128px |
Used on the Layout System guide.
Usage and interface
ThemeNumberVariableTable reads numeric tokens and their units from the preset. The spacing representation uses a hatched field and raised objects to expose each actual gap. Its table has stable token and value columns, quiet row separators, and a keyboard-focusable scroll region on narrow screens.
<ThemeNumberVariableTable namespace="spacing" representation="spacing" />The representation prop is optional. Breakpoints and Containers use the same data-driven table with descriptions, without the spacing specimen. Keep the native token value and reference unit visible in text, and place this inventory outside a measured layout demo. The numeric table review shows the current shared table.