---
version: alpha
name: WhatsApp
description: "Cream paper, one loud green, and headlines that never raise their weight."
colors:
  on-surface: "#1C1E21"
  surface: "#FCF5EB"
  outline: "#33463F"
  primary: "#0373E9"
  white: "#FFFFFF"
  green-wash: "#E6FFDA"
  whatsapp-green: "#25D366"
  deep-slate: "#111B21"
  near-black: "#222222"
  black: "#000000"
  cool-line: "#F0F4F9"
  control-grey: "#5E5E5E"
  social-blue: "#385898"
  deep-green-link: "#103928"
  divider-fill: "#526571"
  divider-ink: "#DADDE1"
typography:
  display:
    fontFamily: WhatsApp Sans Var
    fontSize: 80px
    fontWeight: 400
    lineHeight: 80px
    letterSpacing: 0em
  headline-l:
    fontFamily: WhatsApp Sans Var
    fontSize: 60px
    fontWeight: 400
    lineHeight: 60px
    letterSpacing: 0em
  headline-m:
    fontFamily: WhatsApp Sans Var
    fontSize: 48px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: 0em
  headline-s:
    fontFamily: WhatsApp Sans Var
    fontSize: 32px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: 0em
  title:
    fontFamily: WhatsApp Sans Var
    fontSize: 24px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  body-l:
    fontFamily: WhatsApp Sans Var
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25px
    letterSpacing: 0em
  body-m:
    fontFamily: WhatsApp Sans Var
    fontSize: 16px
    fontWeight: 400
    lineHeight: 19.2px
    letterSpacing: 0em
  label:
    fontFamily: WhatsApp Sans Var
    fontSize: 16px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  caption:
    fontFamily: WhatsApp Sans Var
    fontSize: 12px
    fontWeight: 400
    lineHeight: 14.4px
    letterSpacing: 0em
rounded:
  card-media-frame-feature-tile: 25px
  feature-grid-image: 24px
  pill-control: 50px
  section-band-article-card-accordion-row: 0px
spacing:
  hair: 5px
  2x: 8px
  4x: 16px
  5x: 20px
  6x: 24px
  7x: 28px
  8x: 32px
  10x: 40px
  14x: 56px
  15x: 60px
  22x: 88px
  24x: 96px
  29x: 116px
---
# WhatsApp — Style Reference

> Cream paper, one loud green, and headlines that never raise their weight.

**Theme:** light

The system is a short stack of flat grounds and a single saturated green. Warm cream carries the header and most of the long scroll, a pale green wash marks the feature bands, white does the cards and the widest sections, and a near-black band drops in mid-page to talk about encryption before the footer picks the same colour up. The green is a control colour before it is anything else — it fills the Download pill and the footer Log in, and it turns into display ink on the word "freely". Headings run enormous and light: eighty, sixty, forty-eight and thirty-two pixels, every one at weight 400 with normal tracking and line-height set equal to the size or one small step above it, so the display reads as an even grey wall rather than a shout. Depth arrives as a change of fill, a 25px corner and a 1px hairline rather than as elevation.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cream Canvas | `#FCF5EB` | `--color-cream` | The warm ground carried by `._au07._av3f._au1e._av38` and `._9t2b._aga3`: 25 observations, all of them fills, on section ×21 and header ×4. The paper stays paper. |
| White | `#FFFFFF` | `--color-white` | The census's base canvas by painted area; also the card fill, the accordion button fill and the ink of every footer link. |
| Green Wash | `#E6FFDA` | `--color-green-wash` | Carried by `._9t2b._afht._a8s9`: 22 observations, all fills, on div ×12 and section ×10. Change the ground with it rather than tinting type. |
| WhatsApp Green | `#25D366` | `--color-green` | The action colour: 15 fills on the Download and Log in pills, 5 as ink. It fills controls and the word "freely", nothing decorative. |
| Ink | `#1C1E21` | `--color-ink` | The body and display ink, 1907 text observations. Also the 1px outline on every pill and the fill of the footer's social discs. |
| Deep Slate | `#111B21` | `--color-slate` | The dark plane: footer, legal bar, and the dark section band. Doubles as accordion heading ink and the nav Log In outline. |
| Near Black | `#222222` | `--color-ink-222` | 71 observations, all of them text, on `._9vd5._ad_0._aenu._9sey` — "Call with WhatsApp on iPad". A second ink, half a step darker. |
| Black | `#000000` | `--color-black` | 55 observations, all text, on `._afi-` and "Connect across devices". Reserve it for the tightest-contrast label; the working ink is `--color-ink`. |
| Cool Line | `#F0F4F9` | `--color-line` | The structural hairline: 34 of 38 observations are borders, drawn by `._9wma._aj1w` and `._aily._9wm9`. Cool where the rest of the palette is warm. |
| Control Grey | `#5E5E5E` | `--color-grey` | Fills `._afwh._afbm._afbn._afj3`, the 40px media pause disc, and inks "* Data charges may apply. Contact your provider ". A utility grey. |
| Link Blue | `#0373E9` | `--color-link-blue` | 8 observations, all text, on `._9vcv._9vcx._9sep`. Editorial link colour. |
| Social Blue | `#385898` | `--color-link-social` | 8 observations, all text, on `._asnw._9vcv`. Two blues coexist — do not collapse them. |
| Deep Green Link | `#103928` | `--color-green-deep` | 8 observations, all text, on `._af7o._9vd5._aenr` — "How to create a group message or text for an And", the one row in the type census set at −0.54px. |
| Footer Rule | `#33463F` | `--color-rule-footer` | 4 observations, all borders, on `._9t2m`, the divider above the legal bar. A green-black hairline, not a neutral. |
| Divider Fill | `#526571` | `--color-divider` | 4 fills on the `hr` rules `._9tpv._9ydm._9ydn`, on the groups page. Slate-blue. |
| Divider Ink | `#DADDE1` | `--color-divider-ink` | The text colour those same `._9tpv._9ydm._9ydn` rules carry, 4 observations. Pale and structural. |

