Radius
Eight corner steps in px, taken from the kit’s Radius collection. Carbon has no radius scale, so the kit is the only source these numbers have. The kit is also square-cornered: seven of the fifteen governed components that set a corner set it to zero.
The scale
8 of 8 steps match the kit snapshot. Each swatch is drawn with the token it names.
--graphite-radius-none0--graphite-radius-22px--graphite-radius-44px--graphite-radius-66px--graphite-radius-88px--graphite-radius-1616px--graphite-radius-2020px--graphite-radius-full999px
--graphite-radius-full is 999px, the kit’s own value rather than the more common 9999px. Either pills a box; this one stays faithful to the source so the drift check has nothing to forgive.
Reading the names
Here the suffix is the size. On the spacing scale it is not.
A square-cornered kit
Which governed components read which step, found by reading their stylesheets. A component moves between rows here by itself when its corner changes.
| Token | Value | Used by |
|---|---|---|
| --graphite-radius-none | 0 | Button, Menu, Modal, Notification, Popover, Progress bar, Toast |
| --graphite-radius-2 | 2px | Navigation menu, Slider, Tooltip |
| --graphite-radius-full | 999px | Tag, Toggle |
Circles are not a step
A circle is a shape, not a point on this scale, so it is written as 50%. Five governed components draw one.
| Component | Also uses | Why 50% |
|---|---|---|
| Data table | nothing | The box is square by construction, so radius-full would render the same. 50% says what is meant. |
| Radio button group | nothing | The box is square by construction, so radius-full would render the same. 50% says what is meant. |
| Slider | radius-2 | The box is square by construction, so radius-full would render the same. 50% says what is meant. |
| Tabs | nothing | The box is square by construction, so radius-full would render the same. 50% says what is meant. |
| Toggle | radius-full | The box is square by construction, so radius-full would render the same. 50% says what is meant. |
Rounding in Create
The Create page has a Radius control. It does not change the scale, and it does not change the site.
The kit default. Every corner in this box is square except the tag.
This is what the control on Create does, reduced to its mechanism. The chosen step is bound to --graphite-radius-none on the preview root, so every component that takes its corners from the zero step rounds with no edit to the component. Components on another step (Tag, Toggle, Tooltip) keep it. The override is scoped to the preview: the site chrome around it stays square.
Usage rules
Quoted from the Radius contract (1.1.0).
Rules
- The suffix is the pixel value and is left unpadded to keep it readable as one. Do not pad it to two digits to match
--graphite-space-NN, where the number means the opposite thing.
Never
- Never express a radius with a spacing token.
- Do not "correct"
--graphite-radius-fullto 9999px. It is 999px because the kit says 999. - Do not treat 50% as a radius step. A circle is a shape, not a point on this scale.
Next steps
The other length scale, and the place to try a rounded theme.