Rounding

Spectrum provides a flexible rounding system with a range of corner radius options that create visually balanced interfaces across different component sizes and layouts. By applying rounded forms consistently, Spectrum creates a cohesive visual style that feels approachable while adapting to a wide range of use cases.

A translucent rounded square with nested corner outlines, shown against a soft blue and gold gradient background, illustrating layered corner rounding.

Principles

A rounded triangle icon with softened corners on a light gradient background, illustrating the principle of avoiding sharp corners.
Four corner bracket shapes forming a square outline, with the top-right corner highlighted in green, illustrating visually balanced corner treatment.

No sharp corners

Spectrum generally uses rounded corners throughout the interface. Exceptions to this rule are rare and reserved for specialized cases when precision is especially important and helps communicate meaning or improve the accuracy of a visual representation. For example, the fill of a slider or progress bar may use a sharp edge to indicate a specific value or position more precisely.

Visually balanced corners

When rounded surfaces are nested inside one another, their corner radii should adjust in proportion to the space between them. This helps maintain visually consistent gaps and creates the appearance of concentric curves.

Learn more about creating balanced nested corners below.

Rounding system

A sequence of five corner shapes numbered 1 through 5, progressing from a sharp square corner to a fully rounded circular corner, illustrating the rounding system scale.
  1. Small
    Small controls such as checkbox, in-field button
  2. Medium (default)
    Most components, extra-small and small cards
  3. Large
    Medium and large cards, panels, action boxes, select boxes, toolbars
  4. Extra-large
    Dialogs
  5. Full
    Button, avatar, floating action button, search
Four gray rounded rectangles of increasing size, labeled with corner radius values 7 (7.111px), 8px, 9px, and 10 (10.125px), illustrating how corner radius scales with component size.

Rounding for component sizes

Corner radius values scale using a Major Second logarithmic scale, the same scale used throughout Spectrum's type system. This allows corner rounding to scale proportionally with component sizes and labels, helping components maintain a consistent visual shape across the interface. The values shown are base values, and the applied corner radius may vary by component.

Balancing nested corners

Spectrum uses different approaches to create visually balanced nested corners, depending on the relationship between the surrounding surfaces. Some scenarios follow a mathematical relationship, while others prioritize optical balance to achieve the intended visual result.

Diagram of a rounded card with a blue focus ring, labeling outer radius, inner radius, and the gap between the component edge and the focus ring.

Focus rings

Focus rings use an outer stroke separated from the component by a consistent gap. To maintain visually balanced spacing around every corner radius, Spectrum calculates the focus ring radius using the following formula:

<outer radius> - <gap> = <inner radius>

Diagram of a rounded card containing a small checkbox and heart icon, labeling the large container radius and the small nested component radius.

Nested components

Spectrum components are designed so that smaller objects use smaller corner radii and larger objects use larger corner radii. When components are nested, this creates optically balanced corners and spacing while maintaining consistent relationships throughout the design system.

Diagram of a dropdown input field, labeling the medium radius of the field and the small radius of the nested chevron button.

Applying rounding

When designing custom containers and surfaces, nested corners that always match the formula precisely can often create complexity and fragmentation. Instead, aim for overall visual harmony instead of numerical precision by nesting smaller corners within larger ones and creating gaps using Spectrum’s Spacing system.

Photo gallery UI with a "1 selected" toolbar, annotated with corner radius tokens: extra-large and medium for image tiles, large for the selection toolbar, and spacing values of 12px and 6px.

Example

This example shows how nested corner radii can vary depending on spacing. The thumbnails use a larger gap, so the corner radii are adjusted for optical balance rather than following the formula exactly. The action bar uses a smaller gap, allowing the formula to produce a visually balanced result.

Platform considerations

Spectrum iOS

Two pink rounded squares labeled "Off" and "On," comparing a standard rounded corner to a smoothed squircle-style corner, used as the reduced-motion alternative to the corner smoothing animation.

Corner smoothing

Use Apple’s continuous corner style for rounded shapes, such as rounded rectangles and capsules. Continuous corners create a smooth transition between curved and straight edges and align with the corner treatment used throughout iOS system interfaces.

Learn more in Apple’s Developer Documentation: RoundedCornerStyle

Static illustration of a pink rounded square with a black outline highlighting the nested outer and inner corner curves, used as the reduced-motion alternative to the concentric corners animation.

Concentric corners

Use Apple’s concentric rectangle APIs when working with nested shapes. Concentric corners automatically adapt to their container’s shape and spacing, helping maintain consistent curvature and visual alignment across layered interface elements.

Learn more in Apple’s Developer Documentation: ConcentricRectangle.

Tokens

Platform availability

These tokens are currently available on web. Guidance for additional platforms will be added in a future release.

Style
Token
Value
Small
corner-radius-small-default
4 px
Medium
corner-radius-medium-default
8 px
Large
corner-radius-large-default
10 px
Extra-large
corner-radius-extra-large-default
16 px
Full
no token, calculated with formula: height ÷ 2
--