W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
WhatsApp is the cross-platform messaging and voice-/video-calling service from WhatsApp LLC (a Meta company), used by over two billion people for end-to-end-encrypted real-time communication. The brand voice is warm, practical, and globally egalitarian — "simple, reliable, secure messaging." Visually, WhatsApp is anchored on WhatsApp Green (#25D366), the signature emerald used on the telephone-in-a-bubble mark, primary CTAs, the floating-action button, and the read-receipt double-check. WhatsApp is dual-mode by canonical identity: the mobile and web clients render the green accent on a near-white canvas (light) or a deep blue-black canvas #0B141A (dark), with the green serving as the consistent primary across both surfaces.
1 palette 3 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/whatsapp/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/whatsapp/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
WhatsApp is the cross-platform messaging and voice-/video-calling service from WhatsApp LLC (a Meta company), used by over two billion people for end-to-end-encrypted real-time communication. The brand voice is warm, practical, and globally egalitarian — "simple, reliable, secure messaging." Visually, WhatsApp is anchored on WhatsApp Green (#25D366), the signature emerald used on the telephone-in-a-bubble mark, primary CTAs, the floating-action button, and the read-receipt double-check. WhatsApp is dual-mode by canonical identity: the mobile and web clients render the green accent on a near-white canvas (light) or a deep blue-black canvas #0B141A (dark), with the green serving as the consistent primary across both surfaces.
Tags: whatsapp, meta, messaging, green, communications, mobile-first, e2e-encryption
Atoms
Palette
WhatsApp · [email protected] · Proprietary — All Rights Reserved
WhatsApp's brand palette is anchored on the signature WhatsApp Green (#25D366) — the saturated emerald used on the telephone-in-a-bubble mark, the primary CTA, the outgoing-message bubble, and the read- receipt double-check. The supporting palette is a tonal green scale (light tints for chat surfaces, dark teal-greens for the dark-mode client) plus a neutral Teal accent (#075E54) historically associated with the WhatsApp header chrome before the 2020 visual refresh, and a quiet near-black canvas (#0B141A) for the dark-mode chat surface.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
whatsapp-green |
WhatsApp Green | #25D366 |
whatsapp-green-dark |
WhatsApp Green Dark | #128C7E |
whatsapp-teal-dark |
WhatsApp Teal Dark | #075E54 |
whatsapp-green-50 |
WhatsApp Green 50 | #F4FDFA |
whatsapp-green-100 |
WhatsApp Green 100 | #D5F7EB |
whatsapp-green-200 |
WhatsApp Green 200 | #98EBCD |
whatsapp-green-300 |
WhatsApp Green 300 | #3AC7A1 |
whatsapp-green-400 |
WhatsApp Green 400 | #26A28B |
whatsapp-green-600 |
WhatsApp Green 600 | #148072 |
whatsapp-green-800 |
WhatsApp Green 800 | #005C54 |
whatsapp-green-900 |
WhatsApp Green 900 | #0C4243 |
whatsapp-green-1000 |
WhatsApp Green 1000 | #17261F |
whatsapp-bubble-out |
WhatsApp Bubble Out | #DCF8C6 |
whatsapp-chat-bg-light |
WhatsApp Chat Background Light | #E5DDD5 |
whatsapp-white |
WhatsApp White | #FFFFFF |
whatsapp-surface-light |
WhatsApp Surface Light | #F0F2F5 |
whatsapp-text-on-light |
WhatsApp Text on Light | #111B21 |
whatsapp-text-secondary-light |
WhatsApp Text Secondary Light | #667781 |
whatsapp-canvas-dark |
WhatsApp Canvas Dark | #0B141A |
whatsapp-surface-dark |
WhatsApp Surface Dark | #202C33 |
whatsapp-bubble-out-dark |
WhatsApp Bubble Out Dark | #005C4B |
whatsapp-text-on-dark |
WhatsApp Text on Dark | #E9EDEF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
whatsapp-white |
#FFFFFF |
surface |
whatsapp-surface-light |
#F0F2F5 |
surface-elevated |
whatsapp-white |
#FFFFFF |
text-primary |
whatsapp-text-on-light |
#111B21 |
text-secondary |
whatsapp-text-secondary-light |
#667781 |
text-tertiary |
whatsapp-text-secondary-light |
#667781 |
primary |
whatsapp-green |
#25D366 |
primary-hover |
whatsapp-green-dark |
#128C7E |
accent |
whatsapp-green |
#25D366 |
accent-hover |
whatsapp-green-dark |
#128C7E |
warning |
whatsapp-green-300 |
#3AC7A1 |
warning-hover |
whatsapp-green-400 |
#26A28B |
error |
whatsapp-green-dark |
#128C7E |
success |
whatsapp-green |
#25D366 |
border |
whatsapp-surface-light |
#F0F2F5 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
whatsapp-canvas-dark |
#0B141A |
surface |
whatsapp-surface-dark |
#202C33 |
surface-elevated |
whatsapp-surface-dark |
#202C33 |
text-primary |
whatsapp-text-on-dark |
#E9EDEF |
text-secondary |
whatsapp-green-200 |
#98EBCD |
text-tertiary |
whatsapp-green-300 |
#3AC7A1 |
primary |
whatsapp-green |
#25D366 |
primary-hover |
whatsapp-green-600 |
#148072 |
accent |
whatsapp-green |
#25D366 |
accent-hover |
whatsapp-green-600 |
#148072 |
warning |
whatsapp-green-300 |
#3AC7A1 |
warning-hover |
whatsapp-green-400 |
#26A28B |
error |
whatsapp-green-dark |
#128C7E |
success |
whatsapp-green |
#25D366 |
border |
whatsapp-green-1000 |
#17261F |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
whatsapp-green |
#25D366 |
on-identity |
whatsapp-white |
#FFFFFF |
background |
whatsapp-white |
#FFFFFF |
surface |
whatsapp-surface-light |
#F0F2F5 |
surface-elevated |
whatsapp-white |
#FFFFFF |
text-primary |
whatsapp-text-on-light |
#111B21 |
text-secondary |
whatsapp-text-secondary-light |
#667781 |
primary |
whatsapp-green |
#25D366 |
primary-hover |
whatsapp-green-dark |
#128C7E |
accent |
whatsapp-green |
#25D366 |
accent-hover |
whatsapp-green-dark |
#128C7E |
mark |
whatsapp-green |
#25D366 |
success |
whatsapp-green |
#25D366 |
warning |
whatsapp-green-300 |
#3AC7A1 |
error |
whatsapp-green-dark |
#128C7E |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (7)
colorChoice → logo.mark
- allowed: whatsapp-green, whatsapp-white
- forbidden: whatsapp-teal-dark, whatsapp-green-dark, whatsapp-green-1000, whatsapp-canvas-dark
The Meta-hosted WhatsApp brand guide (meta.com/brand/resources/whatsapp/whatsapp-brand/) prohibits modifying the colors of the WhatsApp marks: "you shouldn't modify any colors in our logos." The telephone-bubble mark renders in WhatsApp Green (#25D366) on light surfaces and reverses to white on the dark canvas. Recoloring into the legacy teal (#075E54), the deeper action green, or any of the scale tints violates the published policy.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, combined-with-other-logo, used-as-verb, most-distinctive-element, phonetic-variation, merchandise
The published WhatsApp Brand Resources policy enumerates these prohibitions explicitly: do not combine the WhatsApp marks with other logos, do not use WhatsApp as a verb ("WhatsApp your friends"), do not make the marks the most distinctive element of a third-party design, do not use phonetic variations (WhatsAp, WatsApp), do not manufacture merchandise bearing the marks. Treatments not in the approved palette violate the brand-use license.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. WhatsApp Text on Light (#111B21) on the white canvas reads at roughly 17:1, and Text on Dark (#E9EDEF) on Canvas Dark (#0B141A) reads at roughly 16:1 — both clear AA decisively. The rule encodes the floor for any new foreground/background pairing introduced on WhatsApp-skinned surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
WhatsApp Green (#25D366) on the white canvas must remain perceptible at interactive-button sizes. Falling below 3:1 (AA-large) compromises the affordance of the primary CTA and the floating-action send button — both of which read as green-on-white in the canonical product surface.
variantSelection → logo
- use:
mark-white - when:
backgroundColorScheme="dark"
On the canonical WhatsApp Canvas Dark surface (#0B141A) the telephone-bubble mark renders in white for legibility. The green-on-dark mark variant must not be used on the dark canvas where contrast against the surface drops.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, sponsorship-implication
The WhatsApp Brand Resources policy prohibits use of the WhatsApp name, marks, or signature green "in a way that implies partnership, sponsorship, or endorsement by WhatsApp or any of its affiliates," on merchandise, or in the name of a competing product. Encoding the policy as a context restriction lets consumers reject impermissible placements.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. WhatsApp's global, accessibility-conscious posture and the dual light/dark canvas commitment make AA contrast checks the default verification on any new role pairing introduced on WhatsApp-skinned surfaces.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700
The deployed WhatsApp client surfaces Super Sans VF (a variable-axis cut) at the 400 / 500 / 600 / 700 weights for marketing headlines, chat-list titles, and primary CTAs. Substituting Inter at heavier weights drifts from the brand's practical, warm voice; lighter cuts compromise the chat-list readability at small sizes.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.4
WhatsApp's marketing display runs substantially larger than the body chat copy on the marketing site. A 1.4× minimum size ratio between display and prose preserves the announcement-style hierarchy the brand voice depends on when the Super Sans VF / Super Serif VF pairing reduces to the Inter substitute.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: whatsapp-white, whatsapp-canvas-dark, whatsapp-text-on-light, whatsapp-surface-light
- doesNotPairWith: whatsapp-teal-dark, whatsapp-chat-bg-light
WhatsApp Green reads cleanest against white, the deep blue- black dark canvas, or the very-dark text tone. Pairing the current green adjacent to the legacy teal (#075E54) creates a visible regression to the pre-2020 chrome; pairing it on the warm beige chat-bg (#E5DDD5) muddies the saturation that makes the brand recognisable.
Provenance
- Source: https://www.meta.com/brand/resources/whatsapp/whatsapp-brand/
- License:
Proprietary — All Rights Reserved - Attribution: WhatsApp and the WhatsApp logo are trademarks of WhatsApp LLC, a Meta Platforms company. The WhatsApp Brand Resources policy published at meta.com/brand/resources/whatsapp/whatsapp-brand/ enumerates the non-modification, no-verb, no-merchandise, and no-derogatory-use prohibitions encoded in the rules below. The signature WhatsApp Green (#25D366) is documented in the simple-icons brand database (citing whatsapp.com) and corroborated via the live web.whatsapp.com client CSS, which exposes a tonal green scale (--green-0 … --green-100) keyed off the same primary.
- Imported:
2026-05-18 - Notes: Derived from live site CSS at https://web.whatsapp.com/ on 2026-05-18; the published Meta-hosted WhatsApp brand guide is policy-only (no hex codes), so the supporting green scale was captured from the deployed client's CSS custom properties. WhatsApp's proprietary type family — Super Sans VF, Super Serif VF, Super Sans Mono VF — is declared on the deployed client via @font-face but is not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles and notes the proprietary primaries here. The brand-asset policy expressly forbids re-distribution of WhatsApp marks, so
assets: []is the correct posture for this catalog.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by WhatsApp
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
A clear hierarchy in WhatsApp's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ whatsapp-green #25D366 accent-hover
→ whatsapp-green-dark #128C7E background
→ whatsapp-white #FFFFFF error
→ whatsapp-green-dark #128C7E identity
→ whatsapp-green #25D366 mark
→ whatsapp-green #25D366 on-identity
→ whatsapp-white #FFFFFF primary
→ whatsapp-green #25D366 primary-hover
→ whatsapp-green-dark #128C7E success
→ whatsapp-green #25D366 surface
→ whatsapp-surface-light #F0F2F5 surface-elevated
→ whatsapp-white #FFFFFF text-primary
→ whatsapp-text-on-light #111B21 text-secondary
→ whatsapp-text-secondary-light #667781 warning
→ whatsapp-green-300 #3AC7A1 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter wordmark
→ heading Inter Palette mode mappings (from whatsapp)
Light mode (15 roles)
accent
→ whatsapp-green accent-hover
→ whatsapp-green-dark background
→ whatsapp-white border
→ whatsapp-surface-light error
→ whatsapp-green-dark primary
→ whatsapp-green primary-hover
→ whatsapp-green-dark success
→ whatsapp-green surface
→ whatsapp-surface-light surface-elevated
→ whatsapp-white text-primary
→ whatsapp-text-on-light text-secondary
→ whatsapp-text-secondary-light text-tertiary
→ whatsapp-text-secondary-light warning
→ whatsapp-green-300 warning-hover
→ whatsapp-green-400 Dark mode (15 roles)
accent
→ whatsapp-green accent-hover
→ whatsapp-green-600 background
→ whatsapp-canvas-dark border
→ whatsapp-green-1000 error
→ whatsapp-green-dark primary
→ whatsapp-green primary-hover
→ whatsapp-green-600 success
→ whatsapp-green surface
→ whatsapp-surface-dark surface-elevated
→ whatsapp-surface-dark text-primary
→ whatsapp-text-on-dark text-secondary
→ whatsapp-green-200 text-tertiary
→ whatsapp-green-300 warning
→ whatsapp-green-300 warning-hover
→ whatsapp-green-400 Rules (10 typed constraints)
error · 7 rules
colorChoice logo.mark allowed whatsapp-green, whatsapp-white forbidden whatsapp-teal-dark, whatsapp-green-dark, whatsapp-green-1000, whatsapp-canvas-dark The Meta-hosted WhatsApp brand guide (meta.com/brand/resources/whatsapp/whatsapp-brand/) prohibits modifying the colors of the WhatsApp marks: "you shouldn't modify any colors in our logos." The telephone-bubble mark renders in WhatsApp Green (#25D366) on light surfaces and reverses to white on the dark canvas. Recoloring into the legacy teal (#075E54), the deeper action green, or any of the scale tints violates the published policy.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, combined-with-other-logo, used-as-verb, most-distinctive-element, phonetic-variation, merchandise The published WhatsApp Brand Resources policy enumerates these prohibitions explicitly: do not combine the WhatsApp marks with other logos, do not use WhatsApp as a verb ("WhatsApp your friends"), do not make the marks the most distinctive element of a third-party design, do not use phonetic variations (WhatsAp, WatsApp), do not manufacture merchandise bearing the marks. Treatments not in the approved palette violate the brand-use license.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. WhatsApp Text on Light (#111B21) on the white canvas reads at roughly 17:1, and Text on Dark (#E9EDEF) on Canvas Dark (#0B141A) reads at roughly 16:1 — both clear AA decisively. The rule encodes the floor for any new foreground/background pairing introduced on WhatsApp-skinned surfaces.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large WhatsApp Green (#25D366) on the white canvas must remain perceptible at interactive-button sizes. Falling below 3:1 (AA-large) compromises the affordance of the primary CTA and the floating-action send button — both of which read as green-on-white in the canonical product surface.
variantSelection logo use mark-white when backgroundColorScheme="dark" On the canonical WhatsApp Canvas Dark surface (#0B141A) the telephone-bubble mark renders in white for legibility. The green-on-dark mark variant must not be used on the dark canvas where contrast against the surface drops.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, sponsorship-implication The WhatsApp Brand Resources policy prohibits use of the WhatsApp name, marks, or signature green "in a way that implies partnership, sponsorship, or endorsement by WhatsApp or any of its affiliates," on merchandise, or in the name of a competing product. Encoding the policy as a context restriction lets consumers reject impermissible placements.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. WhatsApp's global, accessibility-conscious posture and the dual light/dark canvas commitment make AA contrast checks the default verification on any new role pairing introduced on WhatsApp-skinned surfaces.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700 The deployed WhatsApp client surfaces Super Sans VF (a variable-axis cut) at the 400 / 500 / 600 / 700 weights for marketing headlines, chat-list titles, and primary CTAs. Substituting Inter at heavier weights drifts from the brand's practical, warm voice; lighter cuts compromise the chat-list readability at small sizes.
fontPairing typography.display requires prose minSizeRatio 1.4 WhatsApp's marketing display runs substantially larger than the body chat copy on the marketing site. A 1.4× minimum size ratio between display and prose preserves the announcement-style hierarchy the brand voice depends on when the Super Sans VF / Super Serif VF pairing reduces to the Inter substitute.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith whatsapp-white, whatsapp-canvas-dark, whatsapp-text-on-light, whatsapp-surface-light doesNotPairWith whatsapp-teal-dark, whatsapp-chat-bg-light WhatsApp Green reads cleanest against white, the deep blue- black dark canvas, or the very-dark text tone. Pairing the current green adjacent to the legacy teal (#075E54) creates a visible regression to the pre-2020 chrome; pairing it on the warm beige chat-bg (#E5DDD5) muddies the saturation that makes the brand recognisable.
Provenance
- Source
- https://www.meta.com/brand/resources/whatsapp/whatsapp-brand/
- License
Proprietary — All Rights Reserved- Attribution
- WhatsApp and the WhatsApp logo are trademarks of WhatsApp LLC, a Meta Platforms company. The WhatsApp Brand Resources policy published at meta.com/brand/resources/whatsapp/whatsapp-brand/ enumerates the non-modification, no-verb, no-merchandise, and no-derogatory-use prohibitions encoded in the rules below. The signature WhatsApp Green (#25D366) is documented in the simple-icons brand database (citing whatsapp.com) and corroborated via the live web.whatsapp.com client CSS, which exposes a tonal green scale (--green-0 … --green-100) keyed off the same primary.
- Imported
2026-05-18- Notes
- Derived from live site CSS at https://web.whatsapp.com/ on 2026-05-18; the published Meta-hosted WhatsApp brand guide is policy-only (no hex codes), so the supporting green scale was captured from the deployed client's CSS custom properties. WhatsApp's proprietary type family — Super Sans VF, Super Serif VF, Super Sans Mono VF — is declared on the deployed client via @font-face but is not publicly distributed. This atom references Inter@1 as the open-source rendering substitute for the sans roles and notes the proprietary primaries here. The brand-asset policy expressly forbids re-distribution of WhatsApp marks, so `assets: []` is the correct posture for this catalog.