Design for Safe Areas and Device Cutouts

Layout & Responsive · mobile, responsive, navigation

Updated 2026-07-28

Treat the screen and the usable area as different rectangles. Rounded corners, camera cutouts, home indicators, and on-screen keyboards all take space that your layout does not own.
Let backgrounds run to the edge and keep controls inside the safe area. Colour extending under a notch looks intentional, and a button under it looks broken.
Pad the bottom of anything fixed. A bar sitting flush with the bottom edge competes with the system gesture area, so users swipe home instead of pressing your primary action.
Account for the keyboard as a change in viewport height, not as an overlay. The field being edited, its label, its error, and the submit action all need to stay visible.
Watch the parts that fail most often:

Full-screen modals with a close button in the top corner.
Bottom navigation and floating action buttons.
Sticky footers on forms.
Landscape orientation, where the cutout moves to a side.

Use real device insets rather than fixed numbers. Hardcoded padding is wrong on the next device and wrong on the previous one.
Check landscape and split-screen deliberately. Both are the modes where a layout that assumed a tall rectangle falls apart.

The safe area is not a mobile detail, it is the actual canvas, and designing to the full screen means designing to a rectangle the user cannot fully use.