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.
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.
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.
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.
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.
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
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
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
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."
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.
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 |
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.
The constants that anchor the iOS implementation.
The vocabulary of a conversation app: pills for status, bubbles for content, circles for people.