## Tokens — Typography

### WhatsApp Sans Var — the whole system: display, heading, body, label and caption, at three weights, with 400 doing every job above 18px · `--font-sans`

- **Substitute:** Inter, Hanken Grotesk, ui-sans-serif
- **Weights:** 400, 500, 600
- **Sizes:** 12px, 16px, 18px, 24px, 32px, 48px, 60px, 80px
- **Line height:** 14.4px at 12px up to 88px at 80px — 1.0 to 1.34, tightening as the size grows
- **Letter spacing:** normal on every measured row but one: the 18px/500 row inked `#103928` on the groups page, "How to create a group message or text for an And", at −0.54px
- **Role:** the whole system: display, heading, body, label and caption, at three weights, with 400 doing every job above 18px

### Times — present in the font walk with no measured text row of its own · `--font-serif`

- **Substitute:** Times New Roman, Tinos, serif
- **Weights:** 400
- **Sizes:** `not measured`
- **Line height:** `not measured`
- **Letter spacing:** `not measured`
- **Role:** the walk records the family and its single weight, but no heading or text row is set in it — treat it as the inherited serif fallback, not a design choice

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 80px | 80px / 88px | normal | `--text-display` |
| Headline L | 60px | 60px / 66px | normal | `--text-headline-lg` |
| Headline M | 48px | 48px | normal | `--text-headline-md` |
| Headline S | 32px | 32px | normal | `--text-headline-sm` |
| Title | 24px | 24px / 30px | normal | `--text-title` |
| Body L | 18px | 25px | normal | `--text-body-lg` |
| Body M | 16px | 19.2px / 22px | normal | `--text-body` |
| Label | 16px | 16px | normal | `--text-label` |
| Caption | 12px | 14.4px / 15.6px / 16.08px | normal | `--text-caption` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Hair | 5px | `--spacing-hair` |
| 2x | 8px | `--spacing-2` |
| 4x | 16px | `--spacing-4` |
| 5x | 20px | `--spacing-5` |
| 6x | 24px | `--spacing-6` |
| 7x | 28px | `--spacing-7` |
| 8x | 32px | `--spacing-8` |
| 10x | 40px | `--spacing-10` |
| 14x | 56px | `--spacing-14` |
| 15x | 60px | `--spacing-15` |
| 22x | 88px | `--spacing-22` |
| 24x | 96px | `--spacing-24` |
| 29x | 116px | `--spacing-29` |

