Learn
Safe area
The rectangle inside heroThe big top artwork or banner on a page, above the main copy. or social art where titles and important content must fit.
Why this word exists
Crops eat edges. A safe-area is the rectangle inside heroThe big top artwork or banner on a page, above the main copy. or social art where titles and important content must fit — or the washA soft gradient or fade laid over a hero or banner so text stays readable. and share preview will clip them.
Art briefs and Keep glances treat safe-area as a hard friend. It is layout craft, not a security vault.
Where you will meet it
Packs, contact sheets, and OG notes mark safe-areas. Eye-checks after tipThe tip is the newest saved snapshot on a branch, the one a reviewer can check out. confirm titles still sit inside.
Examples
- HeroThe big top artwork or banner on a page, above the main copy. title stays inside the safe-area on 390Shorthand for a phone-width layout check around 390 pixels wide. width.
- Keep hard-fails a packA folder of related artwork (icons, heroes, contact sheet) ready for Keep QA and wiring. when the logo sits outside the safe-area.
- OG imageThe preview picture apps show when someone shares a link (Open Graph image). safe-area keeps the shared-link title readable in apps.
Fetched 2026-09-23 CT.