OverviewColorsTypographySpacingComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms

Visual Materials

16 materials • Apple Human Interface Guidelines

blur

Background blur effects for layered interfaces

Ultra Thin Material

Ultra Thin Material
.ultraThinMaterial

Lightweight overlays, subtle layering

iOSiPadOSmacOSvisionOS

Thin Material

Thin Material
.thinMaterial

Subtle layering, light overlays

iOSiPadOSmacOSvisionOS

Regular Material

Regular Material
.regularMaterial

Standard overlays, modal backgrounds

iOSiPadOSmacOSvisionOS

Thick Material

Thick Material
.thickMaterial

More separation from background

iOSiPadOSmacOSvisionOS

Ultra Thick Material

Ultra Thick Material
.ultraThickMaterial

Maximum separation, high contrast

iOSiPadOSmacOSvisionOS

Bar Material

Bar Material
.bar

Navigation bars, tab bars, toolbars

iOSiPadOSvisionOS

Glass Background

Glass Background
.glass

Window backgrounds in visionOS

visionOS

vibrancy

Vibrancy effects for text and fills on materials

Label Vibrancy

Aa
.label

Primary text on materials

iOSiPadOSmacOSvisionOS

Secondary Label Vibrancy

Aa
.secondaryLabel

Secondary text on materials

iOSiPadOSmacOSvisionOS

Tertiary Label Vibrancy

Aa
.tertiaryLabel

Tertiary text on materials

iOSiPadOSmacOSvisionOS

Fill Vibrancy

Aa
.fill

Fills and backgrounds on materials

iOSiPadOSmacOSvisionOS

Separator Vibrancy

.separator

Dividers on materials

iOSiPadOSmacOSvisionOS

elevation

Elevation levels for dark mode depth hierarchy

Base Elevation

0

Base layer, deepest content

iOSiPadOSmacOS

Elevated Level 1

1

Cards, grouped backgrounds

iOSiPadOSmacOS

Elevated Level 2

2

Popovers, sheets

iOSiPadOSmacOS

Elevated Level 3

3

Modals, alerts

iOSiPadOSmacOS