Most of the ladder is a clean multiple of four; the 5px gap on `._aeo8._av2s._9vcv._9u4o` and the 14px pill padding on the nav's Log In are the two steps that sit off it.

### Border Radius

| Element | Value |
|---------|-------|
| Card, media frame, feature tile | 25px |
| Feature-grid image | 24px |
| Pill control | 50px |
| Icon button, avatar disc | 50% |
| Section band, article card, accordion row | 0px |

### Layout

- **Page max-width:** section bands measure 1920px edge to edge; the content column inside them measures 1080px on `._9wma._aj1w` and `._af7m._9scb`, and 1050px on the footer rule `._9t2m`
- **Section gap:** 88px on article ×12 and 96px on div ×11, both on every page; 56px on the home and calling pages
- **Card padding:** 56px on `._aedw._aedy._aikl`, 32px on `._9ta2`
- **Element gap:** 16px is the most-painted gap (17 observations); above it sit 24px, 40px and 56px; below it, 8px inside the language button and 5px inside `._aeo8._av2s._9vcv._9u4o`

## Components

### Global Header

**Role:** the fixed masthead that carries the wordmark, the feature links and the two account controls.

`._au07._av3f._au1e._av38` — a `header` filled `#FCF5EB`, padded 16px top and 60px on the sides, radius 0px, border none, box 1920×80px on all four pages. The cream here is the same ground the hero sits on, so the bar dissolves into the page rather than floating above it: no shadow, no rule. Nav labels come from `._advp._aeam._ap3t` at 16px/500/16px in `#1C1E21`, with `._advp._aeam` carrying the 16px/400/19.2px "Features" variant. Internal rhythm is 56px on `._au08` between logo and nav, 40px on `._av3e`, 16px on `._au0a`.

### Primary Pill Button

**Role:** the download action — the loudest thing on any page, and the only green fill a visitor is asked to click.

Two measured variants of `._aeo8._9vcv._9u4o._9u4i`, not interchangeable. The in-page variant is an `a` filled `#25D366` with `#1C1E21` text at 16px/400/16px, padding 16px top and 28px sides, radius 50px, border 1px `#1C1E21`, no shadow, box 161–228×53px, 7 elements on the home, calling and messaging pages, carrying "Download Mac app". The nav variant is tighter: 16px/500/16px, padding 12px 20px, radius 50px, border 1px `#1C1E21`, box 145×45px, 4 elements across all pages, reading "Download". The 1px dark outline on saturated green is the signature — the green never floats free of its edge.

### Outline Pill Button

**Role:** the secondary account action that sits beside Download without competing with it.

`._aeo8._9vcv._9u4o._9u4j` in its nav form: an `a` filled `#FFFFFF` with `#1C1E21` text at 16px/500/16px, padding 14px top and 20px sides, radius 50px, border 1px `#111B21`, no shadow, box 116×46px, 4 elements on every page, reading "Log In". The same class measures two other ways — a 16px/400 white pill at padding 16px 28px, box 132×50px, once on the home page, and a `#25D366` pill with `#111B21` text at padding 16px 32px, box 140×50px, 4 elements across all pages, the form the footer uses. One geometry vocabulary, three jobs.

### Read More Button

**Role:** the card-level entry point into a blog post, sized to sit inside a card rather than lead a section.

`._9vcv._9u4j._9sep` — an `a` filled `#FFFFFF` with 16px/400/16px type, padding 16px top and 28px sides, radius 50px, border 1px `#1C1E21`, no shadow, box 137×50px, 5 elements on the home page. It reuses the primary pill's padding and radius and swaps only the fill, which is how the system signals rank: geometry constant, colour the whole hierarchy.

### Language Selector

**Role:** the locale control that anchors the bottom-right of the footer bar.

`._avz-._ain3._9vcv` — a `button` filled `#111B21` with `#FFFFFF` text at 16px/500/19.2px, padding 16px top and 28px sides, radius 50px, border none, no shadow, box 127×51px, 4 elements across all pages, reading "English". It carries no border because it sits on its own fill inside the dark footer, where a hairline would have nothing to separate. Its 8px internal gap keeps the chevron tight to the word.

### Circular Icon Button

**Role:** the round, label-free controls — social links in the footer and the carousel arrows under a card rail.

