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
24tokens
8type steps
3radius steps
4pxspacing base
Snapchat, in one page
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
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
#FFFC00for 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
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 Snapchat design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Snap Yellow: #fffc00
- Yellow Pressed: #e6e300
- Pure Black: #000000
- Pure White: #ffffff
- Canvas Black: #000000
- Surface 1: #1a1a1a
- Surface 2: #2c2c2c
- Divider: #333333
- Light Canvas: #ffffff
- Light Surface 1: #f2f2f2
Type:
- families: Avenir Next, Avenir Next Heavy, Fallback Stack, Avenir Next Bold
- scale: 12, 13, 14, 16, 18, 20, 24, 48
- weights: 500, 700, 900
Shape:
- radius: 16, 22, 24
- elevation: Bottom-left: creator name in Avenir Next Bold 14pt white + shadow | Bottom label: friend name in 12pt white with subtle shadow | All white with subtle drop shadow for legibility on any background
Spacing: 4, 6, 10, 12
Rules:
- 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)
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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.
Type scaleRead the full spec
Font Family
- Primary:
Avenir Next(by Adrian Frutiger, published by Linotype) — a humanist geometric sans with warm curves and a distinctive two-story lowercasea. Snapchat ships Avenir Next Bold and Avenir Next Medium as the primary UI faces. - Display / Branded Moments:
Avenir Next Heavyfor 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
Components and layoutRead the full spec
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,
#FFFC00Snap 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
#FFFC00over 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:
#FFFC00Snap Yellow - Text: "Send To" in Avenir Next Bold 16pt
#000000 - Trailing icon:
arrow.right16pt 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
#FFFC00yellow
Chat Send Button
- Shape: circle, 40pt diameter
- Background:
#FFFC00when text is present,#2C2C2Cwhen empty - Icon:
paperplane.fillrotated 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:
#FFFC00fill, black text + add icon - Friends/added:
#2C2C2Cfill, 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
#FFFC00outer 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,
#000000canvas, divided by 1pt#333333hairline - 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:
#FFFC00yellow (unread),#555555gray (read),#FF2E3Dred (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)
Responsive behaviourRead the full spec
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-snapchat {--page-bg: #000000;
--page-bg-gradient: none;
--text-color: #969696;
--heading-color: #969696;
--link-color: #fffc00;
--link-hover-color: #ccca00;
--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: #fffc00;
--button-text-color: #000000;
--button-hover-bg: #ccca00;
--button-border: none;
--button-border-radius: 22px;
--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-sans);
--heading-font: var(--font-sans);
--card-border-radius: 22px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- google maps 81.7%
- nextdoor 72.0%
- clay 71.8%
- tinder 71.3%
- grubhub 70.7%
Where this came from
- Source document
ios/design-md/social/snapchat/DESIGN.md· 32.4 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.