# Design System Inspiration of Snapchat (iOS)

## 1. Visual Theme & Atmosphere

Snapchat's iOS app is a camera that happens to have messaging, maps, and a video feed attached — not the other way around. The app opens directly into the live camera viewfinder, full-screen, with the lens capturing your face before you've even decided what to do. This is the single most defining characteristic of Snapchat's design philosophy: the camera IS the home screen. Every other app in this category (X, Threads, Facebook, Instagram) opens to a feed; Snapchat opens to a viewfinder. The result is an app whose design language is built around photography — edge-to-edge imagery, floating chromeless controls, and a yellow accent so saturated it functions as a signal flare.

Snap Yellow (`#FFFC00`) is the most aggressive accent color in any major social app. It's a pure primary hue — not a branded shade with hex poetry behind it, but a near-max-brightness yellow that pops off a black canvas like a hazard sign. It appears only on brand moments: the ghost logo, the snap-capture button (a 82pt yellow circle surrounded by a yellow ring), the Snapstreak 🔥 badges, and certain navigation pills. The rest of the UI is monochrome white-on-dark or white-on-photo, with specific color codes reserved for the Snap type system (red = photo snap, purple = video snap, blue = chat message, green = audio) so users can glance at their inbox and instantly parse conversation types.

The navigation model is unlike any other app: instead of a bottom tab bar, Snapchat uses a horizontal swipe-between-four-screens metaphor, where Map, Chat, Camera (center, default), Stories (Discover), and Spotlight each occupy their own full-screen canvas. The user moves between them by swiping left/right from the camera. A small tab bar at the bottom exists, but acts more as a progress indicator showing your current screen than a persistent navigation dock. Typography is Avenir Next — a humanist geometric sans with warm curves and a distinctive lowercase `a` — at Bold and Medium weights almost exclusively, creating a friendly, young-feeling type voice that contrasts against the app's dramatic photography. Bitmoji characters (user's personalized cartoon avatar) replace profile photos throughout — your bitmoji waves from the chat avatar, sleeps on the Snap Map, and features in every UI moment where other apps would use a profile photo.

**Key Characteristics:**
- Camera-first home screen — app opens directly to the live viewfinder full-screen
- Snap Yellow (`#FFFC00`) as the aggressive primary accent — ghost logo, capture button, streak flame
- Swipe-between-five-screens navigation — Map | Chat | Camera | Discover | Spotlight (no traditional tab bar)
- Color-coded snap types — Red photo, Purple video, Blue chat, Green audio (in the Chat inbox)
- 82pt yellow capture button with concentric yellow ring — the signature center-screen CTA
- Bitmoji integration — user's custom cartoon avatar replaces profile photos app-wide
- Stories ring — pulsing yellow ring around unread story avatars
- Friend emojis — 🔥 streak, 💛 best friends, 👑 super BFF, 😎 mutual best friends, 🎂 birthday
- Ghost logo — the flat cartoon ghost (Ghostface Chillah) as the brand mark, used on splash and loading
- Floating chromeless controls on the camera — no surrounding UI frame, just icons in empty corners
- Avenir Next font at Bold/Medium weights — warm humanist sans, no thin weights
- Chat auto-delete — the signature "ephemeral by default" feel where messages disappear on close

## 2. Color Palette & Roles

### Primary Brand
- **Snap Yellow** (`#FFFC00`): The only brand accent. Ghost logo background, capture button fill, streak flame, unread story ring pulse, Snap-added-me badges. Saturated and aggressive.
- **Yellow Pressed** (`#E6E300`): Pressed state on yellow interactive elements (very rare — most yellow is logo/capture).
- **Pure Black** (`#000000`): Primary canvas for Chat, Map UI chrome, Discover background, loading screens.
- **Pure White** (`#FFFFFF`): Primary text on dark surfaces, chromeless icons floating on camera viewfinder, capture-button inner ring fill (when not active).

### Canvas & Surfaces (Dark / Default)
- **Canvas Black** (`#000000`): Primary canvas across Chat, Stories (Discover chrome), Spotlight.
- **Surface 1** (`#1A1A1A`): Chat bubbles (received), Discover card backgrounds, bottom-sheet modals.
- **Surface 2** (`#2C2C2C`): Elevated surfaces — selected chat row, settings cells.
- **Divider** (`#333333`): Hairlines between chat rows, settings sections.
- **Camera Viewfinder**: full-bleed live-camera feed (any colors from the real world)

