A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
21tokens
7type steps
5radius steps
7pxspacing base
Instagram, in one page
Instagram's iOS app is a study in chromatic restraint punctuated by one unforgettable gradient. The entire chrome — nav bar, tab bar, icons, typography — is rendered in pure monochrome (black on white, or white on true black), creating a neutral frame that lets photos and videos become the only colorful thing on screen. The content is the product; the interface is the picture frame, and the frame is deliberately invisible. This is the anti-skeuomorphic endgame — a UI so quiet that a user's 1:1 photograph, a friend's selfie, or a Reel's saturated grade commands 100% of the visual attention.
The single chromatic exception is the Instagram logomark gradient — that famous purple-to-pink-to-orange-to-yellow sweep (#833AB4 → #FD1D1D → #FCAF45) — which appears in exactly three places: the app icon, the Stories ring for unread stories, and the Reels/Create action. Nowhere else. No buttons, no accents, no badges. This scarcity is what makes the gradient iconic. Everything else defaults to black (#000000) or white (#FFFFFF), with grays between them for secondary affordances.
Typography is SF Pro — the system face — with zero customization, except for the logotype at the top of the feed which uses a custom Billabong-inspired script. Headlines are absent; instead, small-but-confident UI text (13-17pt, weight 400-600) guides the user. Every control is a glyph or icon — Instagram famously stripped text labels from its tab bar years ago, trusting that users recognize the outline house, magnifying glass, Reels chevron-play, and circular profile without instruction. The interface says little and shows everything.
Key Characteristics:
- Pure monochrome chrome (black/white only) with the Instagram gradient as the single chromatic signature
- Content-as-hero layout: photos and videos span edge-to-edge with zero competing UI color
- SF Pro at small-to-medium sizes (11-17pt) — no display-size headlines anywhere
- Iconography dominates text labels — the tab bar has no words
- Signature gradient (
#833AB4→#FD1D1D→#FCAF45) reserved for brand moments only - Edge-to-edge media: feed posts, Reels, and Stories bleed to the device edges
- Full dark mode with true-black (
#000000) for OLED battery efficiency - Haptics on double-tap-to-like and tab-bar long-press — subtle but signature
Do's and don'ts
Do
- Keep all chrome monochrome — black, white, gray only
- Reserve the Instagram gradient for Stories rings, the Create action, and brand moments
- Use SF Pro — never introduce a custom body typeface
- Bleed media edge-to-edge with zero corner radius on photos and videos
- Use outlined icons by default, filled icons for active/selected state
- Respect the user's Dynamic Type setting on all UI text except the logotype
- Use
#0095F6for the single "take action" button (Follow, Log in, Sign up) - Pair every like/save/follow action with subtle haptics
- Use true black (
#000000) for dark mode — not#1C1C1E— to serve OLED screens
Don't
- Don't introduce new accent colors beyond the defined palette — the monochrome chrome is the brand
- Don't apply the brand gradient to buttons, text, or general UI — it's reserved
- Don't round feed photo corners — edge-to-edge squares and portraits are sacred
- Don't add text labels to the tab bar — the icons do the work
- Don't use large-title nav bars — Instagram is compact-title throughout
- Don't use shadows on feed cards — the app has a single z-plane for content
- Don't animate aggressively — motion is subtle (0.15-0.3s, spring damping 0.7+)
- Don't introduce skeuomorphic textures or gradients on UI chrome
- Don't replace SF Symbols with custom icons where a Symbol exists
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Instagram design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Pure Black: #000000
- Pure White: #ffffff
- Secondary Gray: #8e8e8e
- Separator: #dbdbdb
- Link Blue: #00376b
- Primary Button Blue: #0095f6
- Primary Button Blue Pressed: #1877f2
- Destructive Red: #ed4956
- 3-stop shorthand: #833ab4
- Background: #000000
Type:
- families: SF Pro Text, System, Instagram Sans, Logotype
- scale: 10, 11, 12, 14, 16, 20, 28
- weights: 400, 500, 600, 700
Shape:
- radius: 0, 8, 10, 12, 20
- elevation: Video indicator: SF Symbol `play.fill` top-right, 14pt, white with subtle shadow | Shadow: `rgba(0,0,0,0.2) 0 -4px 12px` | Reels: full-bleed 9:16 vertical video, overlay text in white with subtle shadow
Spacing: 7
Rules:
- Keep all chrome monochrome — black, white, gray only
- Reserve the Instagram gradient for Stories rings, the Create action, and brand moments
- Use SF Pro — never introduce a custom body typeface
- Bleed media edge-to-edge with zero corner radius on photos and videos
- Use outlined icons by default, filled icons for active/selected state
- Respect the user's Dynamic Type setting on all UI text except the logotype
Avoid:
- Don't introduce new accent colors beyond the defined palette — the monochrome chrome is the brand
- Don't apply the brand gradient to buttons, text, or general UI — it's reserved
- Don't round feed photo corners — edge-to-edge squares and portraits are sacred
- Don't add text labels to the tab bar — the icons do the work
- Don't use large-title nav bars — Instagram is compact-title throughout
- Don't use shadows on feed cards — the app has a single z-plane for content
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Monochrome)
- Pure Black (
#000000): Dark mode canvas, light mode text, iconography. True black to max contrast and conserve OLED power. - Pure White (
#FFFFFF): Light mode canvas, dark mode text, iconography, tab bar background. - Secondary Gray (
#8E8E8E/#A8A8A8): Metadata text ("2h", view counts, placeholder copy, usernames in comments). Light mode uses#8E8E8E; dark mode uses#A8A8A8for legibility. - Separator (
#DBDBDBlight /#262626dark): Hairline dividers between feed posts, between navigation and content, between stacked list rows.
Interactive
- Link Blue (
#00376Blight /#E0F1FFdark): @mentions, #hashtags, linked URLs in captions and bios. Note: it's NOT system blue — it's deeper, navy-leaning. - Primary Button Blue (
#0095F6): The "Follow", "Log in", and "Sign up" pill buttons. The only blue chip in the app and it means "take action." - Primary Button Blue Pressed (
#1877F2): Pressed state — Meta-flavored blue, slightly deeper. - Destructive Red (
#ED4956): Heart-liked state, destructive actions ("Delete", "Report"), notification badges. Instagram red is pink-shifted vs. system red.
Brand Gradient (Reserved)
The official Instagram brand gradient is a 10-stop diagonal sweep (bottom-left to top-right) used in the app icon:
#FFDC80(Yellow) →#FCAF45(Orange-Yellow) →#F77737(Orange) →#F56040(Red-Orange) →#FD1D1D(Red) →#E1306C(Rose) →#C13584(Purple-Red) →#833AB4(Purple) →#5851DB(Purple-Blue) →#405DE6(Blue)
A 3-stop shorthand (#833AB4 → #FD1D1D → #FCAF45) is commonly used in UI moments where the full 10-stop would be too busy.
The gradient appears ONLY in: the app icon, the logotype, unread Stories rings (as an angular gradient), the Create (+) tab icon, and occasional brand CTAs. Never on text, regular buttons, or decorative fills.
Dark Mode Surfaces
- Background (
#000000): Primary dark canvas — true black for OLED. - Elevated Surface (
#121212): Comment sheet backgrounds, settings rows grouped container. - Input Field (
#1C1C1E/#262626): Search fields, comment input, DM compose bubble background. - Incoming DM Bubble (
#262626): Received message bubble in dark mode. - Outgoing DM Bubble (
#3797F0→#7644FFgradient): Sent message — the only gradient bubble in messaging UI.
Light Mode Surfaces
- Background (
#FFFFFF): Primary light canvas. - Input Field (
#EFEFEF): Search bar fill, comment composer. - Incoming DM Bubble (
#EFEFEF): Received message bubble in light mode. - Pressed Row (
#F5F5F5): Tap-down state for list rows and settings items.
Status & State
- Online Green (
#78DE45): Active-now indicator dot on profile photos in DM and Close Friends. - Close Friends Green (
#2FB825): The Close Friends star/ring color. - Unread Red Dot (
#ED4956): Notification badges on the Activity tab and DM rows.
Type scaleRead the full spec
Font Family
- System:
SF Pro Text(iOS default). Instagram respects the user's Dynamic Type preference throughout most of the app. - Logotype:
Instagram Sans(proprietary, based on Billabong script for the wordmark). Only used for the "Instagram" logo at the top of the Home feed — never body text. - Monospace:
SF Monofor story-reply typing indicators (rare).
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Logotype | Instagram Sans | 28pt | 400 | 1.0 | normal | Top of Home feed ONLY |
| Screen Title | SF Pro Text | 16pt | 600 | 1.25 | -0.2pt | Nav bar title (e.g. "Profile", "Messages") |
| Username (Post Header) | SF Pro Text | 14pt | 600 | 1.3 | -0.15pt | Above each feed post |
| Username (Large) | SF Pro Text | 20pt | 700 | 1.2 | -0.3pt | Profile screen username |
| Bio | SF Pro Text | 14pt | 400 | 1.4 | normal | Profile bio copy, multi-line |
| Caption | SF Pro Text | 14pt | 400 | 1.35 | -0.1pt | Post caption text under each feed item |
| Caption Truncated | SF Pro Text | 14pt | 400 | 1.35 | -0.1pt | 2-line clamp, "more" button in secondary gray |
| Comment | SF Pro Text | 14pt | 400 | 1.4 | -0.1pt | Comment body; username bold-inline |
| Secondary Meta | SF Pro Text | 12pt | 400 | 1.3 | 0pt | "2h", "View all 24 comments", view counts |
| Button (Primary) | SF Pro Text | 14pt | 600 | 1.0 | -0.15pt | "Follow", "Message", "Log In" |
| Button (Small Pill) | SF Pro Text | 12pt | 600 | 1.0 | -0.1pt | Story ring label, "See All" |
| Tab Label (legacy) | SF Pro Text | 10pt | 500 | 1.0 | 0.1pt | Currently hidden — tab bar is icon-only |
| Counter Large | SF Pro Text | 16pt | 700 | 1.1 | -0.2pt | Profile stats (posts / followers / following) |
| Counter Small | SF Pro Text | 12pt | 400 | 1.2 | 0pt | "followers" / "following" label under the number |
| DM Bubble | SF Pro Text | 16pt | 400 | 1.3 | -0.2pt | Message text inside chat bubbles |
| System Badge | SF Pro Text | 11pt | 700 | 1.0 | 0.2pt | Notification badge counts |
Principles
- No display-size type: The biggest text in the entire app is the 28pt logotype. No 40pt hero headlines, no 60pt marketing type. The interface is designed for a phone held close to the face, not a billboard.
- Weight concentrated at 400 / 600 / 700: Regular, semibold, bold. Light (300) and heavy (800+) are never used. Semibold (600) carries almost all UI emphasis.
- Dynamic Type support: SF Pro scales with the user's accessibility setting. Numeric counters and nav titles use semantic styles so they grow; the Instagram logotype stays fixed.
- Username-first hierarchy: In every row (feed, comments, DM list), the username is the most emphasized element, always semibold. This reinforces that Instagram is about people, not posts.
Components and layoutRead the full spec
Buttons
Primary Action (Follow / Log In)
- Background:
#0095F6 - Text:
#FFFFFF - Padding: 7pt vertical, 16pt horizontal (full-width variants go to 12pt)
- Corner radius: 8pt
- Font: SF Pro Text, 14pt, weight 600
- Pressed: background shifts to
#1877F2, scale 0.97 - Disabled: 50% opacity
Secondary Action (Following / Message)
- Background:
#EFEFEF(light) /#363636(dark) - Text:
#000000(light) /#FFFFFF(dark) - Padding: 7pt vertical, 16pt horizontal
- Corner radius: 8pt
- Font: SF Pro Text, 14pt, weight 600
- Pressed: background darkens one step
Destructive (Delete / Report)
- Background: transparent
- Text:
#ED4956 - Font: SF Pro Text, 14pt, weight 600 (in sheets) / 17pt weight 400 (in action sheets)
- No border, no background — text only on sheet rows
Icon Button (Heart, Comment, Share, Save)
- Size: 24pt glyph, 44x44pt hit target
- Default: SF Pro / custom outlined glyph at current text color
- Liked (heart): fills to
#ED4956with a 0.9 → 1.15 → 1.0 spring scale animation - Double-tap-to-like: large heart animates from 0 → 1.4 → 0 over 0.6s in center of image, with success haptic
Cards & Containers
Feed Post
- Background: current canvas color (no elevated fill)
- Border: top/bottom 0.5pt hairline in separator color (
#DBDBDB/#262626) - Corner radius: 0 (edge-to-edge)
- Photo: 1:1 square or portrait, NO corner radius, full device width
- Carousel dots: 6pt dots, 3pt gap, primary dot is
#0095F6 - Structure: header (56pt) → media (1:1 square) → action bar (48pt) → caption → comments preview → timestamp
Grid Tile (Profile / Explore)
- Size: 1/3 of device width minus 2pt gaps
- Aspect: 1:1 square
- Corner radius: 0
- Gap between tiles: 2pt (feels tighter than most iOS grids — this is intentional)
- Hover/pressed: 85% opacity
- Video indicator: SF Symbol
play.filltop-right, 14pt, white with subtle shadow - Multi-image indicator: SF Symbol
square.on.squaretop-right
Story Ring
- Ring diameter: 66pt (home rail) / 77pt (profile)
- Inner photo: 3pt inset from ring
- Unread ring: 2.5pt stroke with conic gradient (
#833AB4→#FD1D1D→#FCAF45) - Read ring: 1pt stroke in
#DBDBDBlight /#262626dark - Your Story: plus badge overlay (bottom-right), 22pt blue circle with white
+
Sheet (Comments, Share, More)
- Background:
#FFFFFF(light) /#121212(dark) - Corner radius: 12pt top corners only
- Top grabber: 36pt wide × 4pt tall pill, centered, 8pt from top, color
#C7C7CC/#48484A - Shadow:
rgba(0,0,0,0.2) 0 -4px 12px - Snap points: medium (50%) and large (92%) — never fully covers the status bar
Navigation
Bottom Tab Bar
- Height: 49pt (plus safe area)
- Background:
rgba(255,255,255,0.92)(light) /rgba(0,0,0,0.92)(dark) with.regularMaterialblur - Icons: 5 tabs — Home, Search, Reels (gradient), Shop/Create (replaced by +), Profile photo (your own)
- Icon size: 24pt
- Active tab: icon filled variant; inactive: outlined variant
- No text labels (Instagram removed them in 2020)
- Profile tab uses the user's actual avatar with a 2pt selection ring when active
- Long press on Home tab opens account switcher with haptic feedback
Top Nav (Home Feed)
- Height: 44pt (plus safe area)
- Left: Instagram logotype (Instagram Sans, 28pt)
- Right: SF Symbol
heart(Activity), SF Symbolpaperplane(DMs), with red dot badges when unread - Icon size: 24pt
- Background: canvas color (not translucent — feed scrolls under the safe area only)
Top Nav (Other Screens)
- Height: 44pt
- Back chevron: SF Symbol
chevron.backward, 17pt, primary text color, left-aligned with 16pt inset - Title: centered, 16pt weight 600
- Right action: single icon or short text action, right-aligned
- No large-title style — everything is compact inline
Image & Media Treatment
- Feed photos: edge-to-edge, 1:1 square default, 4:5 portrait, 16:9 landscape; NEVER rounded corners
- Stories: full-screen (100% viewport), 9:16 aspect, rounded top corners (12pt) on the iPhone device frame only
- Reels: full-bleed 9:16 vertical video, overlay text in white with subtle shadow
- Profile avatar: circular, 2pt border in current background color (makes it "float" against story rings)
- Video thumbnails in grid: play icon top-right, white with 4pt shadow offset 0/2
Input Fields
Search Bar (Explore)
- Background:
#EFEFEF(light) /#262626(dark) - Corner radius: 10pt
- Height: 36pt
- Leading SF Symbol
magnifyingglass, 14pt,#8E8E8E - Placeholder: "Search", same gray
- Text: 14pt, primary text color
Comment Composer
- Background: current canvas
- Top hairline: 0.5pt separator
- Avatar: 24pt circular on the left
- Text field: inline, no border, placeholder "Add a comment..."
- Right: "Post" button in
#0095F6weight 600 14pt — disabled/hidden when field is empty
DM Compose
- Bubble-shaped input:
#EFEFEF/#262626, corner radius 20pt, min-height 36pt, grows with content - Leading: camera icon (blue), inline
- Trailing: mic / sticker icons when empty; send arrow when populated (blue)
Distinctive Components
Stories Rail
- Horizontal scroll at top of Home feed
- Your Story first, then unread (gradient rings), then read (gray rings), then muted
- 8pt gap between rings
- Below each ring: username truncated to 10 chars, 11pt weight 400, centered
Action Bar (under each feed post)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Tighter line-heights, tab bar icon gaps reduce to 12pt |
| iPhone 13 / 14 / 15 | 390pt | Standard layout |
| iPhone 15 / 16 Pro | 393pt | Standard layout, Dynamic Island accommodated |
| iPhone 15 / 16 Pro Max | 430pt | Slightly wider grid tiles, typography unchanged |
| iPad (Instagram is compact) | 768pt+ | App runs in compact-width mode — functionally identical to iPhone |
Dynamic Type
- Usernames, captions, comments, DMs: scale with user setting (caption → body → larger variants up to accessibility XXXL)
- Counter numbers (followers, following, posts): scale 100% → 140% (xxxLarge cap)
- Tab bar icons: do NOT grow (fixed 24pt)
- Instagram logotype: does NOT grow (fixed 28pt)
- Nav titles: scale to a max of 20pt to stay within the 44pt nav bar
Orientation
- Feed, Profile, Explore, Activity: portrait-locked
- Reels: portrait-locked
- Stories camera: portrait-locked
- Video player in full-screen: rotates to landscape
- DM: portrait-locked
Touch Targets
- Minimum hit area: 44x44pt on all icons (even 24pt glyphs)
- Story rings: 66pt diameter gives a generous tap zone
- Grid tiles: full tile is tappable (125pt+ wide)
- Double-tap-to-like: full image area (~390pt wide × 390pt tall)
Safe Area Handling
- Top: status bar + notch/Dynamic Island — content scrolls under a translucent nav on Profile/Explore
- Bottom: tab bar extends into the home indicator area with blur material
- Edge: media bleeds to left and right edges; text insets 16pt from safe area
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-instagram {--page-bg: #000000;
--page-bg-gradient: none;
--text-color: #969696;
--heading-color: #969696;
--link-color: #0095f6;
--link-hover-color: #0076c3;
--border-color: #1b1b1b;
--card-bg: #000000;
--card-shadow: 0 1px 2px rgba(150,150,150,0.06);
--card-hover-shadow: 0 6px 18px rgba(150,150,150,0.12);
--header-bg: #141414;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #000000;
--footer-text-color: #767676;
--button-bg: #0095f6;
--button-text-color: #000000;
--button-hover-bg: #0076c3;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #090909;
--button-secondary-text-color: #969696;
--button-secondary-hover-bg: #121212;
--button-secondary-border: 1px solid #1b1b1b;
--prompt-bg: #080808;
--prompt-text-color: #969696;
--base-font: var(--font-helvetica);
--heading-font: var(--font-mono);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 82.0%
- mastodon 76.4%
- vimeo 75.2%
- kashiyama 74.3%
- zoff 73.7%
Where this came from
- Source document
ios/design-md/social/instagram/DESIGN.md· 22.8 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.