Two rows, same 50% radius, different treatment. The filled disc is `._afwh._adig._ao_2._ad_c` — an `a` filled `#1C1E21` with `#FFFFFF` ink, radius 50%, border 1px `#FFFFFF`, no shadow, box 48×48px, 20 elements on every page, no text of its own. The outlined arrow comes in two classes measuring identically, `._afwh._adig._ao_2._afpc` and `._afwh._adig._ao_2._aikz` — `button`, fill none, radius 50%, border 1px `#1C1E21`, no shadow, box 48×48px, 7 elements each across all pages. Do not shrink a 48px disc to fit a tighter rail.

### Media Pause Control

**Role:** the small overlay control on an auto-advancing feature block.

`._afwh._afbm._afbn._afj3` — a `button` filled `#5E5E5E` with `#FFFFFF` ink, radius 50%, border none, no shadow, box 40×40px, 5 elements on the calling, messaging and groups pages, carrying no text. A mid-grey fill instead of ink, green or white, and 40px rather than 48px: both choices push it below the reading layer without hiding it. Give it no border; grey against cream is separation enough.

### Blog Card

**Role:** the news tile in the home page's story rail, holding a headline, a standfirst and a Read More.

`._aedw._aedy._aikl` — a `div` filled `#FFFFFF`, padding 56px on all four sides, radius 25px, border none, no shadow, box 504×497px, 5 elements on the home page, containing "One billion people are now protected with passke". Inside, the headline is `._9vd5._ad_0._ad_b` at 32px/400/32px in `#1C1E21`; the standfirst runs 16px/400/22px in the same ink. The 56px inset is the most generous padding the system paints, and with no shadow and no border the card separates from the green band purely by luminance — which is why the radius has to be a full 25px to register.

### Feature Article Card

**Role:** the compact feature tile in the messaging page's grid — an icon-led title with a line of support copy.

`._9ta2` — an `article` filled `#FFFFFF`, padding 32px on all four sides, radius 0px, border none, no shadow, box 504×148–154px, 6 elements on the messaging page, containing "Send photos and videos Capture and edit everyday". Note the corner: square where the blog card is round, so the two are not variants of one component and should never share a radius token. Half the inset and a short box make it a reading unit, not a destination; the rhythm around it is the 88px vertical padding `._9ta2._9sd0._9sde` carries.

### FAQ Accordion Row

**Role:** the expandable question row in the help block on the calling and messaging pages.

Two nested rows. The list item `._9wma._aj1w` is an `li` with fill none, type 18px/400/25px, padding 0px, radius 0px, border 2px `#F0F4F9`, no shadow, box 1080×61px, 17 elements. The trigger inside it, `._aily._9wm9`, is a `button` filled `#FFFFFF` with `#000000` text, padding 1px top and 0px sides, radius 0px, border 1px `#F0F4F9`, no shadow, box 1080×59px, 17 elements. The question is set by `._9vd5._ad_0._aenu._9sc-` at 24px/400/24px in `#111B21`. A 2px cool-grey rule wrapping a 1px one is the densest border treatment the census records.

### Help Link Card

**Role:** the support-article row on the groups page — a full-width card whose whole surface is one link.

`._af7m._9scb` — a `div` filled `#FFFFFF`, padding 0px, radius 25px, border none, no shadow, box 1080×102px, 7 elements on the groups page, containing "How to delete a group on WhatsApp?". The link text comes from `._af7o._9vd5._aenr` at 18px/500/25px in `#103928` with −0.54px tracking, the single tracked row in the type census. A 1080px card at 25px radius and only 102px tall is a deliberately flat shape: the radius keeps it in the card family, the height keeps it in the index.

### Footer

**Role:** the dark sitemap that closes every page, carrying the link columns, the log-in pill and the legal bar.

`._9t2i` — a `footer` filled `#111B21`, padding 0px, radius 0px, border none, no shadow, box 1920×530px, 4 elements across all pages. Column headings are `h4` at 12px/400/15.6px in `#FFFFFF`; the links run 18px/400/25px in the same white, inverting the page's usual relationship — labels small, links large. Below, `._9t2m` draws the divider as a `div` with a 1px `#33463F` border, 32px top padding and a 1050px box, and `._9t2k` holds the legal bar as a `div` filled `#111B21`, padding 4px top and 24px sides, box 1920×124px, carrying "2026 © WhatsApp LLC" at 12px/400/16.08px in `#FFFFFF` and "Terms & Privacy Policy" at 12px/400/14.4px in `#F0F4F9`.

