Afterpay Design System

Afterpay's global root page is the rare consumer-fintech surface that almost looks like a directory listing. The captured landing for afterpay.com is the country-select splash, not a marketing homepage — "Afterpay International" sits at 64px in ink black on pure white, with a single line of 24px body underneath ("Choose your region & language below"), and a 6-up grid of hairline-bordered region cards beneath that. Each card is a 12px-rounded box carrying a flag pictogram and a country label: United States, Australia, New Zealand, United Kingdom, Canada English, Canada Francais. There is no hero band, no logo wall, no decorative chrome, no chromatic accent — the page is functionally a router into the six regional Afterpay sites where the brand's mint-green identity actually lives. The single typeface declared in the CSS is Italian Plate No2 Expanded, the wide-letterform proprietary sans Afterpay commissioned from Klim Type Foundry; it carries the entire typographic identity at one weight pair (400 for body, 700 for the display).

The DESIGN.md file packages the captured tokens into a machine-readable spec. Inside: 3 color tokens — ink black, pure white, and the hairline gray that carries the region-card borders, plus a Tailwind default ring color declared but unused; 3 typography tokens running Italian Plate No2 Expanded at the 64px display, 24px lead, and 16px body sizes; a single 12px corner radius; 4 spacing tokens with 16px as the dominant module; and 14 component definitions covering the region card, the page heading, the lead paragraph, and the missing scaffolding (button, top-nav, footer) inferred from Afterpay's regional sites since the global splash has none. The frontmatter has no `primary` token — the captured surface has no brand-layer color with usage above 5, so the system reads as monochrome on this entry.

Feed this file to an AI coding tool and it reproduces what the global splash actually is: ink-on-white restraint, Italian Plate No2 Expanded across every typographic tier, single-value 12px radius, hairline-bordered region cards, and the deliberate absence of a chromatic accent. The caveat is structural: the global splash is one surface among many, and the brand's actual marketing identity — the mint green `#b2fce4` voltage, the rounded pill CTAs, the lifestyle photography — lives on the country-specific homepages (afterpay.com/us, afterpay.com/au) that this DESIGN.md does not capture. If you need the full regional identity, follow up with a per-locale extract once a country is chosen.