Border Radius
A consistent radius scale ensures shapes feel related throughout the product. Larger components use larger radii.
Scale
| Token | Value | Preview | Usage |
|---|---|---|---|
--mk-radius-none | 0px | No rounding | |
--mk-radius-sm | 2px | Subtle rounding (tags) | |
--mk-radius-base | 4px | Inputs, small elements | |
--mk-radius-md | 6px | Small buttons | |
--mk-radius-lg | 8px | Default buttons, cards | |
--mk-radius-xl | 12px | Larger cards, modals | |
--mk-radius-2xl | 16px | Panels, drawers | |
--mk-radius-3xl | 24px | Feature cards | |
--mk-radius-full | 9999px | Pills, badges, avatars |
Component defaults
| Component | Radius token |
|---|---|
| Button (sm/md) | --mk-radius-lg (8px) |
| Button (lg/xl) | --mk-radius-xl (12px) |
| Badge | --mk-radius-full |
| Input | --mk-radius-lg |
| Card | --mk-radius-xl |
| Modal / Dialog | --mk-radius-2xl |
| Avatar | --mk-radius-full |
| Tooltip | --mk-radius-md |