spacing
Spacing scale based on the 8px mini-unit grid.
| Token | Value | Visual | Description |
|---|---|---|---|
| $spacing-01 | 0.125rem | 0.125rem | Spacing token — 2px. Use for the smallest internal padding or gaps between tightly-packed elements. |
| $spacing-02 | 0.25rem | 0.25rem | Spacing token — 4px. Use for compact padding within dense components. |
| $spacing-03 | 0.5rem | 0.5rem | Spacing token — 8px. Default small spacing unit for inset padding and icon gaps. |
| $spacing-04 | 0.75rem | 0.75rem | Spacing token — 12px. Use for comfortable inset padding in small components. |
| $spacing-05 | 1rem | 1rem | Spacing token — 16px. Standard spacing unit; use for typical component padding and gutters. |
| $spacing-06 | 1.5rem | 1.5rem | Spacing token — 24px. Use for section padding and medium gaps between components. |
| $spacing-07 | 2rem | 2rem | Spacing token — 32px. Use for group separation and larger layout gaps. |
| $spacing-08 | 2.5rem | 2.5rem | Spacing token — 40px. Use for generous padding between distinct sections. |
| $spacing-09 | 3rem | 3rem | Spacing token — 48px. Use for large vertical rhythm and section separation. |
| $spacing-10 | 4rem | 4rem | Spacing token — 64px. Use for major page section gaps. |
| $spacing-11 | 5rem | 5rem | Spacing token — 80px. Use for hero and large feature-area spacing. |
| $spacing-12 | 6rem | 6rem | Spacing token — 96px. Use for very large layout separations. |
| $spacing-13 | 10rem | 10rem | Spacing token — 160px. Use for the largest page-level spacing needs. |
fluid-spacing
Viewport-relative fluid spacing tokens.
| Token | Value | Visual | Description |
|---|---|---|---|
| $fluid-spacing-01 | 0 | Fluid spacing token — 0. Use when no fluid spacing is required. | |
| $fluid-spacing-02 | 2vw | Fluid spacing token — 2vw. Use for viewport-proportional small spacing in fluid layouts. | |
| $fluid-spacing-03 | 5vw | Fluid spacing token — 5vw. Use for medium fluid spacing that scales with the viewport. | |
| $fluid-spacing-04 | 10vw | Fluid spacing token — 10vw. Use for large fluid spacing in full-bleed or hero sections. |
container
Interactive element container height tokens.
| Token | Value | Visual | Description |
|---|---|---|---|
| $container-01 | 1.5rem | 1.5rem | Container height token — 24px. Minimum interactive target height for compact UI elements. |
| $container-02 | 2rem | 2rem | Container height token — 32px. Small interactive element height. |
| $container-03 | 2.5rem | 2.5rem | Container height token — 40px. Default interactive element height. |
| $container-04 | 3rem | 3rem | Container height token — 48px. Large interactive element height. |
| $container-05 | 4rem | 4rem | Container height token — 64px. Extra-large interactive element height. |
size
Named component size tokens (xs–2xl).
| Token | Value | Visual | Description |
|---|---|---|---|
| $size-xs | 1.5rem | 1.5rem | Component size token — XSmall, 24px. Use for the smallest component variant. |
| $size-sm | 2rem | 2rem | Component size token — Small, 32px. |
| $size-md | 2.5rem | 2.5rem | Component size token — Medium, 40px. Default component size. |
| $size-lg | 3rem | 3rem | Component size token — Large, 48px. |
| $size-xl | 4rem | 4rem | Component size token — XLarge, 64px. |
| $size-2xl | 5rem | 5rem | Component size token — 2XLarge, 80px. |
icon-size
Icon size tokens.
| Token | Value | Visual | Description |
|---|---|---|---|
| $icon-size-01 | 1rem | 1rem | Icon size token — 16px. Standard icon size for inline and UI icons. |
| $icon-size-02 | 1.25rem | 1.25rem | Icon size token — 20px. Use for slightly larger icons that need more visual weight. |
border-radius
Border radius tokens for component rounding.
| Token | Value | Visual | Description |
|---|---|---|---|
| $border-radius-00 | 0px | Border radius token — 0. No rounding; use for sharp-cornered elements. | |
| $border-radius-02 | 0.125rem | 0.125rem | Border radius token — 2px. Subtle rounding for small components like tags and badges. |
| $border-radius-04 | 0.25rem | 0.25rem | Border radius token — 4px. Default rounding for inputs, cards, and general components. |
| $border-radius-08 | 0.5rem | 0.5rem | Border radius token — 8px. Moderate rounding for panels, modals, and containers. |
| $border-radius-16 | 1rem | 1rem | Border radius token — 16px. Strong rounding for large cards or featured containers. |
| $border-radius-24 | 1.5rem | 1.5rem | Border radius token — 24px. Very rounded corners for pill-adjacent components. |
| $border-radius-max | 999999px | Border radius token — pill/fully rounded. Use for pill buttons, chips, and circular elements. |