# Design System Inspiration of Instagram (iOS)

## 1. Visual Theme & Atmosphere

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

## 2. Color Palette & Roles

### 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 `#A8A8A8` for legibility.
- **Separator** (`#DBDBDB` light / `#262626` dark): Hairline dividers between feed posts, between navigation and content, between stacked list rows.

### Interactive
- **Link Blue** (`#00376B` light / `#E0F1FF` dark): @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` → `#7644FF` gradient): 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.

## 3. Typography Rules

### 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 Mono` for 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.

## 4. Component Stylings

### 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 `#ED4956` with 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.fill` top-right, 14pt, white with subtle shadow
- Multi-image indicator: SF Symbol `square.on.square` top-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 `#DBDBDB` light / `#262626` dark
- 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 `.regularMaterial` blur
- 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 Symbol `paperplane` (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 `#0095F6` weight 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)**
- Height: 48pt
- Layout: heart, comment, share (left cluster) + save (right)
- Icon size: 24pt
- Gaps: 16pt between left icons, save pinned right with 16pt inset
- Double-tap feedback: large centered heart animation on the image above

**Like Count / Caption Block**
- "Liked by [user] and [n] others" — 13pt weight 600
- Caption: username (bold inline) + caption text, 2-line clamp by default
- "View all X comments" in secondary gray 14pt weight 400
- Up to 2 top comments previewed, username bold inline
- Timestamp: 11pt weight 400 UPPERCASE in secondary gray (e.g., "2 HOURS AGO")

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 2, 4, 6, 8, 12, 16, 20, 24, 32, 44, 56, 77
- Notable characteristic: 2pt micro-gap between grid tiles (tighter than most apps), 16pt inset for nav chrome, 4pt between icon rows in tab bar

### Grid & Container
- Max content width: device width (no content margins on feed posts)
- Safe-area aware: chrome (nav, tab bar) respects safe areas; media content ignores them to bleed to edge
- Profile grid: 3-column, 2pt gaps — content is king, chrome is minimal
- Settings list: standard iOS inset grouped style, 16pt horizontal padding, rows 44pt min-height

### Whitespace Philosophy
- **Edge-to-edge content, inset chrome**: The fundamental rule. Media bleeds; text/UI insets at 16pt.
- **Vertical density over horizontal**: Feed posts stack tightly (48pt action bar + 6pt to caption) but scroll is infinite. You can see ~1.2 posts per phone viewport.
- **No section headers**: Unlike Apple.com's chaptered sections, Instagram has zero visible section dividers beyond a 0.5pt hairline between posts.
- **The tab bar never disappears**: It's translucent, always present, always 49pt — the one persistent anchor.

### Border Radius Scale
- Square (0pt): Feed photos, Reels, grid tiles, Stories thumbnails
- Hairline (4pt): Comment composer prompts, small badges
- Standard (8pt): Buttons, follow pills, input fields (legacy)
- Comfortable (10pt): Search bars, DM bubbles (partial)
- Bubble (20pt): DM message bubbles, composer input
- Full Circle (50%): Profile avatars, story rings, action buttons, icon hit targets

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, solid background | Feed posts, list rows, tab content |
| Tab Bar Material | `.regularMaterial` blur over 92% white/black | Bottom tab bar — floats above scrolling feed |
| Nav Bar Material | `.regularMaterial` blur (scroll edge) | Top nav on Profile, Explore when content scrolls under |
| Sheet Elevation | `rgba(0,0,0,0.20) 0 -4px 12px` | Comment sheet, share sheet, action sheet |
| Double-tap Heart | Scale 0 → 1.4 → 1.0 + fade-out, spring damping 0.6 | The signature micro-interaction |
| Carousel Shadow | None | Posts do not elevate; carousels use dots not shadows |

**Shadow Philosophy**: Instagram uses almost zero drop shadows. Depth comes from the blur materials on tab/nav bars and the elevation implied by sheet presentations. Feed content lives on a single z-plane — nothing lifts, nothing hovers. The only "elevation" cue is the translucent glass of the tab bar and Comments sheet. This keeps the focus on the 2D content.

