# 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.

Page: https://www.appetiteui.com/academy/glossary/safe-area. Safe area insets on iPhone and Android. Also called Window insets.

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Safe area and layout margins | Window insets and edge to edge | grid/safe-area/top and grid/safe-area/bottom |
| Top safe area | 59 pt | 52 dp | `grid/safe-area/top` |
| Bottom safe area | 34 pt | 24 dp | `grid/safe-area/bottom` |

## 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.

## Questions

### What are the safe area insets on iPhone and Android?

In Appetite UI the top inset is 59 points in the ios-md Platform mode (62 in ios-lg, the larger iPhones) and 52 dp on Android; the bottom inset is 34 on iOS and 24 on Android. A layout reads them from the Platform mode of its frame.

### Should a background stay inside the safe area?

No. Content and controls stay inside it; backgrounds, photos and scrolling content may run under the status bar and the home indicator, which is what Android calls edge to edge.

## Sources

1. [Apple Human Interface Guidelines: Layout](https://developer.apple.com/design/human-interface-guidelines/layout)
2. [Android Developers: Display content edge to edge](https://developer.android.com/develop/ui/views/layout/edge-to-edge)

## Related

- Screens: [Dashboard screens](https://www.appetiteui.com/screens/patterns/dashboard)
- Docs: [Dimensions](https://www.appetiteui.com/docs/dimensions)
- Docs: [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge)
- Article: [iPhone screen sizes in Figma: 402 × 874 for iPhone 18 Pro, 440 × 956 for Pro Max](https://www.appetiteui.com/blog/iphone-screen-sizes-figma)
- Article: [Android screen sizes in Figma: design by window size class, not by device](https://www.appetiteui.com/blog/android-screen-sizes-figma)
- Glossary: [Status bar](https://www.appetiteui.com/academy/glossary/status-bar)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Glossary: [Tab bar](https://www.appetiteui.com/academy/glossary/tab-bar)