Spacing
These spacing tokens serve as a standardized way to reference spacing and sizing scale in UI Kit React, ensuring consistency and efficiency in design implementation by adhering to a specific scale of common base-8 static values.
Core Spacing Tokens
| Name | Value | |
|---|---|---|
| --ui-kit-spacing-0 | 0px | |
| --ui-kit-spacing-1 | 1px | |
| --ui-kit-spacing-2 | 2px | |
| --ui-kit-spacing-4 | 4px | |
| --ui-kit-spacing-6 | 6px | |
| --ui-kit-spacing-8 | 8px | |
| --ui-kit-spacing-10 | 10px | |
| --ui-kit-spacing-12 | 12px | |
| --ui-kit-spacing-14 | 14px | |
| --ui-kit-spacing-16 | 16px | |
| --ui-kit-spacing-20 | 20px | |
| --ui-kit-spacing-24 | 24px | |
| --ui-kit-spacing-28 | 28px | |
| --ui-kit-spacing-32 | 32px | |
| --ui-kit-spacing-36 | 36px | |
| --ui-kit-spacing-40 | 40px | |
| --ui-kit-spacing-44 | 44px | |
| --ui-kit-spacing-48 | 48px | |
| --ui-kit-spacing-56 | 56px | |
| --ui-kit-spacing-64 | 64px | |
| --ui-kit-spacing-80 | 80px | |
| --ui-kit-spacing-96 | 96px | |
| --ui-kit-spacing-112 | 112px | |
| --ui-kit-spacing-128 | 128px | |
| --ui-kit-spacing-144 | 144px | |
| --ui-kit-spacing-160 | 160px | |
| --ui-kit-spacing-176 | 176px | |
| --ui-kit-spacing-192 | 192px | |
| --ui-kit-spacing-208 | 208px | |
| --ui-kit-spacing-224 | 224px | |
| --ui-kit-spacing-240 | 240px |