09
1 min read
Radius & shape
The button is 6px. The card is 10. The input is 4. Nobody decided that. Those numbers just accumulated.
Shape is a language. Soft, sharp, pill. You pick it once, name it, and every surface references the same tokens. radius.sm, radius.md, radius.lg, radius.full.
Leftover pixels on the left. One token on the right. Button, card, and input finally agree.
Card
Learn morebutton6px
card10px
input4px
Card
Learn morebuttonradius.md
cardradius.md
inputradius.md
If a component needs its own radius, that is a component token pointing at a radius token. Not a raw pixel value in the CSS.
:root {
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
--button-radius: var(--radius-md);
--input-radius: var(--radius-md);
--card-radius: var(--radius-lg);
}:root {
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
--button-radius: var(--radius-md);
--input-radius: var(--radius-md);
--card-radius: var(--radius-lg);
}