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.
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.
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.
Each friend gets an arrow that color-codes sent / received / opened. Streak count + flame emoji. Bitmoji is the avatar — never an initial bubble.
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.
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
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
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
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.
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.
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 |
Two poles only: circles (avatars, buttons, lenses, story rings) and squares (Discover tiles, camera frame). The middle ground is rare.
Anchors that survive the camera-first paradigm.
Yellow buttons. Black buttons. Bitmoji circles. Color-coded arrows. The vocabulary is short on purpose.