Apple Dev MCP Server

--- title: Materials platform: universal category: layout url: https://developer.apple.com/design/human-interface-guidelines/materials quality_score: 0.49 content_length: 9074 last_updated: 2025-07-20T03:43:14.540Z keywords: ["materials","universal","layout","visual","controls","color","design","navigation","interface","system","buttons"] has_code_examples: false has_images: false is_fallback: false --- June 9, 2025 Added guidance for Liquid Glass. Materials A material is a visual effect that creates a sense of depth, layering, and hierarchy between foreground and background elements. Materials help visually separate foreground elements, such as text and controls, from background elements, such as content and solid colors. By allowing color to pass through from background to foreground, a material establishes visual hierarchy to help people more easily retain a sense of place. Apple platforms feature two types of materials: Liquid Glass, and standard materials. Liquid Glass is a dynamic material that unifies the design language across Apple platforms, allowing you to present controls and navigation without obscuring underlying content. In contrast to Liquid Glass, the standard materials help with visual differentiation within the content layer. Liquid Glass Liquid Glass forms a distinct functional layer for controls and navigation elements — like tab bars and sidebars — that floats above the content layer, establishing a clear visual hierarchy between functional elements and content. Liquid Glass allows content to scroll and peek through from beneath these elements to give the interface a sense of dynamism and depth, all while maintaining legibility for controls and navigation. Don’t use Liquid Glass in the content layer. Liquid Glass works best when it provides a clear distinction between interactive elements and content, and including it in the content layer can result in unnecessary complexity and a confusing visual hierarchy. Instead, use standard materials for elements in the content layer, such as app backgrounds. An exception to this is for controls in the content layer with a transient interactive element like sliders and toggles; in these cases, the element takes on a Liquid Glass appearance to emphasize its interactivity when a person activates it. Use Liquid Glass effects sparingly. Standard components from system frameworks pick up the appearance and behavior of this material automatically. If you apply Liquid Glass effects to a custom control, do so sparingly. Liquid Glass seeks to bring attention to the underlying content, and overusing this material in multiple custom controls can provide a subpar user experience by distracting from that content. Limit these effects to the most important functional elements in your app. For developer guidance, see Applying Liquid Glass to custom views. Standard materials Use standard materials and effects — such as blur, vibrancy, and blending modes — to convey a sense of structure in the content beneath Liquid Glass. Choose materials and effects based on semantic meaning and recommended usage. Avoid selecting a material or effect based on the apparent color it imparts to your interface, because system settings can change its appearance and behavior. Instead, match the material or vibrancy style to your specific use case. Help ensure legibility by using vibrant colors on top of materials. When you use system-defined vibrant colors, you don’t need to worry about colors seeming too dark, bright, saturated, or low contrast in different contexts. Regardless of the material you choose, use vibrant colors on top of it. For guidance, see System colors. Consider contrast and visual separation when choosing a material to combine with blur and vibrancy effects. For example, consider that:Thicker materials, which are more opaque, can provide better contrast for text and other elements with fine features. Thinner materials, which are more translucent, can help people retain their context by providing a visible reminder of the content that’s in the background. For developer guidance, see Material. Platform considerationsi OS, i Pad OSi OS and i Pad OS define vibrant colors for labels, fills, and separators that are specifically designed to work with each material. Labels and fills both have several levels of vibrancy; separators have one level. The name of a level indicates the relative amount of contrast between an element and the background: The default level has the highest contrast, whereas quaternary (when it exists) has the lowest contrast. Separator vibrancy Except for quaternary, you can use the following vibrancy values for labels on any material. In general, avoid using quaternary on top of the thin and ultra Thin materials, because the contrast is too low. UIVibrancy Effect Style.label (default)UIVibrancy Effect Style.secondary Label UIVibrancy Effect Style.tertiary Label UIVibrancy Effect Style.quaternary Label You can use the following vibrancy values for fills on all materials. UIVibrancy Effect Style.fill (default)UIVibrancy Effect Style.secondary Fill UIVibrancy Effect Style.tertiary Fill The system provides a single, default vibrancy value for a separator, which works well on all materials.mac OSmac OS provides several standard materials with designated purposes, and vibrant versions of all system colors. For developer guidance, see NSVisual Effect View. Material. Choose when to allow vibrancy in custom views and controls. Depending on configuration and system settings, system views and controls use vibrancy to make foreground content stand out against any background. Test your interface in a variety of contexts to discover when vibrancy enhances the appearance and improves communication. Choose a background blending mode that complements your interface design. mac OS defines two modes that blend background content: behind window and within window. For developer guidance, see NSVisual Effect View. Blending Mode.tv OSUse thinner, translucent materials to elevate content and make it feel fresh. Thicker materials tend to hide shadows, reducing depth and making it harder to distinguish content clearly. You might consider using thicker materials if you want to evoke a heavier feeling or suggest that the content is older. For example, consider using standard materials in the following ways:Material Recommended forultra Thin Full-screen views that require a light color schemethin Overlay views that partially obscure onscreen content and require a light color schemeregular Overlay views that partially obscure onscreen contentthick Overlay views that partially obscure onscreen content and require a dark color schemeultra Thick Full-screen views that require a dark color scheme You can also use the prominent blur effect for adaptable, full-screen backgrounds in your tv OS app.vision OSIn vision OS, windows generally use an unmodifiable system-defined material called glass that helps people stay grounded by letting light, the current Environment, virtual content, and objects in people’s surroundings show through. Glass is an adaptive material that limits the range of background color information so a window can continue to provide contrast for app content while becoming brighter or darker depending on people’s physical surroundings and other virtual content. Video with custom controls. Content description: A recording of the Music app window in vision OS. The window uses the glass material and adapts as the viewing angle and lighting change. Play Notevision OS doesn’t have a distinct Dark Mode setting. Instead, glass automatically adapts to the luminance of the objects and colors behind it. Avoid using opaque colors in a window. Areas of opacity can block people’s view, making them feel constricted and reducing their awareness of the virtual and physical objects around them. If necessary, choose materials that help you create visual separations or indicate interactivity in your app. If you need to create a custom component, you may need to specify a system material for it. Use the following examples for guidance. The thin material brings attention to interactive elements like buttons and selected items. The regular material can help you visually separate sections of your app, like a sidebar or a grouped table view. The thick material lets you create a dark element that remains visually distinct when it’s on top of an area that uses a regular background. To ensure foreground content remains legible when it displays on top of a material, vision OS applies vibrancy to text, symbols, and fills. Vibrancy enhances the sense of depth by pulling light and color forward from both virtual and physical surroundings.vision OS defines three vibrancy values that help you communicate a hierarchy of text, symbols, and fills. Use UIVibrancy Effect Style.label for standard text. Use UIVibrancy Effect Style.secondary Label for descriptive text like footnotes and subtitles. Use UIVibrancy Effect Style.tertiary Label for inactive elements, and only when text doesn’t need high legibility.labelsecondary Labeltertiary Labelwatch OSUse materials to provide context in a full-screen modal view. Because full-screen modal views are common in watch OS, the contrast provided by material layers can help orient people in your app and distinguish controls and system elements from other content. Avoid removing or replacing material backgrounds for modal sheets when they’re provided by default.