Layout / The visual dictionary

Safe area.

The portion of a display where essential content avoids system UI and hardware obstructions.

Also calledsafe insetsafe-area inset

See it in context

UI illustration

System area

Safe content

Safe inset

What it is

The portion of a display where essential content avoids system UI and hardware obstructions. Keep text and controls inside safe boundaries while allowing decorative backgrounds to extend farther.

When to use it

Use it around cutouts, rounded corners, home indicators, and persistent system bars.

Know the difference

A safe area reflects external obstructions; ordinary padding is a design spacing choice.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinuxwatchOSWear OStvOSAndroid TVvisionOS

Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS

iOS exposes safe-area guides; Android window insets and web env safe-area values address equivalent constraints.

Go to the source

Primary documentation for the pattern and its platform conventions.

Apple Human Interface Guidelines — Layout

FROM NAME TO NEXT BUILD

Put it into words.

Choose a device and an effect, then copy the whole description.

Building forPhone modelAnimation effectBrowse the effect library

Create a safe area. Keep text and controls inside safe boundaries while allowing decorative backgrounds to extend farther. Use it around cutouts, rounded corners, home indicators, and persistent system bars. Make it responsive and accessible, and follow the selected platform's interaction conventions.

Your copied description includes the component, device context, and selected animation timing.

See it in context

What it is

When to use it

Know the difference

Across platforms

Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS

Go to the source

You might also mean…

Padding

Status bar

Viewport