Shape System
Corner radius tokens and shape families that create visual consistency across components. Shapes range from sharp corners to fully rounded pills.
8 tokens2 corner familiesContinuous Corners
Shape Scale Preview
From None (0pt) to Full (pill)
Apple's Continuous Corners
Apple uses continuous corner curves (also called "squircles") throughout iOS, iPadOS, and macOS. Unlike standard rounded corners, continuous corners have a smoother, more organic transition.
- App Icons: Use 60pt icons with ~39pt continuous corner radius on Home Screen
- Cards & Containers: 12-20pt radius depending on content type
- Buttons: Typically 8-12pt, or full radius for pill shapes
- Text Fields: 8pt radius for standard inputs
- Avatars: Circular (50% radius) for profile images
Key Principle: Use cornerCurve: .continuous in UIKit or .cornerRadius(..., style: .continuous) in SwiftUI.
Shape Scale Overview
Apple uses continuous corner curves (squircles) for a softer, more organic appearance. Corner radii scale with element size and vary by platform.
Corner Families
Shape Scale Reference
| Token | Value | Usage | Preview |
|---|---|---|---|
| None | 0pt | Sharp corners for edges that meet screen bounds. | |
| Extra Small | 4pt | Small inline elements, badges. | |
| Small | 8pt | Compact elements, form fields. | |
| Medium | 12pt | Standard interactive elements. | |
| Large | 16pt | Prominent containers, grouped content. | |
| Extra Large | 20pt | Modal presentations, large cards. | |
| System | 39pt (continuous) | App icons on Home Screen. | |
| Full | 50% | Circular elements, avatars. |