Tokens

Radius

Six radius steps covering the full spectrum from sharp data-dense contexts to pill-shaped interactive elements. Cedar uses border-radius consistently — no arbitrary values.

radius/none
--radius-none·0px·↳ scale/0

Sharp edges — use for data-dense UIs like tables and grid cells.

radius/sm
--radius-sm·4px·↳ scale/100

Subtle rounding. Checkbox boxes, small chips, code blocks.

radius/md
--radius-md·8px·↳ scale/200

Standard rounding. Input fields, cards, data grid cells.

radius/lg
--radius-lg·12px·↳ scale/300

Prominent rounding. Buttons, dropdown menus, tooltips.

radius/xl
--radius-xl·16px·↳ scale/400

Large rounding. Feature cards, modals, large panels.

radius/full
--radius-full·999px·↳ scale/1800

Pill shape. Badges, chips, avatar frames.