Materials

Throughout the system, soft, delicate, semi-translucent materials appear on windows and overlays to convey a sense of depth and hierarchical structure. These designs also give users a sense of place within an app, but don’t distract from the content. The materials are designed to look great with a variety of colors and in a variety of contexts.

Consider using system materials. System materials can give your app a native feel and create a smooth transition when the user switches from another app to your app. The following material styles are available.

System material Usage
Prominent This is a dynamic material that displays the extra light material if the light appearance is enabled, or the extra dark material if the dark appearance is enabled. This is the recommended material for full-screen backgrounds.
Regular This is a dynamic material that displays the light material if the light appearance is enabled, or the dark material if the dark appearance is enabled. This is the recommended material for overlay views that partially obscure content onscreen.
Extra light This is good for full screen views that require a light color scheme.
Light This is good for overlay views that partially obscure content onscreen and require a light color scheme.
Extra dark This is good for full screen views that require a dark color scheme.
Dark This is good for overlay views that partially obscure content onscreen and require a dark color scheme.

Use lighter, translucent materials to elevate content and make it feel fresh. Darker materials evoke a heavier feeling in which content feels older, sinks to the background, and can hide shadows, thereby reducing depth and vigor. It’s difficult to tell what’s in focus when you can’t see the shadows.

For developer guidance, see UIBlurEffectStyle.