### Motion & Haptics
- **Double-tap to like**: Heart springs to 1.4 scale over 250ms, bounces back to 1.0, fades to 0 over 400ms. Paired with `.impactOccurred(.soft)` haptic.
- **Tab bar press**: `.selectionChanged()` haptic on tap
- **Long press on Home tab**: `.impactOccurred(.medium)` haptic → account switcher sheet
- **Pull to refresh on Feed**: Custom Instagram camera glyph rotates; standard iOS elastic with a branded spinner
- **Swipe between tabs in Reels**: 60fps snap with rubber-band resistance at edges
- **Story tap-and-hold**: Pauses timeline; UI chrome fades to 20% opacity over 150ms

## 7. 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 `#0095F6` for 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

## 8. Responsive Behavior

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

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas (light): `#FFFFFF`
- Canvas (dark): `#000000`
- Text (light): `#000000`
- Text (dark): `#FFFFFF`
- Secondary gray: `#8E8E8E` (light) / `#A8A8A8` (dark)
- Separator: `#DBDBDB` (light) / `#262626` (dark)
- Primary action: `#0095F6`
- Destructive / heart-liked: `#ED4956`
- Link blue: `#00376B` (light) / `#E0F1FF` (dark)
- Brand gradient stops: `#833AB4` → `#FD1D1D` → `#FCAF45`
- Input field: `#EFEFEF` (light) / `#262626` (dark)

### Example Component Prompts
- "Build a SwiftUI Instagram feed post view: username row (28pt avatar + 14pt semibold username + `ellipsis` trailing icon), 1:1 square photo edge-to-edge with no corner radius, action bar with heart/comment/paperplane/bookmark (24pt SF Symbols, 16pt gap), like count at 13pt weight 600, caption with inline-bold username at 14pt weight 400, timestamp at 11pt uppercase in #8E8E8E."
- "Create a Story ring: 66pt outer circle with a 2.5pt conic gradient stroke (#833AB4, #FD1D1D, #FCAF45) for unread state, or 1pt gray stroke (#DBDBDB) for read state. Inner 57pt circular image with a 3pt inset. Below: username 11pt weight 400 centered, truncated to 10 chars."
- "Design an Instagram tab bar: 49pt height + safe area, .regularMaterial background at 92% opacity. Five equally-spaced icons at 24pt: house, magnifyingglass, play.rectangle (with brand gradient fill when active), plus.app (gradient), and a circular profile image. No text labels. Active icons use filled SF Symbol variants; inactive use outlined."
- "Build the Follow button: background #0095F6, corner radius 8pt, padding 7pt×16pt, text 'Follow' at 14pt weight 600 in white. Pressed state: background shifts to #1877F2 with 0.97 scale spring. Following state: background #EFEFEF, text #000000."
- "Create a comment composer: 48pt height bar pinned above keyboard, 24pt circular avatar on the left with 16pt padding, inline 14pt text field with placeholder 'Add a comment...', right-aligned 'Post' text button in #0095F6 weight 600 that disables when the field is empty."

### Iteration Guide
1. Chrome is ALWAYS monochrome — if you're adding color to an icon or button that isn't `#0095F6` or `#ED4956`, reconsider
2. The brand gradient is precious — reserve it for Stories rings, the Create action, and the logotype
3. Photos and videos are edge-to-edge with corner radius 0 — no exceptions in feed
4. Typography stays under 20pt everywhere except the 28pt logotype and the 77pt story ring on Profile
5. Tab bar is always translucent blur, always 5 icons, never labeled
6. Haptics on every meaningful interaction (like, save, follow, tab long-press)
7. Use SF Symbols first; fall back to custom only when Apple hasn't shipped the glyph
8. Dark mode is `#000000` pure — not the iOS `.systemBackground` default gray-black