Show me more details about concentric shapes
Asked on 2025-07-10
1 search
Concentric shapes are a key element in Apple's new design system, as discussed in the session Get to know the new design system. Concentric shapes are used to create layouts where shapes nest comfortably within each other by aligning radii and margins around a shared center. This approach helps maintain optical balance and is particularly useful in creating touch-friendly layouts.
There are three types of shapes used to build concentric layouts:
- Fixed Shapes: These have a constant corner radius.
- Capsules: These use a radius that's half the height of their container, naturally supporting concentricity.
- Concentric Shapes: These calculate their radius by subtracting padding from the parent container.
Capsules are prominently used in the system for elements like sliders, switches, bars, buttons, and the rounded corners of grouped table views. They bring focus and clarity, especially in touch-friendly environments, while in dense desktop environments, they are best used for standout actions.
For more details, you can refer to the session Get to know the new design system.
Get to know the new design system
Dive deeper into the new design system to explore key changes to visual design, information architecture, and core system components. Learn how the system reshapes the relationship between interface and content, enabling you to create designs that are dynamic, harmonious, and consistent across devices, screen sizes, and input modes.
Build a SwiftUI app with the new design
Explore the ways Liquid Glass transforms the look and feel of your app. Discover how this stunning new material enhances toolbars, controls, and app structures across platforms, providing delightful interactions and seamlessly integrating your app with the system. Learn how to adopt new APIs that can help you make the most of Liquid Glass.
Build an AppKit app with the new design
Update your AppKit app to take full advantage of the new design system. We’ll dive into key changes to tab views, split views, bars, presentations, search, and controls, and show you how to use Liquid Glass in your custom UI. To get the most out of this video, we recommend first watching “Get to know the new design system” for general design guidance.