Radius
Choose a corner for a box, a control, or a chip, and see how stroke weight follows the look.
Corners come from two picks that a look makes. --brand-radius is the corner for boxes such as cards, inputs, and panels, and --brand-radius-control is the corner for buttons. Chips are a third job and pin one fixed step, so they keep the same corner in every look. This page shows the utility for each job and the catalog the picks come from.
Switch looks in the sidebar to see the picks move. Dry, Washi, and Ramson use 8px for both the box and the control. ICS uses 16px for boxes and a full pill for controls. Vistula uses 2px for both.
Consume
roundedrounded-lgrounded-controlrounded-full| Utility | Job | Value |
|---|---|---|
rounded and rounded-md | Boxes: cards, inputs, panels | --brand-radius |
rounded-lg | A box that holds other boxes | --brand-radius plus 4px |
rounded-control | Buttons | --brand-radius-control |
rounded-full | A circle or a pill that must stay round in every look | --radius-scale-full |
<div className="rounded-md" />
<button className="rounded-control" />
<span className="rounded-[var(--radius-scale-md)]" />Chip and the tag variant of Badge use the last line, --radius-scale-md, so they do not inherit the pill controls or the large box radius of ICS. Use that form only when a surface must keep one corner across looks.
Catalog
The catalog is where a look picks its two values. Components do not use these tokens directly, except for the chip pin above.
--radius-scale-2xs--radius-scale-xs--radius-scale-sm--radius-scale-md--radius-scale-lg--radius-scale-xl--radius-scale-full| Token | Size |
|---|---|
--radius-scale-2xs | 0.125rem (2px) |
--radius-scale-xs | 0.25rem (4px) |
--radius-scale-sm | 0.375rem (6px) |
--radius-scale-md | 0.5rem (8px) |
--radius-scale-lg | 0.75rem (12px) |
--radius-scale-xl | 1rem (16px) |
--radius-scale-full | 9999px |
Stroke
Stroke is the border weight, and it follows the weight of UI text. A look sets --brand-font-weight-ui and border-stroke derives from it, reaching 1px at weight 400 and 2px at weight 600, with the steps between interpolated. Washi and the dry default use 400, so their stroke is 1px. Ramson uses 500, so its stroke is 1.5px. ICS uses 600, so its stroke is 2px.
border-stroke border-borderWashi is 1px, Ramson is 1.5px, and ICS is 2px. Weight follows font-ui.
<div className="border-stroke border-border" />Pair border-stroke with border-border, and do not mix it with the plain border or border-2 utilities on the same surface, because those stay at a fixed width in every look. font-ui applies the same weight to text, so chrome text and chrome lines stay in step.
Next
Retune covers how a look sets these picks. Elevation covers the shadows that sit on these corners.