# 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/glossary/safe-area. Safe area insets on iPhone and Android. Also called Window insets.

## Why it matters

Content under the Dynamic Island, the status bar or the home indicator is hidden or hard to tap.

The insets differ by device and by system, so they have to come from the system and not from a number in the design.

## iOS and Android

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

## Common mistakes

- Hard-coding a top margin such as 20. It breaks on the next phone.
- Running text or controls into the bottom inset. Only backgrounds may.
- Checking one device. Check the largest and the smallest.

## 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/glossary/status-bar)
- Glossary: [Touch target](https://www.appetiteui.com/glossary/touch-target)
- Glossary: [Tab bar](https://www.appetiteui.com/glossary/tab-bar)
- Glossary: [Size classes](https://www.appetiteui.com/glossary/size-classes)