Shape draft v0.2.0
Corner radii and stroke widths: how round components are and how thick their borders are.
Two scales from the Figma library (Dimension), as they are, shape every component: corner radius, from sharp to fully round, and stroke width, from none to the strong focus stroke. Components and the docs site read them directly, each component choosing its radius and border width in its own tokens.
Specimens
The tokens this foundation is built from, drawn from packages/tokens/src/: raw primitives and the semantic decisions on top of them. A token added to one of these groups appears here with no site change; values that differ per mode or per platform are shown next to each other.
Corner radius scale
Every radius on the same box.
corner-radius.* · 10 tokens · A box with that corner radius.
-
corner-radius.none0px -
corner-radius.3xs1px -
corner-radius.2xs2px -
corner-radius.xs4px -
corner-radius.sm8px -
corner-radius.md12px -
corner-radius.lg16px -
corner-radius.xl20px -
corner-radius.2xl24px -
corner-radius.full9999px
Stroke scale
Every raw stroke width.
stroke-width.* · 4 tokens · A box outlined at that width.
-
stroke-width.none0px -
stroke-width.sm0.6px -
stroke-width.md1.2px -
stroke-width.lg2.4px
Examples
Components following this foundation, rendered by their web templates, once per mode. States are forced with data-state, so what you see is exactly what the CSS defines, without a keyboard.