Layout Guidelines
This page outlines the design tokens used in the VUER UI Kit, including spacing and border radius values.
Spacing Scale
The spacing system is based on a 4px base unit, providing consistent spacing throughout the interface.
| Variable | Value | Visual Example |
|---|---|---|
| --spacing-xxs | 2px | |
| --spacing-xs | 4px | |
| --spacing-sm | 6px | |
| --spacing-md | 8px | |
| --spacing-lg | 12px | |
| --spacing-xl | 16px |
Border Radius Scale
The border radius system provides consistent rounded corners across components.
| Variable | Value | Visual Example |
|---|---|---|
| --radius-uk-xs | 4px | |
| --radius-uk-sm | 6px | |
| --radius-uk-md | 8px | |
| --radius-uk-lg | 12px | |
| --radius-uk-xl | 16px |