WhatsApp, rebuilt as a design system

This page shows how WhatsApp on the web and on the desktop looks and behaves in 2025–26: its colours, type, icons, parts and screens, in light and dark. We read WhatsApp's own colour, type and motion values from the public sign-in page of web.whatsapp.com (no sign-in), took the real icons and chat doodle from the same files, and measured sizes from real screenshots. Every value says if it is real measured or estimated.

real = WhatsApp's own filesmeasured = from real 2025–26 screenshotsestimated = our best guessours = added for this page

What you notice first

Warm and quiet. The 2025 redesign swapped the old blue-grey for warm beige and cream (#F7F5F3 rail, #F5F1EB wallpaper). Green is saved for actions, unread counts and your own bubbles.

The bubble is the hero. Your messages sit right in pale green, theirs left in white, with a small tail on the first bubble of a run and ticks that tell you sent → delivered → read.

Pills everywhere. The search field, filter chips (All · Unread · Favourites · Groups), the composer and the buttons are full pills. Lists use soft 12 px corners.

A doodle wallpaper. Behind the chat is WhatsApp's line-drawing doodle, painted in a colour just darker than the wallpaper, so it adds texture without noise.

A slim left rail. A 64 px rail holds Chats, Calls, Updates, Communities and Meta AI, with a green count badge and a green dot for new updates.

A true dark mode. Dark uses near-black greys (#161717, #1D1F1F), deep green bubbles (#144D37) and brighter green (#21C063) so text stays readable.

The screens: real next to our copy

Four real screens and our working copies, built only from this design system. Each copy is scored pixel by pixel against the original. Names, messages and photos are made up, so text pixels differ on purpose. Open all copies.

Colours

Read live from whatsapp-tokens.css, so this table always shows what the parts use. Both columns are real: WhatsApp's WDS variables from its public stylesheet, read with Chrome in light and in dark (system dark mode). Click a value to copy it.

Primitive colours real

The WDS palette behind the roles. Same in both modes. Click to copy.

Profile-photo colours (initials avatars) real

When someone has no photo, WhatsApp shows initials in one of these pairs. Dark mode flips them: dark tint behind, bright letters.

Type

WhatsApp uses the computer's own font: Segoe UI on Windows, SF Pro on a Mac real (its text component picks "WindowsSystemFontMetrics" or the Apple font). It loads Roboto Variable (Apache 2.0, the exact file is in whatsapp/fonts/) for other systems. The WDS scale is real; the chat sizes are measured.

Weights: WDS asks for 545 for "emphasized" text. Segoe UI only has 400 and 600, so on Windows it shows as semibold (600). Line heights are round numbers: 16 / 20 / 24 / 28 / 32 / 36 / 40 px.

Icons

275 real drawings from WhatsApp Web's own scripts real: the WDS icon set (24 × 24, filled shapes, rounded ends) plus the logo, wordmark, app icon, bubble tails and default avatar. Search, then click an icon to copy its SVG. Study use only.

Used most in the app

Shape and space

Corners

4pxshape-100 · small tags real

8pxbubbles, one sharp corner measured

12pxrows, panels · --radius-app real

16pxcards, media, menus real

24pxdialogs, sheets real

pillsearch, chips, composer, buttons real

Sizes that repeat

Spacing steps estimated

WhatsApp has no public spacing scale; these are the gaps that keep appearing in the screens (4, 8, 10, 12, 16, 20, 24 px).

Shadows

WhatsApp is almost flat. Bubbles have a 1 px soft line under them; only floating things (menus, popovers, dialogs) get a real shadow. Values are real (from the stylesheet) except the bubble line estimated.

Components

Live and clickable, drawn with the real classes in whatsapp.css. Point, click and use the keyboard. Copy for Figma copies the part as HTML with its styles written inline: paste it into Figma with the free html.to.design plugin, or into any page.

Try it: a small WhatsApp

A working mini version made from the same parts. Pick a chat, type and press Enter, and watch the ticks change. Type / for quick replies. Hold the mic to record a voice note (click to start, click to send). Point at a bubble to reply or react. The full app copies are in The screens.

States and motion

Every part has the same five states

Motion real curves and times, estimated where each one is used

WhatsApp's stylesheet carries Meta's motion tokens: "responsive" curves for things you click, "organic" curves for panels, "elastic" for small playful pops. Press Play. Motion is switched off if your computer asks for reduced motion.

Dark mode

Both themes are real: every colour was read from WhatsApp's own stylesheet in light and in dark. Dark is not just "invert": surfaces step up from #161717 (list, chat) to #1D1F1F (rail) to #242626 (composer, other person's bubble); your bubble goes from pale #D9FDD3 to deep #144D37; green text gets brighter (#1B8755 → #21C063); the read tick turns sky blue (#53BDEB).

What is real and what is ours

Do and don't

Each rule is tagged with the Law of UX behind it. Click a law to jump to its card in the scorecard.

UX principles we can see

Contrast and accessibility

Contrast is worked out live from the token values in both themes (WCAG 2: 4.5 for normal text, 3 for large text and icons). See-through colours are mixed onto their real background first.

Checklist

Laws of UX scorecard

All 29 laws from lawsofux.com, with an honest verdict for WhatsApp Web / desktop, the evidence we saw, and what AltLeads should take from it.

Lessons for AltLeads

AltLeads is a sales-calling CRM: callers work a list of leads, call, log the outcome, send follow-ups and book meetings. WhatsApp is the app most of our callers and leads already use every day, so its patterns cost them nothing to learn (Jakob's Law). Here is what to borrow and what to skip.

What to skip

Copy and use

Link the two CSS files and the icon file, add class="wa-root" to the body, and put class="wa-dark" on <html> for dark mode.

Sources and gaps

Where everything came from (all public, nothing signed in)

Gaps: what we could not get

Study copy for internal design education. WhatsApp, its logo, icons, doodle wallpaper and product belong to WhatsApp LLC / Meta. Every person, group, channel and message on this page is made up. Built 14 Oct 2026. Full notes: inspiration/whatsapp/NOTES.md.