Translucency and Vibrancy

macOS apps use translucency and blurring to evoke a sense of depth, by enabling views and controls to hint at content residing in the background. They also use vibrancy, a subtle effect that dynamically blends the foreground and background colors using a careful balance of lightening and darkening techniques. This combination helps make foreground content stand out against any background.

• 

• 

Be prepared for vibrancy. Vibrancy affects all apps—even ones that don’t display any vibrant views—because some elements, such as menus, are vibrant by default.

Enable and disable vibrancy in your app when appropriate. System views and controls adopt vibrancy automatically based on their configuration and system settings. For custom views and controls, you choose whether to allow vibrancy. See how your views look with vibrancy enabled, and adopt it when appropriate.

Prefer system-provided elements and colors. Some views enable vibrancy dynamically based on their color. Labels, for example, use vibrancy when their color is set to Label Color or Secondary Label Color. For related guidance, see Labels and System Colors.

• 

• 

Background Blending Modes

The system offers two ways to blend background content.

Materials

The system-provided materials define the amounts of translucency, blurring, and vibrancy applied to your interface. The system provides many standard materials for you to use, each one with a designated purpose. For example, materials exist for matching the default look of windows, menus, popovers, sidebars, title bars, and many others.

Choose materials based on their semantic meaning. The names of materials reflect where they are meant to be used, so use materials for their intended purpose. For example, use the header view material for a custom header view.