Imagine ArtDesign Tokens
The raw values — spacing, shadows, radii, and borders — that power every component in the system.
Spacing Scale
A consistent spacing scale used for padding, margin, and gaps across all components. Values increase progressively from 4px to 120px.
TokenValueClassPreview
14pxgap-1
26pxgap-2
38pxgap-3
412pxgap-4
516pxgap-5
620pxgap-6
724pxgap-7
828pxgap-8
932pxgap-9
1036pxgap-10
1140pxgap-11
1248pxgap-12
1356pxgap-13
1464pxgap-14
1572pxgap-15
1680pxgap-16
1796pxgap-17
18120pxgap-18
Elevation / Shadows
Box shadows that create visual depth and hierarchy. Use lighter shadows for subtle elevation and heavier shadows for prominent overlays.
Border Radius
Corner rounding values that range from sharp (0px) to fully circular (9999px). Components typically use rounded-4 (8px) or rounded-8 (16px).
Border Width / Stroke
Stroke weights for borders, dividers, and outlines. The default border uses 1px; thicker weights add visual emphasis.