iOS Design Spec

# Media first.
Chrome last.

The Instagram iOS app, dissected. White canvas, black ink, one signature gradient. Photography is the protagonist — the interface stays out of its way.

View Design Tokens Explore Surfaces
9:41
Reels
+
218k
3,402
1.1k
sunsetstudio
When the golden hour hits at exactly the right second 🌅 #goldenhour #cinematic
sunsetstudio · Original audio
Reels
9:41
Instagram
Your story
marie_kn
jane.doe
_alex.r
nikodi
marie_kn
Lisbon, Portugal
12,482 likes
marie_knMagic hour over the Tagus 🌅 more
View all 218 comments
2 HOURS AGO
Feed
9:41
🔒jiang.shu
142
posts
8,402
followers
312
following
Jiang Shu · 江树
Writer · Designer
Building things that respect the reader's time. Lisbon → Tokyo.
yzfly.com
Follow
Message
+
New
2024
Tokyo
Books
Profile
iOS Surface Anatomy

## Three surfaces. One gradient that signs the work.

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.

### Feed

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

### Reels

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.

### Profile

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.

Story Rings

### One ring, three states, one mood.

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`
unviewed
viewed
live
linear-gradient(45deg, #f09433, #e6683c,
#dc2743, #cc2366, #bc1888)
resting
tapped
Spring(.55, 0.65) scale 1 → 1.2 → 1
Stroke→fill in 180ms · selection haptic
Like animation

### A heart that flexes when it changes its mind.

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`
Verified Badge

### Blue means the account is who it says it is.

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`
marie_kn
Marie · Photographer
jane.doe
Followed by you
nikodi
Suggested for you
Design System Reference

## White, black, and one famous gradient.

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.

View Source ↗

### Color

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.

Brand Gradient (5 stops)
Sun
#f09433
Coral
#e6683c
Crimson
#dc2743
Magenta
#cc2366
Plum
#bc1888
Ink (text + icon)
Ink Primary
#000000
Ink 2
#262626
Ink Soft
#737373
Ink Muted
#8e8e8e
Ink Dim
#c7c7c7
Surface & Border
Canvas
#ffffff
Canvas Soft
#fafafa
Surface 2
#efefef
Border
#dbdbdb
Border Soft
#efefef
Functional
Like Red
#ED4956
Live Red
#FF3040
Action Blue
#0095F6
Link Blue
#00376b
Story Highlight
#FFDC80

### Typography

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

### Radius

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.

Media
0px
Min
2px
Tag
6px
Button
8px
App Icon
9px
Card
14px
Sheet
38px
Avatar
50%

### iOS Spec Strip

The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.

Story ring stroke
2.5pt
Gradient on unviewed, single gray on viewed.
Story avatar
56pt
Plus 2pt white inner border, plus 2.5pt ring = 65pt total.
Feed post artwork
1:1
Edge-to-edge. 4:5 portrait is allowed; 9:16 routes to Reels.
Profile grid gutter
2pt
3 columns, no inset. Single-pixel separator on legacy.
Tab bar height
83pt
5 icons + 34pt home indicator safe area.
Action icon stroke
1.8pt
Outlined glyphs throughout. Fills only on tap states.
Like burst overlay
80pt
Centered, 0.4s fade. Double-tap only.
Animation curve
spring
0.55 response, 0.65 damping. iOS UIView.animate(.spring).

### Components

Outlined glyphs that turn solid on tap. Pills that wear black for primary, blue for follow, gray for secondary, gradient for creator surfaces.

##### Buttons

Follow Get Started Create Reel Following Message

##### Inputs

#goldenhour @jane.doe Liked

##### Cards

marie_kn
Followed by jane.doe
Suggestions for you See All
View source ↗