Centrim Design System — a token-first, accessible React component system.
Radius & borders
Rounding is moderate and consistent: enough to feel modern, never enough to become the personality of the interface. Borders do the quiet structural work that shadows should not.
What is this?
Seven radius steps (--ds-radius-none through --ds-radius-full) and three border widths (none, thin 1px, medium 2px). Radius is assigned by element size, not by taste.
When to use it
- Any surface with a visible boundary: control, card, panel, menu
- Pills and avatars, which use the full radius
- Separating regions where whitespace alone is ambiguous
How to use it
- Small controls take sm, default controls and cards take md, large panels take lg
- Nest a smaller radius inside a larger one, never the reverse
- Use thin borders by default; medium only for a deliberately heavier boundary
What to avoid
- Mixing two radii on the same element family
- Using radius-full on anything with wrapping text
- Stacking a border, a shadow and a background change to make one separation
Radius scale
Moderate rounding: 0 / 2 / 4 / 8 / 12 / 16 / full.
rounded-none
rounded-xs
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-full
Assignment
| Radius | Value | Applies to |
|---|---|---|
| radius-xs | 2px | Progress bars, tiny swatches, inline marks |
| radius-sm | 4px | Small buttons, compact inputs, table chips |
| radius-md | 8px | Default buttons and inputs, cards, popovers |
| radius-lg | 12px | Panels, dialogs, drawers, chart surfaces |
| radius-xl | 16px | Large marketing-weight panels and empty states |
| radius-full | 9999px | Pills, avatars, icon-only round controls, toggles |
Border widths
Thin is the default; medium marks a deliberately stronger edge.
border-width-none
border-width-thin
border-width-medium
Do & don't
Do
- Use border-border-subtle for internal separation and border-default for outer edges.
- Keep border-border-focus exclusively for focus rings.
- Match the radius of a nested element to its size, one step below its parent.
- Prefer a hairline divider over a full card when the content already reads as a group.
Don't
- Do not use border-border-strong as a decorative frame.
- Do not round a table's inner cells — only its outer surface.
- Do not apply radius-full to buttons with long labels.
- Do not introduce a new radius value outside the scale.
Why it is designed this way
Radius is size-driven so that a small control nested in a large panel never looks like a mistake. Keeping borders thin and semantic (subtle inside, default outside, focus reserved) means structure is legible in both themes without relying on shadow, which reads very differently on a dark canvas.