### Canvas & Surfaces (Light — limited use)
Snapchat is effectively dark/camera-default. A light canvas appears only inside certain settings screens and Memories grid.
- **Light Canvas** (`#FFFFFF`)
- **Light Surface 1** (`#F2F2F2`)
- **Light Text** (`#000000`)

### Text
- **Text Primary Dark** (`#FFFFFF`): Primary text on dark and on camera overlays.
- **Text Primary Light** (`#000000`): Primary text on light surfaces (settings, memories).
- **Text Secondary** (`#8A8A8F`): Timestamps, status ("Tap to reply", "Opened 2m ago"), metadata.
- **Text Tertiary** (`#555555`): Disabled / very low-emphasis.

### Snap Type Colors (Color-Coded Chat Inbox)
Each Snap type has a distinct icon color — this is Snapchat's signature inbox-at-a-glance signal.
- **Photo Snap Red** (`#FF2E3D`): Received photo snap icon in inbox (unread square with triangle point).
- **Video Snap Purple** (`#9B51FF`): Received video snap icon.
- **Chat Blue** (`#4DA7FF`): Text chat message icon.
- **Audio Green** (`#4CD964`): Audio note / voice message icon.
- **Opened State (empty outline)**: Once opened, the filled square becomes an outline of the same color — signaling "already viewed".

### Semantic
- **Error Red** (`#FF3B30`): Destructive actions, failed sends, "Clear streak" warnings.
- **Success Green** (`#00D873`): Snap sent confirmation, "Streak saved" toast.
- **Live Red** (`#FF2E3D`): Live Story red dot, Snap Map live event marker.
- **Blue Link** (`#4DA7FF`): Inline links in chat (same blue as Chat type).

### Story Ring Colors
- **Unread Story Ring** (`#FFFC00`): Snap Yellow with a subtle animated pulse around unread Stories on Discover page.
- **Read Story Ring** (`#555555`): Gray ring around viewed Stories.
- **Live Story Ring** (`#FF2E3D`): Red ring for Live Stories (Spotlight or partnered live events).

### Map Accent
- **Snap Map Zones**: Heat-map coloring on Snap Map — warmer zones (dense snaps) render in orange `#FF9A1F` / red `#FF2E3D`; cool zones in yellow `#FFFC00`.

## 3. Typography Rules

### Font Family
- **Primary**: `Avenir Next` (by Adrian Frutiger, published by Linotype) — a humanist geometric sans with warm curves and a distinctive two-story lowercase `a`. Snapchat ships Avenir Next Bold and Avenir Next Medium as the primary UI faces.
- **Display / Branded Moments**: `Avenir Next Heavy` for the largest type (splash, streak counts).
- **Fallback Stack**: `'Avenir Next', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
- **CJK / Non-Latin**: Apple system fonts handle CJK; Avenir Next has Latin-plus-extended coverage.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Splash Title | Avenir Next Heavy | 48pt | 900 | 1.0 | -0.5pt | "Snapchat" wordmark on launch |
| Screen Title | Avenir Next Bold | 24pt | 700 | 1.15 | -0.2pt | "Chat", "Stories", "My Profile" |
| Section Header | Avenir Next Bold | 20pt | 700 | 1.2 | -0.1pt | "Best Friends", "My Story", "For You" |
| Chat Row Name | Avenir Next Bold | 16pt | 700 | 1.25 | 0pt | Friend name in inbox row |
| Chat Message | Avenir Next Medium | 16pt | 500 | 1.3 | 0pt | Chat bubble text |
| Chat Status | Avenir Next Medium | 13pt | 500 | 1.25 | 0pt | "Received · 2m ago", "Tap to reply" — color `#8A8A8F` |
| Story Name | Avenir Next Bold | 14pt | 700 | 1.2 | 0pt | Friend name under story thumbnail |
| Timestamp | Avenir Next Medium | 12pt | 500 | 1.2 | 0pt | "2m", "1h", "Yesterday" |
| Streak Count | Avenir Next Bold | 18pt | 700 | 1.0 | 0pt | Number beside 🔥 on friend row |
| Camera HUD Label | Avenir Next Bold | 13pt | 700 | 1.0 | 0.3pt | "NEW CHAT", "MEMORIES" — tracked uppercase |
| Primary Button | Avenir Next Bold | 16pt | 700 | 1.0 | 0.2pt | "Send To", "Add", "Save Story" |
| Lens Label | Avenir Next Bold | 13pt | 700 | 1.0 | 0.3pt | Under camera lens carousel — tracked small caps |
| Bitmoji Callout | Avenir Next Medium | 14pt | 500 | 1.3 | 0pt | Bitmoji caption bubbles on chat |
| Spotlight Caption | Avenir Next Medium | 14pt | 500 | 1.3 | 0pt | Creator username + caption overlay on video |
| Discover Tile Title | Avenir Next Bold | 16pt | 700 | 1.2 | -0.1pt | Story tile name "Snapchat News", "NBA" |