## Do's and Don'ts

### Do

- Set every heading at weight 400. No row in the heading census paints anything else, from "Connection is a call away" at 80px down to "Call with WhatsApp on iPad" at 24px — size is the entire hierarchy.
- Let line-height equal the font size at 48px and below, and open it only one notch at the top: "Get WhatsApp for Mac" runs 60px on 66px, "Connection is a call away" 80px on 88px.
- Put the 1px `#1C1E21` outline on the green pill. The primary control is a fill *and* an edge; dropping the edge makes it a generic green button.
- Change the ground, not the shadow, to separate a band: cream, green wash, white and slate are the four section fills `._9t2b._wauiSection__mediumWidth` paints.
- Keep the 25px radius for anything card-shaped and 50px for anything pill-shaped. Those two radii carry 72 and 29 observations respectively; the vocabulary is that small on purpose.
- Give sections 88px or 96px of vertical air: `._9ta2._9sd0._9sde` carries the 88px step and `._a8tc._afp9._asrf` the 96px one, the two largest the section-padding census records.

### Don't

- Don't add a box-shadow. The walk records box-shadow on the captured pages and finds none — elevation in this system is luminance and radius, full stop.
- Don't track the display type. Every measured heading row is `normal`; the sole tracked row in the whole census is the 18px/500 groups-page help link at −0.54px.
- Don't tint the cream or the green wash with text. Across their carriers — `._au07._av3f._au1e._av38` and `._9t2b._aga3` for `#FCF5EB`, `._9t2b._afht._a8s9` for `#E6FFDA` — every observation is a fill. They are grounds, not inks.
- Don't collapse the two blues. `#0373E9` and `#385898` each carry 8 text observations on different anchor classes; they are two link roles, not a rounding error.
- Don't square off the blog card or round off the article card. `._aedw._aedy._aikl` measures 25px and `._9ta2` measures 0px; the mismatch is the system, not a bug.
- Don't let green become a background colour. Its 15 fills are all controls — the moment a green plane appears, the Download pill stops being the loudest thing on the page.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | The census's base ground by painted area, and the full-bleed section fill on the calling and messaging pages |
| 1 | Cream band | `#FCF5EB` | The warm ground under the header and most marketing sections |
| 2 | Green wash | `#E6FFDA` | The feature band that interrupts the cream |
| 3 | Card | `#FFFFFF` | Blog, article and help cards floating on levels 1 and 2 |
| 4 | Dark plane | `#111B21` | The encryption band on the home page and the footer on every page |

## Elevation

There is none, and that is a position rather than an omission: the shadow walk covers the captured pages and returns nothing. Depth is built three ways instead. Luminance step — a white card on the `#E6FFDA` wash or the `#FCF5EB` cream reads as forward because it is brighter, not because it casts anything. Radius — the 25px corner on `._aedw._aedy._aikl` and `._9v7q` does the work an edge shadow would do, so it has to be large enough to read at a glance. And the 1px hairline — `#1C1E21` around a pill, `#F0F4F9` around an accordion row, `#33463F` above the legal bar. Build a new surface from those three and it will belong; add a blur and it will not.

## Imagery

Photography is the primary imagery and documentary in tone: people mid-gesture in real rooms and streets, warm available light, shallow depth, no studio seamless. It arrives in two forms. Lifestyle frames run behind the hero and inside the feature grid, inside `._9v7q` at 25px radius (20 elements across all pages, boxes from 328px up to 1856px wide), with a narrower 24px variant `._9v7q._a96c._auf3` on two images. The second form is the product mock: phone and desktop frames carrying chat threads, voice notes, reactions and call controls, composited so the UI overlaps the photograph behind it. Illustration appears as sticker art inside those mocks. The interface is shown in use, not as a floating feature diagram.

## Layout

