Skip to content

Updated

Copy page

Safe area

The safe area is the part of the screen no system element covers: inside the status bar, the Dynamic Island or camera, the home indicator and the rounded corners. Content goes inside it, backgrounds may run past it.

Copy page

Updated

On this page
  1. In the kit
  2. Names
  3. iOS and Android
  4. In practice
  5. Related

In the kit

Where it appears in Appetite UI: Fitness app, Dashboard. The theme switch shows the dark frame.

Dashboard393 x 852 each, Light and Dark
Fitness app Dashboard screen: Today with a week strip and Wednesday 30 selected, Move 486 of 600 kcal, Exercise 38 of 45 min and Stand 9 of 12 h beside three activity rings, Heart rate 62 bpm and Sleep 7h 42m cards, and an Up next Legs and Power workout card on a photo above the tab barFitness app Dashboard screen in dark mode: Today with a week strip and Wednesday 30 selected, Move 486 of 600 kcal, Exercise 38 of 45 min and Stand 9 of 12 h beside three activity rings, Heart rate 62 bpm and Sleep 7h 42m cards, and an Up next Legs and Power workout card on a photo above the tab bar
Dashboard

What does each system call it?

The same idea under its Apple, Material 3 and Appetite UI name.

Names, system, name
SystemName
AppleSafe area and layout margins
Material 3Window insets and edge to edge
Appetite UIgrid/safe-area/top and grid/safe-area/bottom

What value does it take on iOS and Android?

Read from the kit’s Platform collection and its Material 3 pages, as the docs print them.

Platform variables, variable, iOS, Android
VariableiOS (ios-md)Android
grid/safe-area/top5952
grid/safe-area/bottom3424

In practice

The insets differ by device and by system, which is why a layout that hard codes 20 points at the top breaks on the next phone.

Appetite UI holds the insets as grid variables per Platform mode: the top inset is 59 on ios-md, 62 on ios-lg and 52 on android, and the bottom inset 34 on iOS and 24 on Android.