iOS Design Spec

# The camera opens
and the app is already on.

The Snapchat iOS app, dissected. Yellow IS the chrome. The camera is the home screen. Color-coded arrows do the job of words. Bitmoji turn every face into a feeling.

View Design Tokens Explore Surfaces
9:41
Chat
Search
All
Friends
Groups
marie
Sent · 2m
🔥 42
daniel
Received Snap · 4m
🔥 128
penny
Received Video · 12m
🔥 7
cosmo
Opened · 1h
team-snap
jiang: see you tn
🔥 365
kira
Tap to chat
Map
Chat
Stories
Spotlight
Chat
9:41
Map
Chat
Stories
Spotlight
Camera
9:41
Stories
Friends
marie
daniel
penny
cosmo
kira
For You
Cosmopolitan
Inside the chaos of fashion week
National Geo
A blue whale's lullaby, recorded
Tasty
5-minute breakfast you'll actually make
ESPN
The play of the year. Watch.
Map
Chat
Stories
Spotlight
Stories
iOS Surface Anatomy

## Three surfaces. One unmistakable yellow.

Snapchat doesn't have brand chrome — the brand IS the chrome. Open the app and you're in the camera. Swipe right for chat. Swipe left for stories. The whole shape of the product fits inside one gesture vocabulary.

### Camera

The home screen. Full-bleed black preview, a single white shutter ring, a lens carousel that lives above the button. Long-press → record. Right swipe → chat. Left swipe → stories.

### Chat

Each friend gets an arrow that color-codes `sent` / `received` / `opened`. Streak count + flame emoji. Bitmoji is the avatar — never an initial bubble.

### Stories

Friends section on top with story rings — pink/red unviewed gradient, gray when viewed. For You / Subscriptions render as 9:16 tiles with publisher tag + headline.

Shutter Button

### One button, two intentions.

Tap takes a photo. Press and hold records video. The same surface — a 84pt white inner circle inside a 120pt white ring — morphs at touch-down: the ring turns red, the inner becomes a 42pt rounded square. No labels, no tooltips.

The shutter sits dead-center horizontally, 96pt above the tab bar. Haptic light on tap, haptic medium at record start.

`ring: 120 × 8pt` `fill: 84 × 84pt` `recording: #FF4B4B` `radius: 50% → 14px`
tap → photo
press → video
Sent Text
Solid blue arrow
Sent Video
Solid red arrow
Received Video
Solid purple arrow
Opened (you)
Hollow pink arrow
Color-Coded Arrows

### The send arrow IS the status.

Snapchat's chat row carries no text. Just an arrow and a color. Blue means text sent. Red means video. Purple means received-but-unopened. Pink means opened by you. A whole conversation state in 14 pixels.

Hollow vs solid is the second axis — sent (solid), received (solid), opened (hollow / arrow inverted).

`blue: #3F6DFF` `red: #FF4B4B` `purple: #A45CFF` `pink: #FF77B6`
Bitmoji + Friendmoji

### Every avatar is already a feeling.

Snapchat's avatar isn't a photo crop — it's a Bitmoji, posed differently per context. The same friend appears reading a book in a chat, dancing in a story header, sleeping on the Snap Map. Friendmoji combines two avatars into one circle for shared moments.

Avatars always render at 50% radius. Bitmoji never gets a status dot — its pose IS the status.

`radius: 50%` `profile: 68 × 68pt` `chat row: 42 × 42pt` `friendmoji: 96 × 68`
Design System Reference

## The whole vocabulary, in one place.

Every token Snapchat's iOS app reaches for. Yellow is the only color you don't get to negotiate — and it lives at every level of the system, from the icon to the chrome to the loading state.

View Source ↗

### Color

One brand yellow, pure black ink, no gray middle ground. The signal palette comes from the send-arrow code — blue / red / purple / pink — used only on functional surfaces.

Primary Brand
Snap Yellow
#FFFC00
Yellow Deep
#FFE800
Yellow Soft
#FFFE7A
Ink
#000000
Paper
#ffffff
Send Arrow Codes
Sent Text
#3F6DFF
Sent Video
#FF4B4B
Received Video
#A45CFF
Opened
#FF77B6
Streak Flame
#FF7C30
Story Rings
Unviewed
pink → red
Live
light → blue
Viewed
#D0D0D0
Highlight
yellow → orange
Custom Pack
green
Chrome / Surface
Search BG
#F4F4F4
Border
#ECECEC
Placeholder
#7a7a7a
Cam BG
#1a1a1a
Bitmoji Base
#FFD89A

### Typography

Avenir Next is the production face, substituted here with Inter. Heavy weights for friend names. Body weights for everything else. Numbers are rare — and they're proud (streak counts, time-since).

Token | Sample | Size | Weight | Notes
--- | --- | --- | --- | ---
--screen-title | Chat | 20 / 1.25rem | 900 | top-left
--friend-name | marie | 16 / 1.00rem | 800 | list row
--status-line | Sent · 2m | 13 / 0.81rem | 600 | muted
--publisher | Cosmopolitan | 11 / 0.69rem | 800 | discover
--headline | A blue whale's lullaby | 14 / 0.88rem | 900 | discover
--streak | 🔥 128 | 13 / 0.81rem | 800 (tnum) | orange
--tab | Map | 11 / 0.69rem | 700 | nav
--time-since | 12m | 11 / 0.69rem | 600 | row-trail
--lbl-snap | marie | 9.5 / 0.59rem | 600 | story label

### Radius

Two poles only: circles (avatars, buttons, lenses, story rings) and squares (Discover tiles, camera frame). The middle ground is rare.

Media
0
Min
4px
Tile
8px
Card
12px
Sheet
14px
Modal
18px
Pill
∞
Circle
50%

### iOS Spec Strip

Anchors that survive the camera-first paradigm.

Shutter ring
120pt
8pt white stroke. 84pt fill. Sits 96pt above tab bar.
Tab bar
62pt
Black fill. Middle tab disc is 42pt yellow circle.
Avatar (chat)
42pt
Bitmoji at 50%, never an initial bubble.
Story ring
50pt
2pt gradient border. 2pt white gap to bitmoji.
Lens carousel
36pt
Off-state lenses; selected lens grows to 54pt.
Arrow icon
14pt
Solid arrow for sent/received. Hollow for opened.
Side icon disc
30pt
Black 40% over preview. Glass blur 20pt.
Discover tile
9:16
Publisher tag bottom-left, headline below it.

### Components

Yellow buttons. Black buttons. Bitmoji circles. Color-coded arrows. The vocabulary is short on purpose.

##### Buttons

Send Snap Add Friend Skip Save Story

##### Inputs & Tags

🔥 42 NEW Seen

##### Friend Row

marie
Sent · 2m
🔥 42
View source ↗