### Principles
- **Two weights only**: Avenir Next Bold (700) and Medium (500) carry nearly everything. Heavy (900) only on splash / streak hero. No regular, no light, no thin.
- **Tracked caps for HUD moments**: Camera HUD labels ("MEMORIES", "NEW CHAT") use uppercase with +0.3pt tracking — evokes the "capture" feeling
- **Text as overlay on imagery**: Camera HUD type sits on live photo/video, so Snapchat uses a subtle drop shadow (`rgba(0,0,0,0.4) 0 1px 2px`) or a semi-transparent pill background on text labels to keep legibility across any scene
- **Dynamic Type respected on Chat**: chat bubbles, friend names, bios scale with user preference. Camera HUD, streak counts, and lens labels stay fixed
- **Bitmoji faces are the "characters"**: Where other apps use type+photo hierarchy, Snapchat often uses bitmoji-as-character with minimal type — a friend row is "Bitmoji + Name" with almost no other text

## 4. Component Stylings

### Buttons

**The Snap Capture Button (The Big Yellow Circle)**
The most recognizable component in the app — the center-bottom button on the camera screen that captures snaps.
- Outer ring: 82pt diameter, 6pt wide ring, `#FFFC00` Snap Yellow — this is the always-visible "chrome" around the inner button
- Inner circle: 64pt diameter, `#FFFFFF` (white) — the actual tap target
- Tap (photo snap): inner circle scales 0.92 → 1.0 spring + `.impact(.soft)` haptic + camera shutter sound; flash animation white overlay 100ms
- Long-press (video snap): inner circle fills with `#FFFC00` over the press duration (up to 60s max), the outer ring becomes a progress indicator (yellow fills clockwise over 60s), `.impact(.medium)` haptic on start, `.impact(.soft)` ticks every second
- Double-tap: flips front/rear camera — shutter icon spins 180° + haptic
- Positioned: bottom-center, 20pt from bottom safe area

**Primary "Send" Button (On Snap Preview)**
After capturing a snap, user sees a preview screen with the "Send To →" button.
- Shape: Pill, 500pt corner radius
- Background: `#FFFC00` Snap Yellow
- Text: "Send To" in Avenir Next Bold 16pt `#000000`
- Trailing icon: `arrow.right` 16pt black
- Padding: 12pt vertical, 20pt horizontal
- Positioned: bottom-right corner of preview screen
- Pressed: scale 0.97 + soft haptic

**Camera HUD Icon Buttons**
Floating chromeless controls scattered around the camera viewfinder.
- No background by default — icon only, 28pt glyph, white with subtle shadow `rgba(0,0,0,0.4) 0 1px 2px`
- Size: 44pt hit area
- Icons in corners: flash top-left, flip-camera top-right, music track top-center, memories bottom-left, chat bottom-right
- When activated (e.g., flash on), icon turns `#FFFC00` yellow

**Chat Send Button**
- Shape: circle, 40pt diameter
- Background: `#FFFC00` when text is present, `#2C2C2C` when empty
- Icon: `paperplane.fill` rotated 45° in black when yellow, white when gray
- Pressed: scale 0.95 + `.impact(.light)` haptic

**Add Friend / Add Button**
- Shape: Pill, 500pt corner radius
- Not-friends: `#FFFC00` fill, black text + add icon
- Friends/added: `#2C2C2C` fill, white text "Added" + checkmark
- Font: Avenir Next Bold 14pt
- Padding: 6pt vertical, 14pt horizontal

**Lens Carousel Button (Camera)**
The horizontal strip of lens thumbnails above the capture button.
- Each lens: 60pt circle, bitmoji or lens icon thumbnail fill
- Active lens: 72pt (pulsed larger), with a `#FFFC00` outer ring 3pt
- Inactive: 60pt, no ring
- Scroll: horizontal, 12pt gap
- Below active: small caps label in Avenir Next Bold 13pt white

