Tokens
Radius & shape
Seven semantic radii that change with the shape mode. The kit picks the mode (default here: Smooth); data-shape overrides it.
Pick a radius by role, not by number: soft is the control radius (buttons, inputs), rounded is cards and panels, crisp is small elements like focus rings and chips, pill is fully rounded badges. Utilities: .u-radius-*.
Preview shape
Radius
| Token | Sample | Sharp | Subtle | Smooth | Round | Pill |
|---|---|---|---|---|---|---|
| border.radius.none | 0 | 0 | 0 | 0 | 0 | |
| border.radius.sharp | 0 | 1.5px | 4.5px | 6px | 2px | |
| border.radius.crisp | 0 | 2px | 6px | 8px | 4px | |
| border.radius.soft | 0 | 3px | 9px | 12px | 9999px | |
| border.radius.pill | 0 | 9999px | 9999px | 9999px | 9999px | |
| border.radius.rounded | 0 | 4px | 12px | 16px | 16px | |
| border.radius.smooth | 0 | 6px | 18px | 24px | 24px | |
| border.radius.plush | 0 | 8px | 24px | 32px | 32px |
Outer radius
For a container that wraps a rounded child with padding. Each radius-outer-* is the matching inner radius plus radius-outer-spacing, so nested corners stay concentric. Use the outer token only on the wrapper; the child keeps the inner radius.
| Token | Sample | Sharp | Subtle | Smooth | Round | Pill |
|---|---|---|---|---|---|---|
| border.radius-outer.spacing | 20px | 20px | 20px | 20px | 20px | |
| border.radius-outer.sharp | 0 | 21.5px | 24.5px | 26px | 26px | |
| border.radius-outer.crisp | 0 | 22px | 26px | 28px | 28px | |
| border.radius-outer.soft | 0 | 23px | 29px | 32px | 9999px | |
| border.radius-outer.rounded | 0 | 24px | 32px | 36px | 36px | |
| border.radius-outer.smooth | 0 | 26px | 38px | 44px | 44px | |
| border.radius-outer.plush | 0 | 28px | 44px | 52px | 52px |
Generated from beam.manifest.json v0.1.0 · 2026-11-06T09:38:51.936Z · source 8dcb01076f81