Every band is full-bleed. `._9t2b._wauiSection__mediumWidth` measures 1920px wide in all four of its fills — cream (18 elements, 304–1365px tall), green wash (7 elements, 197–819px), white (4 elements, 180–860px) and slate (1 element, 846px, on the home page) — so the page is a vertical stack of edge-to-edge colour fields with the content column floated inside. That column reads at 1080px on the accordion and help-card rows, 1050px on the footer rule. Gutters vary by role: 60px on the header, 116px on the calling and messaging content blocks, 56px inside the home page's blog cards. Vertical rhythm is 88px and 96px, with a tighter 56px step on the home and calling pages. Within a band the standard composition is a two-column split — headline, body and one link on one side, a device mock or photograph on the other — alternating sides down the scroll. The nav is a single fixed row at 1920×80px, with no sidebar.

## Typography Voice

One family does everything, and it changes weight only when it gets small. Above 18px the census paints nothing but 400 — an 80px hero, a 60px section head, a 48px pull quote, a 32px card title, one weight, normal tracking. Weight 500 appears at 16px and 18px on nav labels, "Download", "Log in" and "English"; weight 600 appears on a 4-element `b` row at 18px on the groups page, "Stay safe with private group messaging features". Emphasis runs *down* the scale rather than up it: the biggest type feels the lightest, and the things that thicken are controls. The second move is the line-height ladder. At 12px the leading is 1.2–1.34; at 16–18px it opens to 1.2–1.39; at 32–48px it locks to 1.0; at 60–80px it eases back to 1.1. Setting a 48px headline solid gives the display its slab-of-grey density; easing the 80px to 1.1 stops the hero binding.

## Agent Prompt Guide

## Quick Color Reference

- background: `#FFFFFF`
- text: `#1C1E21`
- surface: `#FCF5EB`
- border: `#F0F4F9`
- accent: `#25D366`
- primary action: `#25D366`

## Example Component Prompts

1. **Primary Pill Button**: Build an anchor styled as a pill: background `#25D366`, text `#1C1E21` at 16px/400 with 16px line-height, padding 16px top and bottom and 28px left and right, border-radius 50px, 1px solid `#1C1E21` border, no box-shadow. Natural width around 161–228px, height 53px. Label "Download Mac app" with a trailing download glyph.
2. **Blog Card**: Build a 504×497px card: background `#FFFFFF`, 56px padding on all sides, border-radius 25px, no border, no box-shadow. Stack a 32px/400 headline with 32px line-height in `#1C1E21`, a 16px/400 paragraph with 22px line-height in the same ink, then a pill link at the bottom — background `#FFFFFF`, 16px/400 text, padding 16px 28px, border-radius 50px, 1px solid `#1C1E21`, 137×50px, labelled "Read More". Place it on an `#E6FFDA` ground.
3. **Global Header**: Build a 1920×80px header: background `#FCF5EB`, padding 16px top and bottom, 60px left and right, no border, no shadow. Left: wordmark. Centre: nav labels at 16px/500 with 16px line-height in `#1C1E21`, separated by a 40px gap, with a 56px gap between the wordmark and the nav group. Right: a white pill at 16px/500, padding 14px 20px, radius 50px, 1px solid `#111B21`, 116×46px reading "Log In", then a `#25D366` pill at 16px/500, padding 12px 20px, radius 50px, 1px solid `#1C1E21`, 145×45px reading "Download".
4. **FAQ Accordion Row**: Build a 1080×61px list item with no fill, 2px solid `#F0F4F9` border, 0px radius, text at 18px/400 with 25px line-height. Inside it place a full-width button, 1080×59px, background `#FFFFFF`, text `#000000`, 1px solid `#F0F4F9`, 0px radius, padding 1px top and 0px sides. Set the question at 24px/400 with 24px line-height in `#111B21`. No shadow anywhere.
5. **Footer**: Build a 1920×530px footer: background `#111B21`, no padding of its own, 0px radius. Four link columns with `h4` headings at 12px/400 and 15.6px line-height in `#FFFFFF`, and links at 18px/400 with 25px line-height in `#FFFFFF`. Add a `#25D366` pill at 16px/400, padding 16px 32px, radius 50px, 1px solid `#1C1E21`, 140×50px, reading "Log in". Close with a 1050px-wide divider carrying a 1px `#33463F` border and 32px of top padding, then a 1920×124px legal bar with 4px top and 24px side padding, "2026 © WhatsApp LLC" at 12px/400 and 16.08px line-height in `#FFFFFF`, and 48×48px circular social links filled `#1C1E21` with a 1px `#FFFFFF` border.

