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
8pxspacing base
Whatsapp, in one page
WhatsApp's iOS app is a utility-first messenger dressed in a narrow, signature palette of green, teal, and white. The interface is aggressively native: tabbed bottom navigation, stock SF Pro typography, SF Symbols throughout, iOS-native swipe gestures, and native share sheets. WhatsApp has never tried to be a "platform" in the Instagram sense — it has tried to be the phone's SMS replacement, and the UI reflects that goal with near-monastic restraint. The app disappears, the message bubble is the hero.
The signature color moment is a two-stop green system: WhatsApp Green (#25D366) on the send button, floating action button, active read-receipt tick, and the voice-message record ring; and WhatsApp Teal (#075E54) as the legacy brand accent seen on link tints, the QR code screen, and the Meta-era "WhatsApp" brand chrome. Outgoing chat bubbles sit on a specific mint-leaf tint (#D9FDD3 light mode, #005C4B dark mode), a color so load-bearing that it is immediately recognizable even as a single decontextualized pixel. Incoming bubbles are a neutral white/gray that fades into the wallpaper. The chat canvas itself carries a subtle doodle wallpaper by default — an optional cream pattern in light mode and a near-black dark-mode variant — that makes a busy chat feel warm rather than utilitarian.
Typography is pure SF Pro. WhatsApp ships no proprietary font; instead it leans on iOS Dynamic Type so aggressively that every label, timestamp, and bubble text scales up to accessibility sizes without breaking layout. Contact names in the chat list are 17pt semibold, message previews are 15pt regular in secondary gray, bubble text is 17pt regular, timestamps are 12pt regular. The typographic restraint is deliberate: this is a messenger built for a billion daily users across every literacy level and device generation, so the type system defers to whatever the OS wants to render.
Key Characteristics:
- WhatsApp Green (
#25D366) reserved for send / voice-record / positive status — the verb color - Teal (
#075E54) as the legacy brand tint — QR code, link highlights, Meta-era chrome - Mint-leaf outgoing chat bubble (
#D9FDD3light /#005C4Bdark) — iconic enough to pixel-identify - Tabbed bottom navigation (2024+): Updates / Calls / Communities / Chats / Settings
- Voice message waveform as a signature interactive component with playback-synced bar fill
- Blue double-check read receipts — the universal "seen" signal
- End-to-end encryption lock symbol on every chat header — trust as UI
- Native SF Pro + SF Symbols everywhere — WhatsApp defers to iOS conventions
- Light / Dark / Auto themes; wallpaper customization per chat
- Status ring (green) around contact avatars with active Status updates
Do's and don'ts
Do
- Use
#25D366(WhatsApp Green) for send, answer-call, record, and positive primary actions - Use
#D9FDD3(light) or#005C4B(dark) for outgoing bubbles — the mint-leaf is iconic - Keep bubble tails asymmetric — rounded all corners except one pointed at sender
- Rely on Dynamic Type; never hardcode pt sizes that won't scale
- Use SF Pro + SF Symbols as your default — WhatsApp looks native because it IS native
- Use blue double ticks (
#53BDEB) for read receipts — this is universally understood - Use the lock icon for end-to-end encryption indicators — the semantic weight matters
- Show the encryption banner as the first message in every new chat
- Blur the top nav and bottom tab bar with
.regularMaterial - Use green status rings for unread, gray for viewed status updates
Don't
- Don't use pure black canvas — WhatsApp dark mode is
#111B21, a blue-black - Don't round bubble corners equally — the asymmetric tail is core to the form language
- Don't use red for send or positive actions — red is reserved for delete, fail, and call-decline
- Don't place the "new chat" FAB inside the tab bar — keep it as a nav-bar trailing icon
- Don't add custom fonts — WhatsApp's iOS typography is pure SF Pro
- Don't use gradients on UI chrome — WhatsApp is flat color
- Don't hide the timestamp inside bubbles at small sizes — users scan bubbles for recency
- Don't use green text — green is structural (send, answer, read, status ring), not decorative
- Don't break out of native iOS swipe-actions for row gestures
- Don't use heavy shadows — WhatsApp is aggressively flat
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 Whatsapp design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- WhatsApp Green: #25d366
- Green Pressed: #1ebe5d
- Teal: #075e54
- Mid Teal: #128c7e
- Dark Teal: #054d44
- Outgoing Bubble (Light): #d9fdd3
- Outgoing Bubble (Dark): #005c4b
- Incoming Bubble (Light): #ffffff
- Incoming Bubble (Dark): #1f2c34
- Reply Strip: #06cf9c
Type:
- families: SF Pro Text, SF Pro Display, Fallback Stack, SF Mono
- scale: 10, 11, 12, 13, 15, 16, 17, 34
- weights: 400, 500, 600, 700
Shape:
- radius: 10, 12, 24
- elevation: Background: `#FFFFFF` light / `#2A3942` dark with soft shadow
Spacing: 8, 12
Rules:
- Use `#25D366` (WhatsApp Green) for send, answer-call, record, and positive primary actions
- Use `#D9FDD3` (light) or `#005C4B` (dark) for outgoing bubbles — the mint-leaf is iconic
- Keep bubble tails asymmetric — rounded all corners except one pointed at sender
- Rely on Dynamic Type; never hardcode pt sizes that won't scale
- Use SF Pro + SF Symbols as your default — WhatsApp looks native because it IS native
- Use blue double ticks (`#53BDEB`) for read receipts — this is universally understood
Avoid:
- Don't use pure black canvas — WhatsApp dark mode is `#111B21`, a blue-black
- Don't round bubble corners equally — the asymmetric tail is core to the form language
- Don't use red for send or positive actions — red is reserved for delete, fail, and call-decline
- Don't place the "new chat" FAB inside the tab bar — keep it as a nav-bar trailing icon
- Don't add custom fonts — WhatsApp's iOS typography is pure SF Pro
- Don't use gradients on UI chrome — WhatsApp is flat color
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- WhatsApp Green (
#25D366): The send color — send button, FAB, active mic record ring, read-receipt "sent" green (before double-blue), phone-call answer button. - Green Pressed (
#1EBE5D): Pressed / active state for green CTAs. - Teal (
#075E54): Legacy brand accent — QR screen, business-account badge, link highlights in some older screens. - Mid Teal (
#128C7E): Secondary brand — used for outgoing bubble text accent, checkmark ticks pre-read. - Dark Teal (
#054D44): Deep brand chrome — rare, seen on splash and some dark-mode backgrounds.
Chat Bubbles
- Outgoing Bubble (Light) (
#D9FDD3): The mint-leaf tint on your own messages. - Outgoing Bubble (Dark) (
#005C4B): Dark-mode outgoing — deep teal-green. - Incoming Bubble (Light) (
#FFFFFF): Pure white on the wallpaper canvas. - Incoming Bubble (Dark) (
#1F2C34): A muted blue-gray that reads as "paper" in dark mode. - Reply Strip (
#06CF9Cor#25D36630% tint): The vertical accent bar on a quoted-reply preview inside a bubble.
Canvas & Surfaces
- Chat Wallpaper (Light) (
#ECE5DD): The iconic cream doodle-wallpaper background — modifiable per chat. - Chat Wallpaper (Dark) (
#0B141A): Default dark wallpaper — a deep blue-black. - App Canvas (Light) (
#FFFFFF): Chat list and settings screens. - App Canvas (Dark) (
#111B21): Primary dark canvas — a slight blue tint, not true black. - Surface 1 (Light) (
#F7F8FA): Section group background on Settings. - Surface 1 (Dark) (
#202C33): Elevated surface — input bar background, reply strip. - Surface 2 (Dark) (
#2A3942): Higher elevation — system messages, pinned bar, context menus. - Divider (Light) (
#E9EDEF): Hairline between chat list rows. - Divider (Dark) (
#222D34): Dark-mode hairline.
Text
- Text Primary (Light) (
#111B21): Bubble text, contact names, screen titles. - Text Secondary (Light) (
#667781): Message preview, timestamps, section subtitles. - Text Tertiary (Light) (
#8696A0): Placeholder, disabled labels. - Text Primary (Dark) (
#E9EDEF): Bubble text and titles in dark mode. - Text Secondary (Dark) (
#8696A0): Message preview in dark mode. - Timestamp in-Bubble (
#667781light /#8696A0dark): The time stamp inside an outgoing or incoming bubble.
Semantic
- Read Blue (
#53BDEB): The double blue ticks — read receipt. This is THE most semantically loaded color in the app. - Sent Gray (
#8696A0): Single gray tick — sent but not delivered. - Delivered Gray (
#8696A0): Double gray ticks — delivered but not read. - Error Red (
#F15C6D): Failed-to-send bubble tint, delete chat confirmation. - Record Red (
#F15C6D): Voice-record active ring (rare — WhatsApp uses green here, red is reserved for in-recording decibel meter overflow). - Status Ring Green (
#25D366): The ring around avatars with active, unread Status updates. - Status Ring Gray (
#8696A0): Status ring for viewed statuses. - Verified Green Check (
#25D366): Official business badge checkmark.
Dark Mode
WhatsApp's dark mode is a blue-black utility — it's not true black (that would bleach the mint-leaf bubble) and it's not quite gray (that would lose the WhatsApp feel). It's #0B141A on the chat wallpaper and #111B21 on the app canvas.
- All accent colors retain their light-mode hex; brand greens stay bright.
- The outgoing bubble shifts from mint-leaf to deep teal-green (
#005C4B) for contrast. - Input bar background becomes
#202C33to sit above the wallpaper.
Type scaleRead the full spec
Font Family
- Primary:
SF Pro Text(body) andSF Pro Display(titles) — Apple's stock system fonts. WhatsApp ships no proprietary typeface. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Monospace (rare):
SF Mono— used only in formatted code blocks inside bubbles (triple-backtick Markdown formatting). - Non-Latin: Full Dynamic Type support across all iOS-supported scripts. WhatsApp relies entirely on OS font substitution.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Large Title (Chats) | SF Pro Display | 34pt | 700 | 1.12 | 0.37pt | "Chats" scroll-collapsing large title |
| Screen Title | SF Pro Display | 17pt | 600 | 1.18 | -0.4pt | Nav bar title when collapsed |
| Contact Name (Chat List) | SF Pro Text | 17pt | 600 | 1.23 | -0.4pt | Contact in chat list row |
| Message Preview | SF Pro Text | 15pt | 400 | 1.33 | -0.2pt | Last message preview below name |
| Bubble Body | SF Pro Text | 17pt | 400 | 1.29 | -0.4pt | The message text inside a chat bubble |
| Bubble Sender (Group) | SF Pro Text | 13pt | 600 | 1.23 | -0.1pt | Sender name in group chat, colored |
| Timestamp (List) | SF Pro Text | 12pt | 400 | 1.2 | 0pt | Relative time on chat-list rows |
| Timestamp (Bubble) | SF Pro Text | 11pt | 400 | 1.0 | 0pt | In-bubble time in secondary gray |
| Section Header | SF Pro Text | 13pt | 600 | 1.2 | -0.1pt | "PINNED", "ARCHIVED" — uppercase tracked |
| System Message | SF Pro Text | 12pt | 500 | 1.3 | 0pt | "Messages are end-to-end encrypted" center pill |
| Tab Label | SF Pro Text | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Button (Primary) | SF Pro Text | 17pt | 600 | 1.0 | -0.4pt | "Continue", "Next" — native iOS button type |
| Input Placeholder | SF Pro Text | 16pt | 400 | 1.3 | -0.3pt | "Message" placeholder in compose bar |
| Settings Row | SF Pro Text | 17pt | 400 | 1.23 | -0.4pt | Settings row title |
| Settings Detail | SF Pro Text | 15pt | 400 | 1.3 | -0.2pt | Value on right side of settings row |
Principles
- Defer to iOS: WhatsApp follows Apple Human Interface Guidelines type sizes almost exactly — large titles, native body, footnote.
- Dynamic Type first: Every body/preview/bubble text scales with user preference. Layout wraps gracefully up to Accessibility XL.
- Weight used sparingly: 400 for body, 600 for names/titles, 700 only on large titles. No 800, no 300.
- Color contrast matters more than size: Message preview (15pt gray) and contact name (17pt black) rely on color weight differentiation, not typographic scale.
- Sender color in groups: In group chats each sender's name is tinted in one of ~20 pre-assigned colors to aid scanning.
- Timestamps shrink to fit: When an outgoing bubble has short text, the timestamp floats inside the last line; for long messages it drops below.
Components and layoutRead the full spec
Buttons
Primary Green Send Button (The Circular FAB) The single iconic action in WhatsApp. A circular button on the compose bar that morphs: microphone icon when the input is empty, paper-plane when text is entered.
- Shape: Circle, 36pt diameter (in compose bar) or 52pt (FAB on Chats tab "new message")
- Background:
#25D366 - Icon: SF Symbol
paperplane.fillormic.fill, 18-22pt, white - Pressed: scale 0.92 + soft haptic, background shifts to
#1EBE5D - Voice-record mode: hold the button; ring expands out and fills with decibel-responsive color; drag up to lock recording
Primary Pill CTA ("Allow", "Continue")
- Background:
#25D366 - Text: white, SF Pro Text 17pt weight 600
- Padding: 12pt vertical, 24pt horizontal
- Corner radius: 24pt (pill) for onboarding, 12pt for compact CTAs
- Pressed:
#1EBE5D, scale 0.97
Secondary Text Button ("Skip", "Not Now")
- Background: transparent
- Text:
#25D366(green) for affirmative alternates,#F15C6Dfor destructive - Font: SF Pro Text 17pt weight 400
- No border, no fill — native iOS link style
Icon Actions (Attach, Camera, Emoji, Mic)
- Size: 22-24pt glyph, 44pt hit area
- Default:
#8696A0 - Active:
#25D366(green, when active)
Call Answer / Decline Button (Voice/Video Call Screen)
- Answer: 72pt circle
#25D366, whitephone.fillicon, subtle pulsing green outer ring - Decline: 72pt circle
#F15C6D, whitephone.down.fillicon
Cards & Containers
Chat List Row
- Height: 72pt
- Structure: 48pt circular avatar (leading, 16pt from edge) → 12pt gap → stacked (name 17pt w600 + preview 15pt w400
#667781) → trailing (timestamp 12pt w400 right + unread badge below) - Background:
#FFFFFF(light) /#111B21(dark) - Pressed: background
#F0F2F5(light) /#1F2C34(dark) - Swipe-left reveals: Archive (gray), Mute (amber), Delete (red) — native iOS swipe actions
- Swipe-right reveals: Read / Unread toggle (blue)
- Pinned row: subtle pin icon trailing, small
#25D366stroke indicator
Chat Bubble (Outgoing)
- Max width: 80% of chat canvas
- Background:
#D9FDD3light /#005C4Bdark - Text color:
#111B21light /#E9EDEFdark - Padding: 8pt vertical, 12pt horizontal
- Corner radius: 12pt all corners, except the bottom-trailing corner which is 0pt for the "tail" nub (or a pointed SVG tail hanging below-right)
- Trailing timestamp + tick row: 11pt
#667781/#8696A0inline at bottom-right, check icon 12pt - Tail: small triangle
#D9FDD3/#005C4Bat bottom-right of bubble (only on the last bubble from sender in a grouped sequence)
Chat Bubble (Incoming)
- Max width: 80%
- Background:
#FFFFFFlight /#1F2C34dark - Text color:
#111B21light /#E9EDEFdark - Padding: 8pt vertical, 12pt horizontal
- Corner radius: 12pt all corners, except bottom-leading corner 0pt for tail
- Sender name (group only): top line, 13pt weight 600, tinted sender color
Reply-Quote Bubble (Inside a Message)
- Nested inside an outgoing or incoming bubble at the top
- 4pt leading vertical accent bar in sender's group color (or green for self)
- Background: 0.08 opacity over parent bubble
- Text: 13pt regular, truncated to 2 lines
Settings Group (iOS Grouped List)
- Background:
#F7F8FAlight /#111B21dark - Row fill:
#FFFFFFlight /#1F2C34dark - Corner radius: 10pt on first and last row of group, 0pt in middle
- Divider: 0.5pt
#E9EDEFindented to text
Navigation
Bottom Tab Bar (iOS 2024+)
- Height: 49pt + safe area
- Background:
.regularMaterialblur over#FFFFFF(light) /#111B21(dark) at 92% opacity - Tabs: Updates, Calls, Communities, Chats, Settings
- Icon size: 24pt
- Active color:
#25D366(green — unlike iOS Messages, WhatsApp uses brand green as active tint) - Inactive:
#8696A0 - Labels: SF Pro Text 10pt weight 500, always shown
- Badge: red circle
#F15C6Dwith white count, top-right of icon
Top Nav (Chat Screen)
- Height: 44pt + safe area
- Leading: back chevron 17pt + avatar (32pt circular) + contact name + typing/last-seen status
- Trailing: video-call icon (22pt) + voice-call icon (22pt) + ellipsis menu
- Background:
#F0F2F5light /#202C33dark (a subtle surface tint) - Typing indicator: 13pt green "typing..." below name
Top Nav (Chat List / Updates)
- Large title "Chats" scroll-collapses to standard nav
- Leading: "Edit" button (blue text)
- Trailing: New Chat icon (green
#25D366, square.and.pencil SF Symbol) - Search bar below title: pill shape,
#F0F2F5background, 15pt
Input Fields
Compose Bar (Chat Input)
- Height: ~52pt when single-line, grows up to ~120pt for multiline
- Structure: leading emoji/sticker icon (24pt
#8696A0) → multiline text field → trailing (attach paperclip 24pt + camera 24pt + mic/send circle 36pt green) - Background:
#FFFFFFlight /#202C33dark (elevated surface) - Input field inset: 12pt padding, 20pt corner radius pill
- Placeholder: "Message", 16pt weight 400
#8696A0 - Focus: no border change, keyboard slides up, "Send" circle morphs from mic to paperplane
Search Bar
- Background:
#F0F2F5light /#202C33dark - Corner radius: 10pt
- Height: 36pt
- Leading magnifyingglass
#8696A0 - Placeholder: "Search"
#8696A0 - Focus: tiny cancel button slides in trailing
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Bubble max-width shrinks to 78%; waveform loses ~5 bars |
| iPhone 13/14/15 | 390pt | Standard bubble 80% max-width |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in calls nav |
| iPhone 15/16 Pro Max | 430pt | Bubble 80%; avatar grows to 52pt in chat list |
| iPad | 768pt+ | Split view: chat list left, conversation right |
Dynamic Type
- Bubble body, chat-list name and preview: full scale up to Accessibility XL
- Timestamps (11-12pt): fixed size to preserve inline layout
- Tab labels: fixed 10pt
- Bubble auto-wraps at any scale; bubble max-width shrinks with XL sizes
Orientation
- Chat list / Updates / Settings: portrait-locked on iPhone
- Video calls: rotate to landscape
- Media viewer (photos / videos inside chat): rotate to landscape
- iPad: all orientations supported; split view adapts to landscape width
Touch Targets
- Send button: 36pt in compose bar (native iOS minimum-plus hit target)
- Mic button: same 36pt circle, 44pt effective hit area with hitSlop
- Chat list row: 72pt height, full-row tappable
- Swipe actions: native iOS swipe width, 80pt per action
- Reaction emojis in palette: 32pt glyph, 44pt effective
Safe Area Handling
- Top: safe area honored; call screen extends into Dynamic Island with pill treatment
- Bottom: compose bar floats above safe area; keyboard pushes content up natively
- Sides: 16pt on app canvas, 8pt on chat canvas for bubble alignment
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-whatsapp {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #111b21;
--heading-color: #111b21;
--link-color: #037f60;
--link-hover-color: #024d3a;
--border-color: #d4d6d7;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(17,27,33,0.06);
--card-hover-shadow: 0 6px 18px rgba(17,27,33,0.12);
--header-bg: #111b21;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #646b6f;
--button-bg: #06cf9c;
--button-text-color: #000000;
--button-hover-bg: #059d77;
--button-border: none;
--button-border-radius: 12px;
--button-secondary-bg: #f1f1f2;
--button-secondary-text-color: #111b21;
--button-secondary-hover-bg: #e2e4e4;
--button-secondary-border: 1px solid #d4d6d7;
--prompt-bg: #f3f4f4;
--prompt-text-color: #111b21;
--base-font: var(--font-helvetica);
--heading-font: var(--font-mono);
--card-border-radius: 12px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- vero 80.7%
- plenty of fish 78.9%
- grammarly 78.2%
- happn 74.8%
- perplexity 73.2%
Where this came from
- Source document
ios/design-md/messaging/whatsapp/DESIGN.md· 26.3 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.