Border Radius
Border radius tokens and border width conventions.
Radius tokens
The design system uses a base --radius variable (12px) with derived sizes:
Border radius scale (base: 12px)
sm
rounded-sm
8px
md
rounded-md
10px
lg
rounded-lg
12px
| Token | Value | Class | Usage |
|---|---|---|---|
| lg | var(--radius) = 12px | rounded-lg | Cards, dialogs, large containers |
| md | calc(var(--radius) - 2px) = 10px | rounded-md | Buttons, inputs, badges |
| sm | calc(var(--radius) - 4px) = 8px | rounded-sm | Small elements, tags |
Border widths
The design system uses a thin default border for a refined appearance:
| Class | Value | Usage |
|---|---|---|
border (default) | 0.5px | Subtle card/input borders |
border-1 | 1px | Standard emphasis borders |
border-2 | 2px | Active/selected state borders |
Customizing
Override the base radius to change all derived values:
:root {
--radius: 8px; /* Smaller, more compact feel */
}