Switch between the rendered Visual preview and the Raw DESIGN.md.
WhatsApp's design system embodies simplicity, trust, and global accessibility. The visual language prioritizes clarity and directness, reflecting the brand's core mission of enabling private, reliable communication for everyone worldwide. The aesthetic combines a clean, minimalist foundation with a distinctive vibrant green accent that signals action, connection, and trust. The typography and spacing create breathing room on pages, while the color palette maintains high contrast for readability across all devices. This is a design system built for function first, where every element serves the purpose of facilitating human connection with minimal friction.
Key Characteristics
#25D366): Primary CTA buttons, action indicators, and brand-defining accents. Used for Download buttons, Join actions, and interactive states that signal active engagement.#43CD66): Subtle accent variant for hover states or secondary emphasis on action elements.#111B21): Navigation links and inline interactive text, maintaining strong contrast against light backgrounds.#1C1E21): Primary text color for buttons and interactive components in neutral or secondary states.#1C1E21): Primary text, headings, and UI text. Used 446 times across the site as the main content color.#111B21): Secondary text, supporting content, and navigation labels. Used 438 times as the hierarchy's second-most prominent text color.#FFFFFF): Primary background color for cards, navigation, and main content areas. Used 236 times as the canvas for content.#FCF5EB): Subtle background tint for hero sections and featured content areas, providing warmth against pure white without overwhelming the design.#FACEB): Warning states and cautionary indicators, used sparingly in status messages and alerts.Primary: WhatsApp Sans Var (variable font family)
Fallback Stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | WhatsApp Sans Var | 80px | 400 | 80px | 0px | Page hero headlines; maximum visual prominence |
| Heading 2 | WhatsApp Sans Var | 48px | 400 | 48px | 0px | Major section titles; strong hierarchy anchor |
| Heading 3 | WhatsApp Sans Var | 32px | 400 | normal | 0px | Section subheadings and feature titles |
| Heading 5 | WhatsApp Sans Var | 24px | 400 | 24px | 0px | Medium-weight subheadings; card titles |
| Body Text | WhatsApp Sans Var | 18px | 400 | 25px | 0px | Primary content, paragraphs, descriptions |
| Body Small | WhatsApp Sans Var | 16px | 400 | 19.2px | 0px | Supporting text, secondary content |
| Button Text | WhatsApp Sans Var | 16px | 500 | 19.2px | 0px | All interactive buttons and CTAs |
| Caption / Label | WhatsApp Sans Var | 12px | 400 | 15.6px | 0px | Timestamps, labels, navigation items |
#25D366#1C1E2116px50016px 24px (inferred from 56px padding scale)50px (fully rounded for prominence)1px solid #1C1E2119.2px#43CD66, maintain border#25D366, increase opacity to 0.92px solid #111B21 at 4px offsetrgba(0, 0, 0, 0) (transparent)#1C1E2116px50012px 20px50px2px solid #1C1E2119.2pxrgba(28, 30, 33, 0.04)rgba(28, 30, 33, 0.08)rgba(0, 0, 0, 0)#1C1E2116px4006px0pxnone19.2px1px solid #1C1E21#111B21#FFFFFF or light variant per sender (received vs. sent)#1C1E2118px4008px 12px8px (inferred; softer than buttons)none25pxrgba(0, 0, 0, 0) (transparent on background image or solid)#1C1E2118px40024px16pxnone25px#FCF5EB or image overlay with gradient#FFFFFF (on dark overlays)88px 40px25px (for rounded hero images)#FFFFFF#1C1E2116px40016px 20px50px1px solid #1C1E2119.2px#111B21 at 0.5 opacity2px solid #25D366, shadow 0 0 0 3px rgba(37, 211, 102, 0.1)2px solid #FACEB#FFFFFF#1C1E2112px to 16px depending on item type40016px 40px0px1px solid rgba(28, 30, 33, 0.1) (bottom)56px for touch targets#25D366, slight background tint#25D366, bottom border 2px solid #25D366rgba(0, 0, 0, 0)#1C1E2116px4008px 12px0px19.2px#25D3661px solid #25D366 on hover or active#25D366#FFFFFF12px5004px 12px50pxnone14.4pxrgba(0, 0, 0, 0)#111B2112px4000px0px0.715.6pxBase Unit: 4px
Spacing Scale (multiples of 4px):
4px (1x) — Micro gaps, icon spacing8px (2x) — Tight component spacing12px (3x) — Button padding, small gaps16px (4x) — Default padding, standard margins20px (5x) — Card padding, moderate spacing24px (6x) — Section padding, feature spacing32px (8x) — Major section spacing40px (10x) — Navigation padding, container gutters56px (14x) — Large feature spacing72px (18x) — Vertical rhythm for hero sections88px (22x) — Extra large section spacing96px (24x) — Maximum section padding124px (31x) — Hero section margins156px (39x) — Page-level spacingContext Usage:
4px–8px12px–24px16px–40px40px–156px72px–96pxMax Width: 1440px (responsive down to 320px mobile)
Container Strategy:
40px–88px1440px centered with 40px gutters on desktop, 16px on mobileSection Patterns:
WhatsApp's design prioritizes negative space as a core design principle. Generous padding around text and components creates visual separation and breathing room, especially between major sections. This approach supports cognitive ease: users can parse information quickly without visual clutter. Vertical rhythm is maintained through consistent multiples of 8px–40px spacing between elements, creating a harmonious flow down the page. Horizontal spacing uses symmetrical padding to frame content and guide the eye naturally toward CTAs.
0px — Navigation, bar components, structured layouts8px — Message bubbles, soft card corners (inferred)16px — Feature cards, containers (inferred)25px — Image containers, special prominence50px — Buttons, inputs, fully rounded for interactive affordance50% — Avatar circles, profile images, perfect circles| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Navigation, background text, secondary elements |
| Raised | 0 1px 3px rgba(0, 0, 0, 0.1) | Message bubbles, cards, subtle lift |
| Elevated | 0 4px 12px rgba(0, 0, 0, 0.15) | Floating buttons, modal backgrounds, feature cards |
| Modal | 0 10px 40px rgba(0, 0, 0, 0.25) | Modals, popovers, maximum prominence |
Shadow Philosophy:
WhatsApp uses minimal shadows strategically to create subtle depth without overwhelming the clean interface. Shadows are reserved for elements that require visual separation: message bubbles, modals, and floating actions. The shadow color consistently uses black (rgba(0, 0, 0, ...)) at various opacities (0.1–0.25), maintaining visual cohesion. Larger components use slightly softer shadows (greater blur) to avoid harsh contrast, while smaller elements use tighter shadows for precision. No shadow is applied to flat, background-level components or text-only sections, preserving the minimalist aesthetic.
#25D366 for Download, Join, and primary action buttons to maintain visual hierarchy and focus user attention.8px from the spacing scale to create rhythm and predictability across all layouts.#1C1E21 or #111B21 text on #FFFFFF backgrounds for WCAG AA compliance; test color combinations.50px or 50%) only to buttons, inputs, and avatars — Use 0px–16px for cards and containers to maintain visual hierarchy.0 1px 3px) for depth without distraction — Avoid heavy shadows that compete with content.#25D366 exclusively for actionable CTAs; gray text conveys supporting information.8px) to body text or content cards — This contradicts the system's clarity-first philosophy and appears gimmicky.0 10px 40px rgba(0, 0, 0, 0.25) — Excessive shadows muddy the clean aesthetic and reduce contrast.12px or increase above 80px without design review — These boundaries maintain the hierarchy and accessibility standards.4px or larger than 156px unless justified — Maintain spacing scale consistency for cohesive layouts.#1C1E21) and secondary (#111B21) for clarity.| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–479px | Single column, full-width sections, padding 16px, font sizes -2px for body, nav collapses to hamburger, buttons stack vertically |
| Small Tablet | 480px–767px | Single column with 24px padding, reduced hero image, nav remains inline if space permits, button groups side-by-side |
| Tablet | 768px–1023px | Two-column layouts, padding 32px, nav full horizontal menu, CTA buttons side-by-side, images scaled to fit container |
| Desktop | 1024px–1439px | Three-column layouts possible, padding 40px–56px, full-width sections with max-content width, hero side-by-side text + image |
| Large Desktop | 1440px+ | Content container constrained to 1440px with centered alignment, maximum column count, generous side margins, full imagery |
44px × 44px for all interactive elements on mobile devices48px × 48px for buttons, links, and form inputs on touch screens8px gap to prevent accidental activation44px minimum44px–48px; no need to enlarge further on desktop40px horizontal (desktop) → 32px (tablet) → 16px (mobile)18px to 16px on mobile, H1 from 80px to 48px or 40px on mobile72px–96px between sections (desktop) → 48px–72px (tablet) → 32px–48px (mobile)#25D366) — Download, Join, primary action buttons#43CD66) — Hover states, subtle emphasis#1C1E21) — Body, buttons, main content (446 uses)#111B21) — Headings, support text, navigation (438 uses)#FFFFFF) — Main canvas, card backgrounds, primary surface (236 uses)#FCF5EB) — Hero tints, feature section backgrounds#FACEB) — Warning indicators, alerts#1C1E21) — Button borders, focus outlines#1C1E21 or #FFFFFF depending on contrast; test with WCAG toolsColor discipline: Use #25D366 exclusively for primary actions and CTAs. All other elements default to #1C1E21 text on #FFFFFF backgrounds. Secondary text uses #111B21. Validate all contrast ratios ≥4.5:1 for accessibility.
Typography hierarchy: Implement exactly 8 size tiers (80px, 48px, 32px, 24px, 18px, 16px, 12px plus inferred 14px for buttons). Font weight is always 400 except buttons (500). Never add custom weights or sizes outside this range.
Spacing consistency: Apply multiples of 4px from the scale (4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 56px, 72px, 88px, 96px, 124px, 156px). Padding uses 16px–40px for components; margin uses 40px–156px for sections.
Button affordance: Primary buttons use #25D366 background + 50px border radius + 500 font weight. Secondary buttons are transparent with 2px #1C1E21 border + 50px radius. Ghost buttons are unstyled text. All must reach minimum 44px height on mobile.
Border radius strategy: Use 0px for flat elements (nav, text), 8px–16px for cards and containers, 25px for images, and 50px or 50% for buttons, inputs, and avatars. Never apply radius > 16px to cards unless they are special featured components.
Shadow minimalism: Apply only three shadow levels: 0 1px 3px rgba(0, 0, 0, 0.1) for raised cards, 0 4px 12px rgba(0, 0, 0, 0.15) for elevated elements, 0 10px 40px rgba(0, 0, 0, 0.25) for modals. No shadow for flat text or background elements.
Responsive breakpoints: Design mobile-first at 320px. Expand layouts at 480px (small tablet), 768px (tablet), 1024px (desktop), 1440px (large desktop). Reduce padding from 40px → 32px → 16px as viewport shrinks; reduce font sizes by 2px–4px on mobile only if necessary. Always maintain 44px–48px touch targets.
Component patterns: Navigation spans full width with 16px–40px padding and 12px–16px font size. Buttons use minimum 48px height. Message bubbles use 8px radius + light shadow. Hero sections use 88px–156px vertical padding with full-width backgrounds. Cards maintain 20px–24px internal padding with 16px gaps between items.
Accessibility baseline: Ensure all text meets WCAG AA contrast (4.5:1 minimum); use #1C1E21 or #111B21 on light backgrounds, #FFFFFF on dark backgrounds. Interactive elements (buttons, links) must be at least 44px in touch dimension. Never use color alone for status; pair with text or icons. Test with screen readers; use semantic HTML (button, nav, heading tags). Avoid animations with motion that exceed 3px or 2-second duration without pause controls.