radius-scale

Overview

Generate consistent border-radius scales from sharp to pill-shaped. Creates harmonious rounding that scales appropriately with element size for visual consistency.

When to Use

• Setting up radius tokens for a new project
• Standardizing corner rounding across components
• Creating button/card/input styling consistency
• Building component-size-aware radius systems

Quick Reference

| 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 |

The Process

1. Get base radius: Default 8px (balanced starting point)
2. Get ratio: How much each step grows (1.5-2 typical)
3. Ask steps: How many radius values (5-7 typical)
4. Ask unit: px or rem?
5. Ask format: CSS, Tailwind, or JSON?
6. Include full?: Add "full" (9999px) for pills? (default: yes)
7. Generate: Create scale centered on base

Common Scales

| 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 |

Output Formats

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" }
  }
}

Contextual Radius

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);
}

Algorithm

The scale uses exponential growth from a base:

value = baseValue * (ratio ^ (step - midpoint))

For a 7-step scale with base 8px and ratio 2:

• Step 0 (3 below): 8 * 2^-3 = 1px
• Step 3 (mid): 8 * 2^0 = 8px
• Step 6 (3 above): 8 * 2^3 = 64px

Values are typically rounded to clean numbers.

Design Considerations

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.

Common Patterns

| 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 |