What is radius-scale?

This Claude skill automates the creation of professional border-radius design tokens, enabling designers and developers to generate consistent UI rounding scales. By calculating harmonious proportions from sharp to pill shapes, it ensures visual rhythm across web components and provides production-ready exports in CSS, Tailwind, or JSON formats, making it an essential tool for building robust design systems.

When should I use radius-scale?

radius-scale is useful in the following scenarios: • Design System Initialization: Establish a mathematically consistent border-radius scale for new projects to ensure aesthetic harmony across all UI elements. • Component Standardization: Define uniform rounding rules for various interface components like buttons, cards, inputs, and modals to maintain brand integrity. • Developer Handoff: Generate and export design tokens directly into Tailwind CSS configurations or CSS custom properties to bridge the gap between design and code. • Nested Radius Calculation: Use the built-in logic to calculate proportional inner and outer radii for nested containers, ensuring a balanced and professional look.

name	radius-scale
description	Generates border-radius tokens from sharp to pill shapes. Use when creating corner rounding systems, button radius, card corners, or input styling. Outputs CSS, Tailwind, or JSON.

Radius Scale Generator

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

Get base radius: Default 8px (balanced starting point)
Get ratio: How much each step grows (1.5-2 typical)
Ask steps: How many radius values (5-7 typical)
Ask unit: px or rem?
Ask format: CSS, Tailwind, or JSON?
Include full?: Add "full" (9999px) for pills? (default: yes)
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

radius-scale

When & Why to Use This Skill

Use Cases