Shapes

The token export defines nine radii; a generator region uses six of them, each tied to a kind of thing. The pairing is skeleton: a reskin does not change it. (The other three — tiny 2, xxlarge 16, xxxlarge 24 — belong to the platform's own surfaces.)

  • rounded.none (0) — the bottom two corners of an expanded property card's header row (collapsed, the header is the whole card and takes all four)
  • rounded.small (4px) — tags, the 24px icon plates in section headers, the active item of a segmented control
  • rounded.medium (6px) — every control: input, select, button, segmented track, swatch
  • rounded.large (8px) — thumbnail cards, the zoom cluster, icon buttons, the collapsed pill, the 40px tool plate, and property cards
  • rounded.xlarge (12px) — dialogs and the floating rail
24 · sm 4
28 · md 6
32 · md 6
40 · lg 8
card · lg 8
dialog · xl 12

Radius follows height: 28 and 32px controls take 6px, the 40px call to action takes 8px, floating containers take 8 and 12, and a property card takes 8 on all four corners. The pairing matters more than the numbers — a 40px button at 6px looks unfinished, and at 20px it looks like a different product.

rounded.circle is the export's 100px, not 9999px: it only reaches a pill on something narrower than 200px, which every fully-round thing here is — a 36px switch track, a 12px thumb, the 68px Tips capsule. It is for true circles: the switch knob, the slider thumb, status dots. Two capsules exist in the system and no more: the switch track, because a rounded-rectangle switch reads as a checkbox, and the Tips button, which has to read as help rather than as one more action. Every other button is a rounded rectangle.

Corners are the only shape device. No notches, no angled cuts, no decorative borders, no gradient strokes.

Esc
Search all docs · to navigate · to open