Use when creating border radius tokens, rounding scales, or consistent corner systems. Supports contextual sizing.
/plugin marketplace add dylantarre/design-system-skills/plugin install design-system-skills@design-system-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Generate consistent border-radius scales from sharp to pill-shaped. Creates harmonious rounding that scales appropriately with element size for visual consistency.
| Level | Typical Value | Use Case |
|---|---|---|
| none | 0 | Sharp corners, tables |
| sm | 2-4px | Subtle rounding, inputs |
| md | 6-8px | Buttons, cards |
| lg | 12-16px | Modals, large cards |
| xl | 20-24px | Panels, containers |
| 2xl | 32px+ | Feature sections |
| full | 9999px | Pills, avatars, badges |
| Character | Base | Ratio | Result |
|---|---|---|---|
| Subtle | 4px | 1.5 | 2, 3, 4, 6, 9, 13 |
| Balanced | 8px | 2 | 2, 4, 8, 16, 32 |
| Rounded | 12px | 1.5 | 5, 8, 12, 18, 27, 40 |
| Soft | 16px | 1.5 | 7, 11, 16, 24, 36, 54 |
CSS Custom Properties:
:root {
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-full: 9999px;
}
Tailwind Config:
module.exports = {
theme: {
borderRadius: {
'none': '0',
'sm': '4px',
'md': '8px',
'lg': '16px',
'xl': '24px',
'2xl': '32px',
'full': '9999px',
}
}
}
JSON Tokens:
{
"radius": {
"none": { "value": "0" },
"sm": { "value": "4px" },
"md": { "value": "8px" },
"lg": { "value": "16px" },
"xl": { "value": "24px" },
"2xl": { "value": "32px" },
"full": { "value": "9999px" }
}
}
Larger elements often need proportionally larger radius. Consider semantic tokens:
CSS with contextual tokens:
:root {
/* Base scale */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
/* Semantic/contextual */
--radius-button: var(--radius-md);
--radius-input: var(--radius-sm);
--radius-card: var(--radius-lg);
--radius-modal: var(--radius-xl);
--radius-badge: var(--radius-full);
--radius-avatar: var(--radius-full);
}
The scale uses exponential growth from a base:
value = baseValue * (ratio ^ (step - midpoint))
For a 7-step scale with base 8px and ratio 2:
Values are typically rounded to clean numbers.
Consistency rule: Inner radius = outer radius - border/padding
/* Card with nested element */
.card {
border-radius: var(--radius-lg); /* 16px */
padding: 8px;
}
.card-inner {
border-radius: calc(var(--radius-lg) - 8px); /* 8px */
}
Squircle alternative: For iOS-style continuous curves, consider mask-image with SVG or libraries like squircle.js.
| Component | Recommended Radius |
|---|---|
| Icon buttons | sm or md |
| Text buttons | md |
| Input fields | sm or md |
| Cards | lg |
| Modals/dialogs | lg or xl |
| Tooltips | md |
| Badges/tags | full (pill) |
| Avatars | full (circle) |
| Containers | xl or 2xl |