Afterpay Design System

Overview

Afterpay's captured global root page is unusual for a consumer fintech. Routing as design: the surface at afterpay.com is the country-select splash, not a marketing homepage — "Afterpay International" in ink black at 64px sits over a single-line lead and a 6-up grid of hairline-bordered region cards (United States, Australia, New Zealand, United Kingdom, Canada English, Canada Francais). There is no hero band, no logo wall, no CTA pill, no decorative chrome. Where Klarna and Affirm immediately lead with their respective pink and lime brand voltages on the global homepage, Afterpay's global root holds back entirely. The brand's famous mint-green identity lives one click away, on the country-specific sites; the global splash is a router into those regions rather than a destination of its own.

The chrome that does render runs ink on white with one hairline gray border tone ({colors.hairline} — #cccccc) carrying the region-card outlines. The Tailwind default focus-ring color ({colors.focus-ring} — #3b82f6) is declared in the page's --tw-ring-color variable but never rendered on the captured surface. There is no primary token in the colors palette because no extracted color qualifies as a brand-layer voltage with meaningful usage — the only chromatic moments on the page are the small flag pictograms inside each region card, and those are imagery rather than brand chrome.

Typography is the system's load-bearing identity, and it carries the entire visual register alone. Italian Plate No2 Expanded — the wide-letterform proprietary sans Afterpay commissioned from Klim Type Foundry — handles every tier on the page. The 64px display at weight 700 with 72px line-height is the loudest moment; the 24px lead at weight 400 is the only secondary tier; 16px body sits at weight 400 with 24px line-height. There is no secondary typeface, no monospace, no serif declared in the captured CSS. The "Expanded" axis is the typographic signature: letterforms are visibly wider than a default humanist sans, which gives the 64px display heft without needing a 900-weight tier.

Key Characteristics:

• Routing-page chrome — the captured surface is a country selector, not a marketing homepage; the entire page is a heading + lead + 6-up region card grid.
• No chromatic brand voltage on the captured surface — every text and border renders in {colors.ink} (#000000) on {colors.canvas} (#ffffff); the brand's mint-green lives on the country-specific sites once a locale is chosen.
• Italian Plate No2 Expanded as the single typeface family — wide-letterform sans at weight 400 (body, 24px lead) and weight 700 (the 64px display), no secondary family.
• Single 12px corner radius ({rounded.md}) — appears 6 times in the captured page across the region cards and is the entire rounded shape language; no 4 / 8 / 16 / 24px tier.
• 64px section padding rhythm — the page uses 16/64px gutters and a 64px top spacer above the heading, signaling unusual generosity given the page's minimal content.
• Hairline-only region cards — {colors.hairline} (#cccccc) at 1px carries every visible border in the captured page; no shadow elevation, no surface-color contrast.
• 16px body line-height of 24px — the body-paragraph leading is generous at 150%, which the lead paragraph at 24px/32px maintains.
• Flag-pictogram inside cards — each region card carries a 48px flag bitmap (US stars-and-stripes, Australian Union Jack + Southern Cross, etc.) as the only chromatic moment on the page.

Colors

Surface

• Canvas ({colors.canvas} — #ffffff): the page floor. Pure white with no warm or cool tinting. Carries every band, every card surface, and the top-nav background on the regional sites that this DESIGN.md infers but does not capture.

Text and Border

• Ink ({colors.ink} — #000000): frequency 46 — text (26), border (20). The dominant tone on the captured page. Carries the 64px display headline, the 24px lead paragraph, every card label, and every region-card border at low opacity. Pure black with no chroma — the brand's editorial alternative to a chromatic accent.
• Hairline ({colors.hairline} — #cccccc): frequency 6 (all border). The structural border tone — used on the region-card outlines. A mid-tone gray rather than a near-white hairline; the borders read clearly against the white canvas without needing a heavier weight.

Focus

• Focus Ring ({colors.focus-ring} — #3b82f6): the Tailwind default ring color declared in the page's --tw-ring-color variable. Frequency 0 on the captured render — wired into the stylesheet but not visibly rendered. The brand has not customized this token away from Tailwind's default, suggesting the page was built with minimal styling intervention.

Typography

Font Family

The system declares one family: Italian Plate No2 Expanded — the wide-letterform proprietary sans Afterpay commissioned from Klim Type Foundry — across every typographic tier on the page. Fallbacks walk to Helvetica, Arial. There is no secondary sans, no serif, no monospace declared in the captured CSS. One family carries display, lead, body, button, and label tiers.

The "Expanded" axis is the typographic signature. Italian Plate ships in multiple widths (Compressed, Narrow, Regular, Expanded); Afterpay specifically uses the Expanded cut, which has visibly wider letterforms than a standard humanist sans. The widening gives the 64px display weight 700 enough visual heft to carry the page without needing a 900-weight tier, and gives the 16px body a generous reading rhythm without expanding to a larger size.

Hierarchy

Principles

Weight 700 carries the display tier and the card-label tier; weight 400 carries every paragraph tier. There is no 500 / 600 middle-weight in the captured CSS — the system is binary on weight (400 body, 700 emphasis) rather than running a ladder of weight steps. This pairs with the typeface's "Expanded" axis: the width does the work that an extra weight tier would normally do, so the brand can hold to two weights without sacrificing visual hierarchy.

Note on Font Substitutes

Italian Plate No2 Expanded is licensed via Klim Type Foundry. Inter Variable at the same weights with font-stretch: 110% (or letter-spacing roughly +0.04em on the display tier) approximates the expanded proportions; the open-source Atkinson Hyperlegible has comparable width but tighter caps. The Klim Foundry also licenses Italian Plate in narrower widths (No2 Regular, No2 Compressed) if you need a closer optical match without the expanded letterforms.

Layout

Spacing System

• Base unit: 16px — the dominant gap value (6 occurrences in the captured spacing extract), with 24/32/64px as the secondary modules.
• Tokens: {spacing.sm} 8px · {spacing.base} 16px · {spacing.md} 24px · {spacing.lg} 32px · {spacing.xl} 48px · {spacing.2xl} 64px · {spacing.3xl} 96px.
• Section padding (vertical): 64px above the heading and beneath the region-card grid — the captured page uses 16/64/0 vertical padding as its only section-spacing pattern.
• Card internal padding: {spacing.md} (24px) on the region cards — sufficient to give the flag pictogram + label pair a comfortable safe zone without expanding the card too far.
• Page horizontal padding: 64px on either side of the centered content column — a generous margin that signals the captured surface is desktop-oriented.

Grid & Container

• Max content width: the captured page uses the full viewport width with 64px horizontal gutters on either side; no max-width constraint is visible in the rendered surface.
• Hero band: the page heading + lead paragraph stack sits flush left at 64px from the viewport edge — there is no centered hero band.
• Region-card grid: 6-column flex row at desktop, with each card sized to fit ~210px wide. Cards wrap to a smaller column count at narrower viewports.
• Footer: not rendered on the captured surface; the page ends with the region-card grid and the bottom of the viewport is white space.

Rhythm

The page rhythm is unusually compressed for a marketing surface: nothing → heading → lead paragraph → region-card grid → nothing. The page has one functional zone (the card grid) and one introductory text block, with no atmospheric transitions, no in-band illustrations, no logo wall, no carousel. The compression is the structural device — the surface signals "this is a router" through its emptiness.

Elevation

The system has no shadow tier on the captured surface. Depth comes from hairline borders alone — no surface-color contrast, no atmospheric backdrop, no card lift.

• Flat (no shadow): every surface on the page including the region cards. The cards sit on the same white canvas as the heading and lead paragraph, with only the 1px {colors.hairline} border distinguishing them.
• Hairline outlines: {colors.hairline} (#cccccc) at 1px carries every visible border in the captured page.
• Tailwind shadow tokens declared but unused: the page's CSS includes --tw-shadow, --tw-shadow-colored, and --tw-ring-offset-shadow all set to a transparent zero-offset value. These are Tailwind defaults rather than brand tokens — the system has not customized shadow values away from the framework's null state.

Shapes

The radius scale collapses to one value: 12px. The captured page uses this radius 6 times across the region-card grid and nowhere else.

• {rounded.none} 0px — the heading, the lead paragraph, the page itself; every non-card surface terminates at zero radius.
• {rounded.md} 12px — frequency 6 (all on the region cards). The single rounded surface tier; carries every clickable affordance on the captured page.

There is no 4 / 6 / 8 / 16 / 24px tier. The single-value discipline matches the typography (one family) and the color palette (ink + canvas + hairline). The 12px choice is generous-soft — large enough to read as friendly, small enough not to read as a pill. The result is that every clickable surface on the page reads as the same shape.

Components

button-primary — Inferred from the brand's regional sites (the global splash has no rendered button). Ink {colors.ink} fill, canvas text, {rounded.md} 12px radius, 12×24px padding, 48px height. The standard primary CTA on the country-specific Afterpay homepages uses this shape; on the global splash, the region cards themselves are the primary affordances.

button-secondary — Canvas fill, ink text, 1px ink border, same 12px / 48px geometry. The inverted version of the primary button — used as a "Learn more" or "See details" tertiary action on regional sites.

button-ghost — Transparent fill, ink text, 12px radius. The lowest-emphasis affordance.

top-nav — Canvas surface, 64px height. Not rendered on the captured global splash — the page has no top navigation. Inferred from the regional sites' brand wordmark + product links + Login cluster.

nav-link — Transparent background, ink text in {typography.body-md} (16px / 400). 8×16px padding.

hero-heading — Ink text at {typography.display-xl} (64px / 700 / 72px line-height). The captured "Afterpay International" is the canonical instance — the only display moment on the page.

section-heading — Ink text at {typography.display-md} (40px / 700 / 48px line-height). Not rendered on the captured page; inferred from regional sites.

body-paragraph — Ink text at {typography.body-lg} (24px / 400 / 32px line-height). The captured lead paragraph "Choose your region & language below." uses this tier — generous-large body that reads as a sub-heading.

body-paragraph-md — Ink text at {typography.body-md} (16px / 400 / 24px line-height). The default running text tier; not rendered on the captured page but declared in CSS.

region-card — Canvas fill, ink text, 1px {colors.hairline} border, {rounded.md} 12px radius, 24px internal padding. The 6-up grid of country cards is the captured page's primary surface. Each card holds a 48px flag pictogram at the top and a card label below.

flag-pictogram — Transparent background, ink text (the flag image carries its own chromatic content), no radius, 48px height. Each region card carries one flag — the only chromatic moment on the captured page.

card-label — Transparent background, ink text in {typography.label-md} (16px / 700 / 24px line-height), 16px top padding. The country name beneath each flag pictogram.

text-input — Canvas fill, ink text, 1px hairline border, {rounded.md} 12px radius, 12×16px padding, 48px height. Not rendered on the captured page; inferred from regional sites' checkout and account forms.

footer — Canvas surface, ink text, 32×64px padding, 1px hairline top rule. Not rendered on the captured page; inferred from regional sites' link grid and small-print row.

Do's and Don'ts

Do treat this DESIGN.md as a router-page spec, not a full marketing-surface spec. The captured chrome is the country-selector splash at afterpay.com — it is monochrome and minimal by design. For the brand's actual marketing identity (mint-green voltage, lifestyle photography, rounded pill CTAs), do a separate per-locale extract from one of the country-specific Afterpay homepages.

Do keep Italian Plate No2 Expanded as the single typographic family. The "Expanded" axis is the typographic signature — narrower widths of Italian Plate would read as a different brand. The wide letterforms do the work that an extra weight tier would normally do, so the brand can hold to two weights (400 / 700) without sacrificing hierarchy.

Do use {rounded.md} 12px as the single rounded tier. The shape language across the captured page is one value used 6 times; adding 4 / 8 / 16 / 24px tiers would break the binary "flat block or 12px-rounded card" discipline.

Do lead any global / multi-region page with a country-card grid pattern. The 6-up card layout with flag pictograms and ink-on-white labels is the brand's regional-routing convention — replicating it on equivalent global-root surfaces respects the visual language.

Don't introduce the mint-green brand voltage on a global-root surface. The captured page deliberately strips out the regional brand voltage so it doesn't compete with the six country-specific sites that follow. Adding mint green to the country-selector splash would visually conflict with whichever regional site the user clicks into.

Don't use {colors.focus-ring} (#3b82f6) for any rendered chrome — it is the Tailwind default ring color, declared but never visibly rendered on the captured page. Treat it as a framework default left at its zero state, not as a brand token.

Don't add atmospheric chrome to the global splash. The brand's compression on this page (heading + lead + card grid only) is the structural device. Inserting a hero band, a logo wall, or a CTA pill above the card grid breaks the "this is a router" reading and turns the surface into a marketing homepage it isn't designed to be.

Don't swap Italian Plate No2 Expanded for the Regular or Compressed variants. The "Expanded" axis is the brand's typographic signature; narrower widths would read as a generic humanist sans rather than as Afterpay specifically.

Known Gaps

• Regional brand identity: the captured global splash does not expose the mint-green brand voltage, rounded pill CTAs, lifestyle photography, or product chrome that lives on the country-specific Afterpay sites (afterpay.com/us, afterpay.com/au, etc.). For those tokens, do a separate per-locale extract.
• Component coverage: the captured page has only a heading, a lead paragraph, and a 6-up region-card grid. Components like the primary CTA, top-nav, footer, and form inputs are inferred from regional sites rather than rendered on the captured surface — verify against your target locale.
• Hover and focus states: not exposed on the captured surface. The Tailwind --tw-ring-color is declared at #3b82f6 but never rendered; the actual focus-ring style for region cards is browser-default.
• Block context: Afterpay is owned by Block (formerly Square) alongside Square, Cash App, and TIDAL. The captured global splash sits inside Block's broader brand ecosystem but does not surface any Block parent-brand chrome or cross-brand navigation.
• Dark mode: the captured surface is light-only. No dark variant is declared in the CSS, and the system does not respect prefers-color-scheme.
• Motion: the captured page has no scroll-triggered or hover-triggered animation. The region cards do not lift, tint, or scale on interaction in the captured render — verify the live page if motion is required.
• Internationalization: the page lists six regions (US, AU, NZ, UK, Canada English, Canada Francais) but does not surface RTL or Asian-language locale variants. Afterpay's regional coverage is limited to English-speaking and bilingual-Canadian markets.