Your story
The Instagram iOS app, dissected. White canvas, black ink, one signature gradient. Photography is the protagonist β the interface stays out of its way.
Instagram's app puts photography in the spotlight by reducing the interface to a vocabulary of three things: white space, black ink, and one signature gradient reserved for story rings, brand logo, and creative CTAs.
Header logo in Billabong script. Stories tray scrolls horizontally, gradient ring on unviewed, gray on viewed. Posts are edge-to-edge media with a slim metadata strip. The like heart is the only red on the screen β #ED4956.
Full-screen 9:16 video. All chrome lives in two corridors: a right-side action stack and a left-bottom metadata overlay. Tab bar fades into a dark gradient so it never competes with the footage.
Avatar with optional gradient ring (if active story). Three-column grid of square thumbnails, 2px gutter. Highlights tray sits between bio and tabs β circular covers, single-word names, lowercase.
The story ring is Instagram's most recognizable component. Unviewed wears the brand gradient (45Β°, five stops). Viewed drops to a single gray. Live swaps to a red gradient with a "LIVE" pill anchored at the bottom edge.
Ring stroke = 2.5pt. Avatar always carries a 2pt white border between itself and the ring so the gradient doesn't bleed onto skin.
angle: 45Β°
stops: 5
stroke: 2.5pt
inner border: 2pt #fff
The like button has one job: communicate that the tap registered. Tap fills the heart with #ED4956 over 180ms, scales 1 β 1.2 β 1 on a spring curve, fires a selection haptic, and bumps the like count.
Double-tap on the image fires the same animation plus a centered burst overlay (white heart, 80pt, fades 0.4s).
fill: #ED4956
scale: 1.2x
spring: 0.55, 0.65
haptic: selection
The verified check is a single SVG glyph β saw-toothed circle with an embedded check β rendered in #0095F6. It sits inline with the username, 1pt of negative space between glyph baseline and the username's x-height.
The badge never resizes relative to the username; it scales with the text token. Never tinted, never outlined, never gray.
color: #0095F6
size: 14Γ14 (next to 14pt name)
position: inline-baseline
Every token Instagram's iOS app reaches for β surface ladder, type ramp, radius scale, components. The brand gradient is reserved real estate; everything else is monochromatic so the photography can speak.
A monochromatic chassis (white β black through five grays) holds the brand gradient in five sacred places: app logo, story ring, primary CTA on creator surfaces, the like burst, the verified check.
SF Pro Text on iOS (substituted with Inter here). The Instagram wordmark uses a custom Billabong-derived script (substituted with Grand Hotel). Everything else is system β usernames in SemiBold 14, captions in Regular 14, metadata in Regular 12 with all-caps timestamps.
| Token | Sample | Size | Weight | Tracking |
|---|---|---|---|---|
| --logo | 28 (display) | Script | +0.5px | |
| --screen-title | Reels | 17 / 1.06rem | 700 | normal |
| --username | marie_kn | 14 / 0.88rem | 600 | normal |
| --caption | marie_kn Magic hour over the Tagus π | 14 / 0.88rem | 400 | normal |
| --meta | View all 218 comments | 12 / 0.75rem | 400 | normal |
| --timestamp | 2 HOURS AGO | 10 / 0.63rem | 400 | 0.2px UPPER |
| --button | Follow | 14 / 0.88rem | 600 | normal |
| --story-name | Your story | 11 / 0.69rem | 400 | normal |
| --bio | Writer Β· Designer Β· Lisbon | 12 / 0.75rem | 400 | normal |
Square media (photos and grid thumbnails sit at 0 radius β Instagram trusts the medium). Buttons land at 8px. Story rings, avatars, and reaction discs are all perfectly circular (50%). The brand mark itself is the only "soft square" β 9px on a 30px icon.
The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.
Outlined glyphs that turn solid on tap. Pills that wear black for primary, blue for follow, gray for secondary, gradient for creator surfaces.