iOS Design Spec

# Encryption is a color.
So is read.

The WhatsApp iOS app, dissected. One green that means action, one green-tint that means "you sent it," one blue that means "they saw it." The chat does the rest.

View Design Tokens Explore Surfaces
9:41
Updates
+
My status
Tap to add status update
Recent updates
Marie
10 minutes ago
João
28 minutes ago
Family group
1 hour ago
Viewed updates
Akira
Today, 8:14 AM
Studio team
Yesterday, 9:02 PM
Chats
Updates
Communities
Calls
Status / Updates
9:41
Chats
Ask Meta AI or Search
All
Unread
Favourites
Groups
Marie Kn.
10:42
Magic hour shots ready 📸
3
João Silva
10:18
Saw your message about the studio
Family 👨‍👩‍👧
9:51
Mom: We're coming tomorrow at...
Akira
Yesterday
Voice message · 0:42
Studio team
Yesterday
~ Pedro: Approved 👍
Travel ✈️
Mon
📍 Pinned · Itinerary updated
Chats
Updates
Communities
Calls
Chats list
9:41
Marie Kn.
online
Today
Messages and calls are end-to-end encrypted.
Did you get the shots from the studio? 10:14
Yes! Just finished editing. 10:18
Sending them now ✨ 10:18
😍😍😍 10:38
0:42
Magic hour shots ready 📸 10:42
Type a message
Chat thread
iOS Surface Anatomy

## Three surfaces. Two greens. One blue tick.

Every WhatsApp screen earns its position on an iPhone through the same rules — paper-white chat canvas, conversation-tinted bubbles, action green for new things, and a deep teal header that grounds the room.

### Chats list

Vertical list with 44pt avatars, name + preview + timestamp. Unread count in `#25D366` pill aligned right. Mute icon replaces the badge when notifications are off. Pinned chats sort to top.

### Chat thread

Deep teal header. Wallpaper-tinted canvas `#ECE5DD`. Incoming white bubble, outgoing `#DCF8C6` green-tint. Date separators as floating pills. E2E lock notice as a yellow pill on entry.

### Status / Updates

Story ring style — green ring on unviewed, gray on viewed. "My status" with + plus chip in `#25D366` circle. Below: recent (chronological) and viewed sections, separated by a quiet gray header bar.

End-to-end encryption

### A yellow pill, every time you open the room.

Every new chat opens with an encryption notice in a soft warning-yellow pill — a tap reveals the security code modal. The pill never appears mid-conversation; it lives at the top, anchoring the thread to a guarantee.

The lock glyph carries through to the chat info screen, where verifying via QR code is one tap away.

`bg: #FFF3C4` `ink: #856404` `radius: 8px` `position: top-of-thread`
Messages and calls are end-to-end encrypted.
Signal Protocol · Curve25519 · AES-256
0:18 / 0:42
Hold mic to record · slide left to cancel
Auto-transcribe in 6 languages (iOS 17+)
Voice messages

### A waveform that listens with you.

Voice messages render as a real waveform — sampled from the actual audio, not a placeholder. The bar darkens as playback advances. Speed-up (1x → 1.5x → 2x) replaces the play icon during playback.

Transcription (iOS 17+) appears below the waveform in a quoted style, available even before the recipient hears it.

`bars: real PCM` `color: #075E54` `played alpha: 1.0` `unplayed alpha: 0.35`
Read receipts

### Single → double → blue. A status ladder that doesn't lie.

One gray check = sent to server. Two gray checks = delivered to recipient's device. Two BLUE checks = read. The ladder is rigorously enforced — there is no half-state, no animation between steps, no ambiguity.

Recipients can disable read receipts globally, which makes their last check stay gray. Groups disable read receipts when ≥ 32 members.

`sent: #54656F` `delivered: #54656F` `read: #34B7F1`
Sent
single gray check · uploaded
Delivered
double gray · on device
Read
double blue · #34B7F1
Design System Reference

## Two greens, one blue, paper-white canvas.

Every token WhatsApp's iOS app reaches for — surface ladder, type ramp, radius scale, components. The bubbles are the lowest-radius non-pill element in the entire app — the corner says "this is the seam where two people meet."

View Source ↗

### Color

A two-green system — action green (`#25D366`) for new things, and conversation green (`#DCF8C6`) for what you've sent. Deep teal grounds the chat header. Blue means "they saw it." Everything else is paper.

Brand Greens
Action
#25D366
Mid Teal
#128C7E
Deep Teal
#075E54
Bubble Out
#DCF8C6
Wallpaper
#ECE5DD
Ink
Ink Primary
#000000
Ink 2
#3B4A54
Ink Soft
#54656F
Ink Muted
#667781
Ink Dim
#8696A0
Surface & Border
Canvas
#ffffff
Canvas Soft
#F7F8FA
Surface 2
#F0F2F5
Border
#E9EDEF
Hairline
#EFF1F4
Functional
Read Blue
#34B7F1
Link
#0086CB
Negative
#EA4335
Warning
#FFD700
E2E Pill
#FFF3C4

### Typography

SF Pro Text on iOS (substituted with Inter here). Contact names 16/600. Message body 16/400. Timestamps 12 muted right-aligned. Numbers tabular for unread counts and timestamps.

Token | Sample | Size | Weight | Tracking
--- | --- | --- | --- | ---
--header-title | Chats | 22 / 1.38rem | 700 | -0.4px
--contact-name | Marie Kn. | 16 / 1.00rem | 600 | normal
--message-body | Magic hour shots ready | 16 / 1.00rem | 400 | normal
--preview | Saw your message about the studio | 14 / 0.88rem | 400 | normal
--timestamp | 10:42 | 12 / 0.75rem | 400 (tnum) | normal
--badge | 3 | 11 / 0.69rem | 700 | normal
--bubble-time | 10:18 | 11 / 0.69rem | 400 | normal
--e2e-notice | Messages are end-to-end encrypted | 12 / 0.75rem | 400 | normal

### Radius

The chat bubble lives at 7.5px — sharp enough to feel like ink on paper, soft enough to feel friendly. Avatars are perfect circles. The mic FAB is the only "extruded" element with elevated shadow.

Min
2px
Tile
6px
Bubble
7.5px
Button
8px
Card
14px
Input
18px
Pill
9999px
Avatar
50%

### iOS Spec Strip

The constants that anchor the iOS implementation.

Avatar size
44pt
Chats list. Drops to 32pt in chat header, 46pt in Status.
Bubble corner cut
0pt
Sender-side corner is 0 — the "speech tail" anchor. Other 3 corners 7.5pt.
Chat header height
56pt
Always deep teal #075E54. Always shows last-seen.
Wallpaper
#ECE5DD
Default. User can swap to solid, gradient, or photo per chat.
Mic FAB
32pt
Hold to record. Slide left to cancel. Slide up to lock recording.
Read receipt timing
≤ 2s
Server roundtrip from delivered → read.
Date separator
10pt
Centered pill in chat. Renders "Today", "Yesterday", or DD MMM YYYY.
Animation curve
easeOut
0.22s. Sheet presentations use spring (0.5 response, 0.8 damping).

### Components

The vocabulary of a conversation app: pills for status, bubbles for content, circles for people.

##### Buttons

Send Start chat Cancel Block

##### Inputs

Unread (3) Read E2E

##### Bubbles

Did you get the shots? 10:14
Sending now ✨ 10:18
View source ↗