---
title: "WhatsApp design system"
variant: extended
source: https://www.whatsapp.com/
captured_at: 2026-10-12
theme: light
industry: other
generator: Design DNA (https://four.wiralomi.com/style/whatsapp-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# WhatsApp · Design System

> Warm, human storytelling with a clear signal of green

**Theme:** light · **Industry:** other · **Source:** https://www.whatsapp.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A spacious, warm-toned homepage pairs human moments and messaging-product imagery with restrained green accents. Alternating feature layouts lead into a pale-green news panel and a deep, dark footer.

## North star

Keep the warm canvas and confident green accents quiet enough that real human moments and product imagery lead.

## Overview

The page is anchored by Gallery Cream (#fcf5eb), which gives the long homepage a warm, continuous canvas. Ink (#1c1e21) carries most headings and body copy, while WhatsApp Green (#25d366) is reserved for the logo, primary download actions, and small product-interface details. White feature surfaces and the pale green news band create occasional changes of pace; a deep blue-black section and footer provide strong contrast. WhatsApp Sans Var uses unembellished, regular-weight headings with generous scale and comfortable body leading. The hero is a wide, rounded photograph with copy and an account form layered over the image. Below it, spacious two-column feature sections alternate text and device imagery, with a centered statement and floating message fragments breaking the rhythm. The design keeps cards, borders, and shadows subordinate to photography, clear alignment, and open space.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Message Ink | `#1c1e21` | `--color-message-ink` | neutral | Primary headings, body copy, navigation, text links, and the dark outline on buttons. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Hero and feature backgrounds, news cards, and reversed footer text. |
| Gallery Cream | `#fcf5eb` | `--color-gallery-cream` | brand | Main page canvas and the extended background behind most feature sections. |
| Midnight Teal | `#111b21` | `--color-midnight-teal` | surface | Encryption feature band, footer, and dark-section contrast; also used for borders and inverse elements. |
| WhatsApp Green | `#25d366` | `--color-whatsapp-green` | accent | Download buttons, brand mark, selected product-interface details, and small emphasis within feature copy. |
| Chat Mint | `#e6ffda` | `--color-chat-mint` | surface | Pale green background for the news and updates section. |
| Quiet Gray | `#5e5e5e` | `--color-quiet-gray` | semantic | Muted small text, including supporting notes; keep subordinate to the main ink text. |

### Semantic aliases

`--color-canvas` → `#fcf5eb` (Gallery Cream) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#111b21` (Midnight Teal) · `--color-surface-3` → `#e6ffda` (Chat Mint) · `--color-text` → `#1c1e21` (Message Ink) · `--color-text-muted` → `#ffffff` (Clean White) · `--color-border` → `#111b21` (Midnight Teal) · `--color-accent` → `#25d366` (WhatsApp Green) · `--color-on-accent` → `#1c1e21` (Message Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1e21` | `#fcf5eb` | 15.43:1 | AAA |
| `#1c1e21` | `#ffffff` | 16.71:1 | AAA |
| `#1c1e21` | `#111b21` | 1.05:1 | fail |
| `#1c1e21` | `#e6ffda` | 15.66:1 | AAA |
| `#ffffff` | `#fcf5eb` | 1.08:1 | fail |
| `#ffffff` | `#111b21` | 17.46:1 | AAA |
| `#ffffff` | `#e6ffda` | 1.07:1 | fail |
| `#25d366` | `#fcf5eb` | 1.83:1 | fail |
| `#25d366` | `#ffffff` | 1.98:1 | fail |
| `#25d366` | `#111b21` | 8.8:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| WhatsApp Sans Var | `--font-body` | webfont | 400, 500 | Site-wide display headings, body copy, navigation, buttons, and supporting labels. | Inter |

- **WhatsApp Sans Var:** Use regular weight for large headings and body, medium for navigation; sentence case, clean forms, and no measured tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.348, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1 | 0 | — | WhatsApp Sans Var | Large hero and campaign headlines. |
| h1 | 60px | 400 | 1 | 0 | — | WhatsApp Sans Var | Primary page and prominent feature headings. |
| h2 | 48px | 400 | 1 | 0 | — | WhatsApp Sans Var | Feature-section headings and large statement copy. |
| h3 | 32px | 400 | 1 | 0 | — | WhatsApp Sans Var | Secondary feature and news-card headings. |
| h4 | 24px | 400 | 1.34 | 0 | — | WhatsApp Sans Var | Smaller card titles and supporting subheads. |
| body | 18px | 400 | 1.39 | 0 | — | WhatsApp Sans Var | Feature descriptions and explanatory copy. |
| caption | 16px | 400 | 1.38 | 0 | — | WhatsApp Sans Var | Small notes, labels, and secondary interface copy. |
| nav | 16px | 500 | 1 | 0 | — | WhatsApp Sans Var | Header navigation labels and menu items. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 12, 13, 16, 18, 20, 24, 28, 30, 32, 56 px.
- Section rhythm 32px · element gap 16px · card padding 56px · max content width 1080px.

Use a centered, wide content area with a measured maximum width of 1080px and a comfortable density. The header sits above a broad, rounded hero; most feature sections use two columns, alternating copy and media placement. Insert occasional full-width visual or centered statement sections to interrupt the split layout. Preserve generous measured card padding and open intervals between elements rather than compressing content. Finish with a two-column news band and a compact multi-column footer.

## Shape & elevation

- Radius: button `9999px` · card `25px` · media `25px` · xs `25px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.33s linear` on interactive elements.

The page relies on flat color fields and media rather than measured shadows. Use thin dark outlines on pill-shaped actions and rounded card edges for definition. Layer the hero account form over the photograph, and keep phone mockups and chat fragments visually distinct without adding invented elevation effects.

## Imagery

Lead with warm, natural lifestyle photography showing people using phones, framed as a wide rounded hero image. Feature sections use clean device mockups and screenshots—video calls, chats, stickers, and a business catalog—against the cream canvas. Some message fragments and interface details float around the main content. Keep product imagery legible and let its varied colors remain inside the media rather than extending them into the brand palette.

## Components

### Header navigation

Compact horizontal brand and link row over the light canvas, with a pill-shaped outlined Log In action and a filled green Download action.

### Hero with account form

Wide rounded lifestyle photograph with large white headline and supporting copy on the left; a dark translucent account panel with a white phone-entry field overlays the right.

### Feature split

Alternating two-column text and product-media sections; use ink headings, concise copy, and understated underlined links.

### Floating message montage

Open cream-colored area with small chat bubbles and avatar fragments surrounding a centered statement, not boxed into a conventional card.

### Download and text actions

Green filled Download pills use dark text and a fine dark outline; secondary actions use outlined pill styling or simple underlined text links.

### News cards

Pale mint updates band pairs introductory copy with white rounded cards; card content is ink-colored and Read More actions are outlined pills.

### Footer

Deep blue-black footer with reversed logo and text, grouped link columns, a green Download button, and a separated legal and social row.

### Measured component styles

- **Primary button** (“Download”): background #25d366 · text #1c1e21 · border 1px solid #1c1e21 · radius 50px · padding 12px 20px · 500 16px WhatsApp Sans Var
- **Secondary button** (“Read More”): transparent background · text #1c1e21 · border 1px solid #1c1e21 · radius 50px · padding 16px 28px · 400 16px WhatsApp Sans Var
- **Link** (“Try it”): transparent background · text #1c1e21 · radius 0px · padding 0px · 400 16px WhatsApp Sans Var
- **Input**: transparent background · text #1c1e21 · radius 0px · padding 0px · 400 16px WhatsApp Sans Var
- **Card** (“New Controls to Help Parents Guide Their”): background #ffffff · text #1c1e21 · radius 25px · padding 56px · 400 12px WhatsApp Sans Var
- **Navigation item** (“Privacy”): transparent background · text #1c1e21 · radius 0px · padding 0px · 500 16px WhatsApp Sans Var

## Do

- Use Gallery Cream as the primary page canvas.
- Reserve WhatsApp Green for brand signals and primary actions.
- Keep headings large, regular-weight, and sentence case.
- Alternate text and device imagery across feature sections.
- Let lifestyle photography feel natural and human.
- Use dark bands sparingly for strong section contrast.

## Don't

- Do not introduce gradients or decorative shadows.
- Do not use bright green as a large page background.
- Do not turn every feature into a boxed card.
- Do not overdecorate navigation or add heavy iconography.
- Do not let product mockup colors redefine the site palette.
- Do not compress the generous spacing between sections.

## Agent prompt

Build a new WhatsApp-style page with a spacious, centered layout and a warm Gallery Cream canvas (#fcf5eb). Use Message Ink (#1c1e21) for clear, regular-weight headings and body copy, and WhatsApp Sans Var or Inter as its closest substitute. Keep WhatsApp Green (#25d366) focused on the logo and pill-shaped primary actions. Create a wide, rounded lifestyle-photo hero with readable copy and a contrasting account panel; follow with alternating two-column feature sections using real-looking messaging and device media. Use Clean White (#ffffff) for cards, Chat Mint (#e6ffda) for a restrained updates band, and Midnight Teal (#111b21) for one high-contrast section or footer. Favor open spacing, thin outlines, and flat surfaces. Do not add gradients, heavy shadows, or invented palette colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide rounded lifestyle image with left-aligned copy and a form panel overlaid to the right. | phone-number account form, primary download action | large white headline, dark translucent panel, rounded media frame, green brand accents |
| 2 | feature-split | Two-column feature with desktop call imagery beside left-aligned heading and text. | feature discovery link | device screenshots, cream canvas, underlined text link |
| 3 | gallery | Full-width cream field with scattered messaging fragments and generous open space. | ambient brand storytelling | floating chat fragments, small avatars, unboxed composition |
| 4 | other | Centered single-column statement on the cream canvas. | brand promise | centered dark headline, open margins |
| 5 | gallery | Full-width visual pause with small message and avatar elements distributed around the canvas. | ambient storytelling | floating interface details, cream background |
| 6 | feature-split | Two-column feature with copy and link on one side and a phone-call image on the other. | learn-more link | phone mockup, large heading, alternating split |
| 7 | feature-split | Dark two-column feature with product screen beside light copy. | learn-more link | Midnight Teal band, green headline emphasis, dark interface media |
| 8 | feature-split | Cream two-column feature with copy and a messaging interface image. | learn-more link | group-chat mockup, alternating split, underlined link |
| 9 | feature-split | Two-column feature pairing phone media with text on the opposite side. | learn-more link | phone media, stickers and GIF imagery, cream background |
| 10 | feature-split | Two-column business feature with copy and a mobile catalog mockup. | business feature link | catalog screenshot, cream canvas, text and media split |
| 11 | content-feed | Pale mint two-column band with an introduction and a horizontal group of white cards. | news browsing, carousel controls, Read More actions | Chat Mint background, white rounded cards, outlined pill buttons |
| 12 | footer | Deep dark footer with brand and download area, link columns, and a divided legal row. | grouped site navigation, social links, download action | Midnight Teal surface, reversed text, green pill CTA, fine divider |

## Source CSS custom properties (selected)

```css
--fds-button-text: #444950;
--fds-comment-background: #F2F3F5;
--fds-highlight-cell-background: #ECF3FF;
--fds-primary-icon: #1C1E21;
--fds-primary-text: #1C1E21;
--accent: hsl(214, 89%, 52%);
--attachment-footer-background: #F0F2F5;
--background-deemphasized: #F0F2F5;
--badge-background-color-blue: hsl(214, 89%, 52%);
--badge-background-color-dark-gray: #65676B;
--badge-background-color-gray: #BCC0C4;
--badge-background-color-green: #31A24C;
--badge-background-color-light-blue: #E7F3FF;
--badge-background-color-red: #e41e3f;
--badge-background-color-yellow: #F7B928;
--text-badge-info-background: hsl(214, 89%, 52%);
--text-badge-success-background: #31A24C;
--text-badge-attention-background: hsl(40, 89%, 52%);
--text-badge-critical-background: #e41e3f;
--border-focused: #65676B;
--card-background: #FFFFFF;
--card-background-flat: #F7F8FA;
--comment-background: #F0F2F5;
--comment-footer-background: #F6F9FA;
--dataviz-primary-1: rgb(0,174,143);
--dataviz-blue-primary: #1D85FC;
--dataviz-blue-secondary: #043B72;
--disabled-button-background: #E4E6EB;
--disabled-button-text: #BCC0C4;
--disabled-text: #BCC0C4;
--divider-on-color: #CED0D4;
--filter-primary-icon: invert(8%) sepia(10%) saturate(200%) saturate(200%) saturate(166%) hue-rotate(177deg) brightness(104%) contrast(91%);
--filter-secondary-button-icon-on-media: invert(100%);
--filter-secondary-icon: invert(39%) sepia(21%) saturate(200%) saturate(109.5%) hue-rotate(174deg) brightness(94%) contrast(86%);
--filter-primary-deemphasized-button-icon: invert(28%) sepia(100%) saturate(6042%) hue-rotate(202deg) brightness(96%) contrast(101%);
--hero-banner-background: #FFFFFF;
--highlight-bg: #E7F3FF;
--inverse-text: #FFFFFF;
--media-inner-border: rgba(0, 0, 0, 0.1);
--media-outer-border: #FFFFFF;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/whatsapp-com