What is WhatsApp's primary brand color?

WhatsApp's brand voltage is the bright green known internally as 'WhatsApp green' — a saturated yellow-green that reads near-fluorescent against the warm-cream marketing canvas. On the captured marketing page it appears four times: the primary Download CTA pill in the hero, the Download CTA on the Mac section, the kbd-style highlight inside the encryption section, and the secondary green pill on the desktop-app card. Every other interactive element on the page is either text-only in near-black or a transparent pill with a thin black hairline. The restraint is the brand's signature — one voltage green on cream, and nothing else competes for the action.

What typeface does WhatsApp use, and what should I use as a substitute?

The site runs a proprietary variable sans called WhatsApp Sans Var across every tier. Display headlines sit at 60-80px in weight 400; section headings at 48px in weight 400; body copy at 18px in weight 400; navigation and captions at 12-16px in weight 400. Notably, every tier shares the same weight 400 — there is no semibold or bold variant anywhere on the marketing page. The closest open-source substitute is Inter at weight 400 with negative letter-spacing on the display tier, or Söhne Buch if you have access to it. Both transfer cleanly because WhatsApp Sans Var's proportions are close to a humanist sans with slightly wider counters.

Why does WhatsApp use a warm cream instead of pure white?

The page floor is a peachy off-white at a hex value warmer than standard #ffffff. The choice is deliberate: WhatsApp's voltage green reads dramatically warmer against a cream tone than against stark white — on white it skews neon-electric, on cream it skews friendly-approachable, which matches the brand's positioning as a tool for personal conversations rather than office productivity. The cream also carries hero photography of real people on phones without the harsh contrast that pure white would create. Below the fold, the page alternates between this cream and a deep near-black band that holds the end-to-end-encryption messaging — the green pill reads strongest against that black.

What is WhatsApp's corner-radius philosophy?

WhatsApp's radius scale is pill-everywhere. The dominant value is 50px, used on every button and pill chip on the page. Hero photography containers round at 25px — slightly tighter than the buttons but still generous. Avatar contact chips and notification badges sit at 50% radius, which renders as a full circle on square elements. There is no 4px, 8px, or 12px tier anywhere in the captured page. The scale skips the 'tight-corners' aesthetic of dev-tools entirely. Everything rounds to either a pill, a generous tile, or a full circle — there is no in-between.

Can I use this DESIGN.md to build my own messaging-product marketing site?

Yes — feed the file to Claude, Cursor, or any AI tool that reads structured design tokens and the agent will reproduce WhatsApp's specific moves: warm cream canvas instead of stark white, single voltage-green pill CTA reserved for the Download action, WhatsApp Sans Var (or Inter weight 400) across every tier with no semibold tier, and pill-everywhere radius starting at 50px. You can also reference the tokens directly. One caveat: the entirely-400-weight typography is dangerous to copy without the rest of the system — if your headlines need to feel urgent or commercial, WhatsApp's weight discipline will read flat. It works at WhatsApp because the product is a utility that already has a billion users.

WhatsApp Design System

WhatsApp's marketing system pairs near-black ink, a warm-cream canvas, and a single voltage-green pill CTA.

About WhatsApp DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source whatsapp.com

Communication & Messaging

WhatsApp.com is one of the strangest marketing sites a billion-user product has ever shipped. The hero is a photograph of a woman holding a phone, framed inside a 25px-rounded peachy-cream container, with the headline "Message privately" set in white at 80px / weight 400 floating over the image. Around the photograph, small circular profile chips drift across the cream canvas as if torn from a contact picker. A single bright voltage-green pill — the Download CTA — sits beneath the headline at 50px radius, and that pill is the only chromatic brand moment above the fold. Where Telegram leans into glossy gradient screenshots and where Signal goes austere monochrome, WhatsApp picks a third lane: warm-cream editorial photography with a single high-voltage green button.

The system runs on a custom proprietary variable sans — WhatsApp Sans Var — across every tier, never deviating from weight 400. The 80px hero h1, the 60px section h2, the 18px body paragraph, and the 12px caption all share that single weight. Display feels like a 19th-century billboard rather than a SaaS shout. The chromatic palette is just as restrained: near-black ink (#1c1e21) reading on a peachy cream canvas (#fcf5eb), with WhatsApp's signature voltage green (#25d366) reserved for primary calls to action and a deep near-black band underneath the fold to dramatize the end-to-end-encryption story. Every container that rounds rounds to 50px or 50% — there is no 4px or 8px tier anywhere on the page.

Feed this DESIGN.md to an AI coding tool and it reproduces WhatsApp's specific moves: warm cream as page floor instead of stark white, single voltage-green pill reserved for the Download action, WhatsApp Sans Var (or a system-sans substitute) at uniform weight 400, and pill-everything radius. The one move that requires nerve to copy: trusting a 400-weight 80px display headline to carry a billion-user product. Most teams reach for 600 or 700 here. WhatsApp doesn't.

What makes it distinct

Single voltage-green CTAthe bright green pill appears exactly four times on the page, reserved for Download actions; every other interactive element is text-only or transparent
Warm-cream canvasthe page floor is a peachy off-white, not stark white, and it carries every hero band; bright voltage-green reads warmer against cream than against pure white
Pill chrome everywhereevery container that rounds rounds to 50px (buttons, cards) or 50% (avatars, badges); no 4px, 8px, or 12px tiers exist on the page
WhatsApp Sans Var at weight 400the entire hierarchy from 80px display down to 12px caption runs at a single 400 weight; no semibold or bold tier ever appears
Mixed-band canvasesthe page alternates cream and a deep near-black section (the encryption story) to dramatize the green CTA's only chromatic neighbor

Live at whatsapp.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

whatsapp.com

Explore WhatsApp

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

WhatsApp design system FAQ

Common questions about WhatsApp's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

WhatsApp — official site

WhatsApp's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.