Spacing & Layout
Three guides here, under Border and Spacing in the sidebar: border widths, border radii, and a spacing scale.
Border Width
These tokens control how thick your borders and outlines are. A thin 1px line reads as a subtle separator; a 4px or 8px border is more structural or attention-grabbing.
Click Default to load a standard starting scale with values at 0, 1, 2, 4, and 8 px. Each step has a slider and a live box preview so you can see the weight visually. The scale label (like 2) and the token name (like border-2) are both shown per row.
Border Radius
This controls how rounded your corners are, from sharp squares up to pills and circles.
Click Default to load the standard scale. Default values:
| Step | Token name | Value |
|---|---|---|
| sm | radius-sm | 6px |
| md | radius-md | 8px |
| lg | radius-lg | 10px |
| xl | radius-xl | 14px |
Adjust any step with the slider or by typing a value directly.
Spacing Size
The spacing scale covers padding, margins, gaps, and any other space between elements. It uses a point-based system. Click Default to load the standard Tailwind-style scale:
| Token | Value |
|---|---|
| 0 | 0px |
| px | 1px |
| 0.5 | 2px |
| 1 | 4px |
| 1.5 | 6px |
| 2 | 8px |
| 4 | 16px |
| 6 | 24px |
| 8 | 32px |
Each step has a slider and a numeric input. Values are in px.