Shape tokens
The generated reference for the root radius, the six rungs derived from it, and the corner shape they are drawn with.
Overview
The whole shape vocabulary: one root radius, the multipliers applied to it, the
six named rungs those produce, and the corner shape. Generated from
tokens/shape.json by scripts/build-tokens.mts.
It is the shortest generated table on the site, which is the point. If this table ever grows past a screen, the system has started choosing radii instead of deriving them.
How it works
tokens/shape.json has three parts.
The root. One value, --radius. The product theme sets it generously; the
docs chrome sets it to zero. Everything else in this table is a function of it,
so a product that wants a different character changes exactly this.
The multipliers. One per rung, ascending. The generator emits the resolved value alongside the multiplier, so the table shows both what a rung is and what it is derived from. That is what makes it possible to tell at a glance whether somebody has broken the ladder by authoring a rung directly.
full is emitted as a fixed capsule value rather than a multiple, because it is
not a point on the ladder. It is a statement that the element is a capsule.
The corner shape. A single --opsin-corner-shape value, applied through
corner-shape under a support query. See Squircle.
The specimens on this page render each rung at the product theme's root value,
with the superellipse applied where the browser supports it. On a browser
without corner-shape, this page therefore shows you exactly what your readers
on that browser will see, rather than an idealised picture of it.
Using it
Read the multiplier column, not just the value. The resolved pixel figure changes with the root; the multiplier is the stable fact.
Use this page to check nesting arithmetic. inner = outer − padding needs
both numbers, and this table plus the
space table is where both live.
Do not copy a resolved value into a component. It is correct for one root radius, which means it is correct for the product theme and wrong for any theme derived from it. The docs chrome is one such theme, and there it would round something that is meant to be square.
If a rung is missing, the object is probably misclassified. Six rungs cover inline marks through full-screen surfaces. A request for a seventh is almost always a control that has been categorised as a card, or the reverse.
Tokens
| Token | What it controls | Used by |
|---|---|---|
| --opsin-radius-base0.875rem | The one radius the whole ladder is derived from. | accordion, alert-banner, button, callout, card, care-card, combobox, empty-state, field, menu, metric-tile, popover, questionnaire, radio-group, range-bar, reading-input, result-card, scale-input, segmented-control, select, skeleton, symptom-picker, tab-bar, textarea, timeline-entry, toast, tooltip, trend-sparkline |
| --opsin-radius-none0rem | Full-bleed media and anything that meets a screen edge. | no component |
| --opsin-radius-xs0.25rem | The floor for a nested corner. Tags inside a chip, a swatch inside a legend. | popover, range-legend, surface, symptom-picker, term, tooltip |
| --opsin-radius-sm0.4375rem | Inputs and small controls inside a card. | card, checkbox, combobox, consent-sheet, dialog, divider, field, log-sheet, menu, number-field, progress, reading-input, scroll-area, select, sheet, skeleton, slider, switch, tab-bar, tabs, toast, visually-hidden |
| --opsin-radius-md0.875rem | The default. Buttons, chips, cards. | alert-banner, button, callout, card, combobox, empty-state, menu, metric-tile, popover, questionnaire, radio-group, result-card, scale-input, segmented-control, select, skeleton, symptom-picker, tab-bar, textarea, toast, tooltip |
| --opsin-radius-lg1.3125rem | Cards on a phone, where the card is nearly the width of the screen. | accordion, card, combobox, disclaimer-note, menu, popover, result-card, scroll-area, segmented-control, select, surface, toast |
| --opsin-radius-xl1.75rem | Sheets and dialogs. Applied to the leading edge only when the surface meets a screen edge on the other side. | alert-banner, dialog, sheet |
| --opsin-radius-inner-cardmax(calc(0.875rem - 5 * var(--spacing)), var(--opsin-radius-xs)) | A box inside a card at the comfortable density (card padding p-5). | no component |
| --opsin-radius-inner-card-compactmax(calc(0.875rem - 4 * var(--spacing)), var(--opsin-radius-xs)) | A box inside a card at the compact density (card padding p-4). | no component |
| --opsin-corner-shapesuperellipse(4) | The squircle curvature. Degrades to `round` where corner-shape is unsupported. | alert-banner, callout, card, dialog, metric-tile, result-card, sheet |
| --opsin-border-hairline1px | Every boundary in the system by default. | button, surface |
| --opsin-border-emphasis2px | The boundary of a surface carrying `attention` or `urgent`, where the boundary is one of the three non-colour carriers of the status. | disclaimer-note, field, surface |
| --opsin-border-focus2px | The focus ring. Always 2px with a 2px offset, always in a colour measured against both the surface and the page behind it, and never removed. See /docs/accessibility/keyboard-and-focus. | accordion, body-map, button, card, checkbox, combobox, consent-sheet, link, menu, number-field, popover, questionnaire, radio-group, scale-input, scroll-area, segmented-control, select, slider, switch, symptom-picker, tab-bar, table, tabs, term, textarea, toast, tooltip |
| --opsin-border-focus-offset2px | Offset for the focus boundary. | accordion, body-map, button, card, checkbox, combobox, consent-sheet, link, menu, number-field, popover, questionnaire, radio-group, scale-input, scroll-area, segmented-control, select, slider, switch, symptom-picker, tab-bar, table, tabs, term, textarea, toast, tooltip |
Accessibility impact
- Publishing the multipliers makes the ladder auditable. A rung whose value is not its multiplier times the root has been overridden somewhere, and a generated table is the only way anyone would notice.
- Corner geometry reduces the usable hit area, so the target-size measurements on Density and touch are taken against the interactive area rather than the bounding box. The rung a control uses is an input to that measurement.
- Nothing here is measured for contrast, because radius does not affect it.
The
corner-shapesupport matrix is on Squircle. - The table is a real table, navigable cell by cell, as every generated table on this site is.
Related
- Radius scale says what each rung is for and the nesting rule.
- Squircle covers the corner shape and its degradation.
- Reference → Tokens has the same rows alongside every other family.
Squircle
The corner-shape property, the superellipse parameter opsinjs ships, and why this is the safest progressive enhancement in the whole system.
Space and density
The case for a deliberately generous scale in a product people use one-handed while worried, what it costs, and the four responsive modes that decide what fits.