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.
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.
| Token | Value | Rounds |
|---|---|---|
--radius-card | 1.125rem | Cards, and the gray-border plates. |
--radius-panel | 1.25rem | Floating 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.