## Similar Brands

- **Duolingo** — a single saturated green carried entirely by rounded controls on a bright, friendly ground, with the brand colour reserved for the thing you press.
- **Cash App** — the same discipline of one loud green against near-black ink and very large, very light display type.
- **Monzo** — warm off-white grounds, pill-shaped controls with hairline edges, and a shadowless card language that separates by luminance alone.
- **Mailchimp** — a cream-paper web system where a single high-chroma accent and oversized editorial headings do all the work and elevation is refused.
- **Headspace** — warm, illustration-friendly grounds stacked as full-bleed colour fields, with generous corner radii and photography of people rather than product.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-cream: #FCF5EB;
  --color-white: #FFFFFF;
  --color-green-wash: #E6FFDA;
  --color-green: #25D366;
  --color-ink: #1C1E21;
  --color-slate: #111B21;
  --color-ink-222: #222222;
  --color-black: #000000;
  --color-line: #F0F4F9;
  --color-grey: #5E5E5E;
  --color-link-blue: #0373E9;
  --color-link-social: #385898;
  --color-green-deep: #103928;
  --color-rule-footer: #33463F;
  --color-divider: #526571;
  --color-divider-ink: #DADDE1;

  /* Typography — Families */
  --font-sans: 'WhatsApp Sans Var', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Times', 'Times New Roman', Tinos, serif;

  /* Typography — Scale */
  --text-display: 80px;
  --text-headline-lg: 60px;
  --text-headline-md: 48px;
  --text-headline-sm: 32px;
  --text-title: 24px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-label: 16px;
  --text-caption: 12px;
  --leading-display: 88px;
  --leading-headline-lg: 66px;
  --leading-headline-md: 48px;
  --leading-headline-sm: 32px;
  --leading-title: 30px;
  --leading-body-lg: 25px;
  --leading-body: 22px;
  --leading-label: 16px;
  --leading-caption: 16.08px;
  --tracking-normal: normal;
  --tracking-tight: -0.54px;

  /* Spacing */
  --spacing-hair: 5px;
  --spacing-2: 8px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-22: 88px;
  --spacing-24: 96px;
  --spacing-29: 116px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-image: 24px;
  --radius-card: 25px;
  --radius-pill: 50px;
  --radius-circle: 50%;
}
```

### Tailwind v4

```css
@theme {
  --color-cream: #FCF5EB;
  --color-white: #FFFFFF;
  --color-green-wash: #E6FFDA;
  --color-green: #25D366;
  --color-ink: #1C1E21;
  --color-slate: #111B21;
  --color-ink-222: #222222;
  --color-black: #000000;
  --color-line: #F0F4F9;
  --color-grey: #5E5E5E;
  --color-link-blue: #0373E9;
  --color-link-social: #385898;
  --color-green-deep: #103928;
  --color-rule-footer: #33463F;
  --color-divider: #526571;
  --color-divider-ink: #DADDE1;

  --font-sans: 'WhatsApp Sans Var', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Times', 'Times New Roman', Tinos, serif;

  --text-display: 80px;
  --text-display--line-height: 88px;
  --text-headline-lg: 60px;
  --text-headline-lg--line-height: 66px;
  --text-headline-md: 48px;
  --text-headline-md--line-height: 48px;
  --text-headline-sm: 32px;
  --text-headline-sm--line-height: 32px;
  --text-title: 24px;
  --text-title--line-height: 30px;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 25px;
  --text-body: 16px;
  --text-body--line-height: 22px;
  --text-label: 16px;
  --text-label--line-height: 16px;
  --text-caption: 12px;
  --text-caption--line-height: 16.08px;

  --tracking-normal: normal;
  --tracking-tight: -0.54px;

  --spacing-hair: 5px;
  --spacing-2: 8px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-14: 56px;
  --spacing-15: 60px;
  --spacing-22: 88px;
  --spacing-24: 96px;
  --spacing-29: 116px;

  --radius-none: 0px;
  --radius-image: 24px;
  --radius-card: 25px;
  --radius-pill: 50px;
  --radius-circle: 50%;
}
```