All pages

Foundations

Radius

The corner scale is legacy's vocabulary, taken by frequency across its ~1500 border-radius declarations, so rounded-sm through rounded-2xl always land on a value the product already uses. xs and 3xl close it at each end.

The palette is fixed. Every corner in the site's chrome is one of these steps or rounded-full — never an arbitrary rounded-[…]. A value between two steps takes the nearer one; a few pixels of corner is not worth a new number, and two dozen near-misses is how the scale got lost once already.

The list templates under components/list-styles are the exception: they reproduce the mobile runtime's renders and keep their own measured values.

The ladder

Seven steps, strictly monotonic. That is stated because it once wasn't: shadcn's default calc(var(--radius) ± Npx) chain, left to fall back with this app's --radius, produced a ladder where rounded-xl was larger than rounded-2xl. The steps are pinned instead, in components/list-styles/theme.css, which the site and the template runtime both compile — so a step means the same thing in either. Bare rounded is Tailwind's own 0.25rem, which happens to equal rounded-xs; write the step, so the class says which one it means. Tailwind's rounded-4xl is unset.

xssmmdlgxl2xl3xlfull
rounded-xs    0.25rem   hairline marks: line skeletons, inline code, mentions
rounded-sm    0.5rem    thumbnails, segments inside a track, small tiles
rounded-md    0.63rem   controls: header buttons, tracks, nav pills
rounded-lg    0.94rem   form controls, inputs, larger tiles, menu rows
rounded-xl    1.13rem   cards
rounded-2xl   1.25rem   floating panels: popovers, dialogs
rounded-3xl   1.5rem    the largest plates: composer, sheets, showcases
rounded-full            pills, avatars, dots

Named surfaces

Two corners are named for what they round rather than how much: cards and panels each keep one radius everywhere they appear.

TokenValueRounds
--radius-card1.125remCards, and the gray-border plates.
--radius-panel1.25remFloating panels — popover plates, sheets.

Nesting

A plate inside a track takes the step below the track's, so the gap between the two curves stays even: the theme switcher and the segmented filter are rounded-md tracks holding rounded-sm segments.