### Cards & Containers

**Chat Inbox Row**
- Full-width, `#000000` canvas, divided by 1pt `#333333` hairline
- Height: 72pt
- Leading: 48pt bitmoji avatar (circular frame)
- Next: friend name in Avenir Next Bold 16pt `#FFFFFF`
- Below name: **snap type icon** (colored square for photo/video/chat/audio) + status text in Avenir Next Medium 13pt `#8A8A8F`
- Trailing: timestamp "2m", streak flame + number "🔥 47" (if streak exists), "Tap to reply" subtle arrow indicator
- Tap row: opens chat
- Swipe left: reveals "Clear" action

**Snap Type Indicator (Square Icon on Chat Row)**
- 16pt filled square (unopened) or outlined square (opened)
- Colors: Red `#FF2E3D` (photo), Purple `#9B51FF` (video), Blue `#4DA7FF` (chat), Green `#4CD964` (audio)
- Direction marker: a small triangular arrow-pointing-in-direction (incoming = pointing into the square; outgoing = pointing out)
- Double-chat (you sent AND they sent unread): double-stacked icons

**Story Thumbnail (On Discover + Friends' Stories)**
- 120pt × 200pt vertical rectangle, 16pt corner radius
- Full-bleed story-preview image as background
- 3pt ring border: `#FFFC00` yellow (unread), `#555555` gray (read), `#FF2E3D` red (live)
- Top-left: 40pt circular bitmoji of creator
- Bottom-left: creator name in Avenir Next Bold 14pt white + shadow
- Horizontally scrolling row on Stories page with 12pt gaps

**Chat Bubble (Received)**
- Background: `#1A1A1A` (dark) with 20pt corner radius
- Max width: 75%
- Text: Avenir Next Medium 16pt `#FFFFFF`
- Padding: 10pt vertical, 14pt horizontal
- No tail — just rounded rect
- Aligned to leading side, 60pt indent from left (after bitmoji avatar area)

**Chat Bubble (Sent)**
- Background: `#2C2C2C` (slightly lighter dark) with 20pt corner radius
- Text: Avenir Next Medium 16pt `#FFFFFF`
- Aligned to trailing side
- Note: Snapchat chat bubbles are NOT color-coded like some messaging apps — both sent and received are dark gray variants

**Snap Map Zone Marker**
- Circular bitmoji of a friend pinned to their last-known location
- 48pt circular bitmoji with 2pt yellow ring around it
- "Sleeping" state: bitmoji closed-eyes + ZZZ emoji overlay
- "Driving" state: bitmoji in driver-seat pose
- Bottom label: friend name in 12pt white with subtle shadow

**Memories Grid Cell**
- Square 110pt × 110pt thumbnail with 8pt corner radius
- Stacked corner badges for multi-snap stories
- Tap opens full-screen player

**Spotlight Card (Full-Screen Vertical Video)**
- Edge-to-edge vertical video player (like TikTok)
- Trailing action column: favorite heart, comment, share, more — stacked at 28pt with count beneath
- Bottom: creator username + caption (2-line clamp) in Avenir Next Medium 14pt white
- Swipe up: next video; swipe down: previous

**Discover Tile (Publisher Story)**
- Card 120pt wide × 200pt tall, 16pt corner radius
- Top: publisher logo in top-left
- Background: cover image
- Bottom: tile title "Snapchat News" in Avenir Next Bold 16pt white + dark gradient overlay for legibility

### Navigation

**Bottom Navigation Strip (NOT a traditional tab bar)**
Unlike most apps, Snapchat uses a horizontal swipe between 5 screens with a minimal indicator strip at the bottom.
- Height: 56pt + safe area
- Background: semi-transparent `rgba(0,0,0,0.5)` over camera OR solid `#000000` on non-camera screens
- 5 tabs left-to-right: Map (map pin), Chat (speech bubble), Camera (center — larger, often just the outline of capture button), Stories (play icon), Spotlight (diamond)
- Icon size: 28pt for side icons, 48pt visualized for camera (actually the capture button sits above this strip)
- Active: `#FFFFFF`
- Inactive: `#555555` (lower contrast)
- Horizontal swipe transition between screens with a 300ms spring + rubber-band edges
- No labels

**Camera Top Bar (Floating)**
- No background — just icons floating over the viewfinder
- Leading: user's bitmoji (32pt) — tap opens profile
- Trailing: search (`magnifyingglass` 28pt), three-dots overflow
- All white with subtle drop shadow for legibility on any background

**Chat Top Bar**
- Height: 56pt + safe area
- Background: `#000000`
- Leading: user bitmoji + name in Avenir Next Bold 24pt "Chat"
- Trailing: plus icon 28pt (new chat)
- Hairline divider below

### Input Fields

**Chat Input Bar (Bottom of Chat Screen)**
- Height: 48pt, grows on multi-line
- Corner radius: 24pt (pill)
- Background: `#1A1A1A`
- Leading: camera icon 24pt white (opens in-chat camera)
- Center: "Send a chat" placeholder in Avenir Next Medium 15pt `#8A8A8F`
- Trailing when empty: emoji sticker icon 24pt + gallery icon 24pt
- Trailing when text entered: yellow send button 40pt circular

**Search Bar**
- Height: 44pt
- Corner radius: 22pt
- Background: `#1A1A1A`
- Leading: `magnifyingglass` 18pt `#8A8A8F`
- Placeholder: "Search" in Avenir Next Medium 16pt `#8A8A8F`

### Distinctive Components

**The Snap Capture Flow**
The center-point of the app. User on camera screen taps/holds the yellow capture button, a snap (photo or video) is captured, preview screen with filters/stickers/text overlay appears, user taps "Send To →" and selects recipients from the contacts grid.
- Flash animation: white overlay 100ms on capture
- Preview transition: captured image fades into full-screen preview over 200ms
- Edit tools (top-right): text, sticker, drawing pen, timer, save — all floating chromeless icons

**Bitmoji Everything**
- User's personalized 3D cartoon avatar (via Bitmoji app, integrated by default)
- Used as: profile photo (replaces any "user" icon), Snap Map marker, chat avatar, sticker in chats, streak flame character
- Default appearance: head-shot with expressive pose
- On Snap Map: full-body pose showing current activity ("driving", "sleeping", "at the beach")

**Streak Flame 🔥**
The signature habit-loop mechanic.
- 🔥 emoji + number next to friend names with active streaks
- Triggered: daily Snap-back-and-forth between two users for 3+ consecutive days
- Hourglass ⌛ replaces flame when streak is at risk (fewer than 4 hours to expire)
- Streak save toast: "Streak saved! 🔥" in Avenir Next Bold 16pt white on `#00D873` background
- Streak lost animation: flame turns gray + shatter particles + sad haptic

**Friend Emoji System**
Snapchat awards emoji badges next to friend names based on interaction patterns.
- 🔥 (fire): Active streak, number indicates days
- 💛 (yellow heart): #1 Best Friends (mutual top-sent-to)
- ❤️ (red heart): Best Friends for 2+ weeks
- 💕 (pink hearts): Best Friends for 2+ months
- 👶 (baby): You just became friends
- 😎 (sunglasses): One of their best friends is also one of yours (mutual)
- 🎂 (cake): It's their birthday
- 🏆 (trophy): You achieved a milestone together

**Ghost Logo (Ghostface Chillah)**
- Yellow rounded-pentagon ghost shape with simple black eyes
- Used: splash screen (`#FFFC00` background + white ghost), loading states, friend-request empty states
- Never colored other than yellow or white

**Snap Map View**
- Full-screen map with styled tiles (muted colors)
- Friend bitmojis pinned to their last known locations
- Heat-map overlay showing public snap activity density (warm = dense, cool = sparse)
- Search bar top: "Search location" with snap-location results
- Tap bitmoji: shows "Last updated 4m ago" popup

**Lens Carousel (Camera)**
- Horizontal scrollable row of circle thumbnails 4-5 visible at a time above the capture button
- Active lens thumbnail: 72pt with yellow ring + small caps label
- Inactive: 60pt, no ring
- Swipe left/right on camera viewfinder switches lenses (the whole screen's AR overlay changes in real time)
- "Explore" button at the end of carousel opens lens browser

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 72, 82
- Standard horizontal margin: 16pt on Chat/Stories screens
- Camera screen: edge-to-edge viewfinder, floating controls with 16pt inset from edges
- Capture button: 20pt from bottom safe area

### Grid & Container
- Chat rows: full-width at 72pt height
- Story thumbnails: 120pt × 200pt, 12pt horizontal gap
- Discover tiles: 2-column grid on Stories page, 8pt gap
- Spotlight: full-screen single-video column
- Snap Map: edge-to-edge with floating search

### Whitespace Philosophy
- **Chat breathes**: 72pt tall rows give the color-coded snap icons and bitmoji room to read
- **Camera is empty**: viewfinder is fully cleared of UI — controls float in the corners with purpose, never cluttering the center
- **Stories are dense**: the horizontal story strip packs 4-5 thumbnails per viewport to encourage browsing
- **Discover is a grid**: 2-column publisher tiles with compact 8pt gaps — magazine-like density

### Border Radius Scale
- Small (4pt): Lens carousel labels, small badges
- Card (8pt): Memories grid thumbnails
- Thumbnail (16pt): Story thumbnails, discover tiles, snap preview video corners
- Chat Bubble (20pt): Chat message bubbles (rounder than posts — messaging feel)
- Search / Pill (22pt / 500pt): Search bar, chat input bar pill, add-friend button
- Circle (50%): Bitmoji avatars, capture button, lens carousel thumbnails, send button

## 6. Depth & Elevation

Snapchat's depth is flat on UI surfaces but dramatic on imagery. The app privileges photography over chrome — the camera viewfinder is the most elevated surface because it's literally the primary content.

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Chat, Stories list, Spotlight (surfaces are just dark canvas) |
| Text-on-imagery (Level 0.5) | `rgba(0,0,0,0.4) 0 1px 2px` drop shadow on text | Camera HUD labels, story creator names, map pin names |
| Chat Bubbles (Level 1) | No shadow, pure background color contrast | Sent/received dark gray variants |
| Capture Button (Level 2) | No shadow, but the 6pt yellow ring acts as visual mass | Center-screen capture CTA |
| Snap Preview Tools (Level 2) | `rgba(0,0,0,0.4) 0 2px 8px` | Floating edit icons on snap preview screen |
| Sheet (Level 3) | `rgba(0,0,0,0.6) 0 -8px 24px` | Bottom sheet menus (send to friends list, emoji picker) |
| Modal Backdrop | `rgba(0,0,0,0.7)` | Behind story viewer, chat pop-in |

**Shadow Philosophy**: Shadows are used almost exclusively to keep text legible on live camera imagery — a soft drop shadow on HUD icons and labels so that on a bright sunny beach or a dark indoor shot, the UI stays readable. Chat and menu surfaces rely on solid color contrast, not elevation.

### Motion
- **Screen swipe (5-screen nav)**: horizontal page transition 300ms spring with rubber-band at edges; haptic `.impact(.soft)` on boundary resistance
- **Capture tap (photo)**: inner circle scale 0.92 → 1.0 spring 250ms + white flash overlay 100ms + `.impact(.soft)` + shutter sound
- **Capture hold (video)**: yellow progress ring fills clockwise over max 60s, `.impact(.medium)` on start, pulsing `.impact(.soft)` tick every 1s, release to stop
- **Camera flip (double-tap)**: shutter icon spins 180° 400ms + `.impact(.light)` + camera feed swaps
- **Lens swipe**: camera overlay cross-fades between AR effects over 200ms; center lens scales up 60pt → 72pt with yellow ring fade-in
- **Snap send**: preview screen slides left off-screen 300ms spring, confetti particles emit, success chime, return to camera
- **Streak save**: flame emoji bounces scale 1.0 → 1.3 → 1.0 + "+1 🔥" floats up 20pt fade-out over 600ms + success haptic
- **Bitmoji sticker tap in chat**: sticker pops in scale 0 → 1.0 spring 300ms + selection haptic
- **Story ring pulse (unread)**: yellow ring subtle glow-pulse every 2s (opacity 1.0 ↔ 0.7)
- **Snap Map zoom**: pinch-to-zoom with momentum deceleration

## 7. Do's and Don'ts

### Do
- Open the app directly into the live camera viewfinder — that's the Snapchat-native home state
- Use Snap Yellow `#FFFC00` for the capture button ring, streak flame, unread story ring, add-friend CTA — it's the single brand accent
- Structure the capture button as a 82pt outer yellow ring + 64pt inner white circle — the precise double-circle is iconic
- Color-code snap types in the inbox: red (photo), purple (video), blue (chat), green (audio) — this is the at-a-glance inbox language
- Use bitmoji as the default profile photo everywhere — replace generic user icons with bitmoji throughout
- Use Avenir Next Bold and Medium as the primary UI type — no thin, no regular (400)
- Float camera controls chromelessly with subtle drop shadows — no UI frame around the viewfinder
- Include friend emojis (🔥, 💛, 👑, 😎, 🎂) next to friend names based on interaction context
- Use swipe-between-five-screens navigation (Map | Chat | Camera | Stories | Spotlight) — not a traditional tab bar
- Pulse the unread story ring yellow with subtle opacity animation — signals "new content"
- Pair the capture flow with haptic + sound — shutter haptic + click sound on photo snap

### Don't
- Don't open to a feed — Snapchat always opens to the camera
- Don't use a bottom tab bar like Instagram/Facebook — Snapchat uses swipe navigation
- Don't reduce the yellow on the capture button — the 82pt ring is the brand signature
- Don't colorize chat bubbles like iMessage blue/gray — Snapchat bubbles are dark gray on dark canvas
- Don't replace bitmoji with photo avatars as the default — bitmoji IS the profile photo in Snapchat
- Don't add permanent UI chrome around the viewfinder — camera is always edge-to-edge
- Don't use light mode as the default — the app's gravity is dark/camera-focused
- Don't use thin font weights — Avenir Next weights in the app are 500 and 700 only
- Don't use uppercase everywhere — uppercase is reserved for HUD labels like "MEMORIES" with +0.3pt tracking
- Don't show read receipts as checkmarks — Snapchat shows them as the snap-type icon transitioning from filled to outline
- Don't skip the streak mechanics — the 🔥 and accompanying emoji system IS the social habit loop
- Don't make chat messages persist by default — the signature is ephemerality; messages delete on close unless saved

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Capture button 72pt (smaller); lens carousel 4 visible |
| iPhone 13/14/15 | 390pt | Standard 82pt capture button; lens carousel 5 visible |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated — top camera icons shift around it |
| iPhone 15/16 Pro Max | 430pt | 82pt capture + larger lens thumbnails 72pt; more discover tiles per row |
| iPad | 768pt+ | Camera stays centered at max 768pt width; Chat opens to split-view with conversation list + thread |

### Dynamic Type
- Chat messages, chat row names, bio, settings text: full scale
- Camera HUD labels, streak counts, lens labels, tab indicators: fixed (layout-sensitive)
- Timestamps: fixed 12pt
- Story thumbnail names: fixed 14pt

### Orientation
- Camera: **portrait-locked** (the app's gravity)
- Chat / Stories / Spotlight / Map: **portrait-locked**
- Video playback in Spotlight / Stories: **rotates to landscape** for fullscreen
- Snap capture while video recording: can rotate if user physically rotates device, but interface stays portrait

### Touch Targets
- Capture button: 82pt — the largest in any app
- Lens thumbnails: 60-72pt
- Chat row: 72pt tall, full-row tappable
- Camera HUD icons: 28pt glyph with 44pt hit area
- Bottom nav icons: 28pt glyph, 56pt effective hit
- Chat send button: 40pt

### Safe Area Handling
- Top: camera icons respect safe area + Dynamic Island; bitmoji shifts slightly around island on Pro devices
- Bottom: capture button 20pt above home indicator; bottom nav strip respects safe area
- Sides: 16pt insets on Chat and Stories; camera is edge-to-edge

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas black: `#000000`
- Surface 1: `#1A1A1A`
- Surface 2: `#2C2C2C`
- Divider: `#333333`
- Text primary: `#FFFFFF`
- Text secondary: `#8A8A8F`
- Snap Yellow: `#FFFC00`
- Photo red: `#FF2E3D`
- Video purple: `#9B51FF`
- Chat blue: `#4DA7FF`
- Audio green: `#4CD964`
- Success green: `#00D873`
- Error red: `#FF3B30`

### Example Component Prompts
- "Build Snapchat's capture button in SwiftUI: concentric double-circle. Outer: 82pt diameter, 6pt wide ring in `#FFFC00` Snap Yellow. Inner: 64pt white circle centered inside. On tap (photo): inner circle scales 0.92 → 1.0 spring 250ms, white screen flash overlay 100ms, `.impact(.soft)` haptic + camera shutter sound. On long-press (video): inner fills with `#FFFC00` while outer ring becomes a clockwise progress indicator filling over max 60s, `.impact(.medium)` on start, soft ticks every 1s. On double-tap: camera flips front/rear with shutter icon 180° spin + light haptic. Position: bottom-center of camera viewfinder, 20pt from bottom safe area."
- "Create a Snapchat chat inbox row: 72pt height on `#000000` canvas, 1pt `#333333` divider bottom. Leading 48pt circular bitmoji avatar (16pt from left). Right of avatar: friend name 'Sarah Jones' in Avenir Next Bold 16pt `#FFFFFF`, below it the snap type indicator — 16pt filled square in red `#FF2E3D` for photo, purple `#9B51FF` for video, blue `#4DA7FF` for chat, green `#4CD964` for audio, with a triangular arrow pointing into the square (received) or out of it (sent) — followed by status 'Received · 2m ago' in Avenir Next Medium 13pt `#8A8A8F`. Trailing: timestamp '2m' in 12pt `#8A8A8F`, streak emoji '🔥 47' in Avenir Next Bold 18pt if streak exists."
- "Design the Snapchat Stories section: horizontal scrollable row of story thumbnails, each 120pt × 200pt rounded 16pt, full-bleed story preview image background. 3pt ring border: `#FFFC00` yellow for unread with subtle 2s opacity-pulse animation (1.0 ↔ 0.7), `#555555` gray for read, `#FF2E3D` red for live. Top-left: 40pt circular bitmoji of creator. Bottom-left: creator name in Avenir Next Bold 14pt white with `rgba(0,0,0,0.4) 0 1px 2px` drop shadow. 12pt horizontal gap between thumbnails."
- "Build the Snapchat camera HUD in SwiftUI: full-screen live camera viewfinder as background, chromeless controls floating in corners with `rgba(0,0,0,0.4) 0 1px 2px` drop shadow on icons for legibility over any scene. Top-left: user bitmoji 32pt (profile). Top-right: `magnifyingglass` 28pt (search). Bottom-left: `photo.on.rectangle` 28pt (memories). Bottom-right: `bubble.left.fill` 28pt (chat). Above capture button: horizontal lens carousel of 60pt circular lens thumbnails, active lens scaled to 72pt with 3pt `#FFFC00` ring + 'Beach' label in Avenir Next Bold 13pt w700 tracked 0.3pt uppercase white. Center-bottom: capture button (see separate prompt)."
- "Create the Snapchat chat bubble pair: received bubble on leading side — `#1A1A1A` background, 20pt corner radius, 10pt×14pt padding, Avenir Next Medium 16pt `#FFFFFF` text, max 75% width, 60pt left indent to leave room for 32pt circular bitmoji on trailing edge of leading gutter. Sent bubble on trailing side — `#2C2C2C` background, same radius/padding/font, aligned to right edge of screen. No tails — just rounded rectangles. Between-bubbles gap: 4pt for same sender, 12pt for sender change."
- "Build the Snap Map view: full-screen styled map (muted pastel tiles), user's friends displayed as 48pt circular bitmoji pins at their last-known locations with a 2pt yellow `#FFFC00` ring around each. Each pin shows friend's bitmoji in context pose ('driving' pose with car, 'sleeping' pose with ZZZ, 'beach' pose with sunglasses). Bottom-right: friend name label in 12pt white with drop shadow. Heat-map overlay in corners: yellow `#FFFC00` in cool zones, warming through orange `#FF9A1F` to red `#FF2E3D` in dense public-snap zones. Search bar top: `magnifyingglass` + 'Search location' in a pill at 44pt with `#1A1A1A` fill."

### Iteration Guide
1. Camera IS the home screen — the app opens directly to the live viewfinder full-screen
2. Snap Yellow `#FFFC00` is the aggressive brand accent — capture ring, streak flame, unread story ring, ghost logo
3. Capture button is the 82pt outer yellow ring + 64pt inner white circle — the precise double-circle is iconic
4. Navigation is swipe-between-five-screens (Map | Chat | Camera | Stories | Spotlight) — NOT a tab bar
5. Color-code snap types in chat: red (photo), purple (video), blue (chat), green (audio)
6. Bitmoji replaces profile photos app-wide — user's personalized cartoon avatar is the "face"
7. Typography is Avenir Next at Medium (500) and Bold (700) only — warm humanist geometric sans
8. Camera UI is chromeless — floating icons with drop shadow, no UI frame around the viewfinder
9. Friend emojis are the habit-loop mechanic: 🔥 streaks, 💛 best friends, 😎 mutual BFFs, 🎂 birthdays
10. Ephemerality is the UX signature — chats delete on close, stories expire in 24h; never persist content by default