Global is the international look: near-black backgrounds, gold accents, Playfair Display headings and Inter body text. Classes are prefixed gl26- (Global 2026) and are applied as combos on the shared template classes.

Logo sizing

Flag: No clear-space or minimum-size rule is defined anywhere on the site or in Figma notes. The sizes above are the header values only.

Flag: Asset cobweb-pay-logo-dark.png (6adb05de9f207dbb347f84d6) exists, but no page or component uses it, so its intended use is unknown.

Values are taken from the gl26- classes and the site variables. Gold is always a gradient or a translucent line, never a large flat fill.

Global core

Gradients

Shared neutral and system variables

The system colour variables also have 300/200/100 steps (Blue #1d88fe/#8fc3ff/#eaf4ff, Green #05c168/#7fdca4/#def2e6, Red #ff5a65/#ffbec2/#ffeff0, Orange #ff9e2c/#ffd19b/#fff3e4). Red 300 is named "System/300" in the variable panel.

Headings use Playfair Display 500 through the gl26-serif combo, in ivory #fdfaf0. Body text is Inter via .page-wrapper.gl26-body. Sizes are listed as desktop / ≤991 / ≤767 / ≤479.

Flag: Playfair Display is not loaded on staging. The site WebFont loader only requests Inter and Poppins, and the gl26-serif rules fall back to sans-serif ("Playfair Display", sans-serif), so visitors without Playfair installed see a sans-serif heading. These previews were rendered on a machine with Playfair installed locally.

Flag: There is no Global H6 class. A bare h6 falls back to the shared tag style (Poppins 400), so avoid H6 on Global pages.

Body copy: Inter at the shared body size of 18px (16px at ≤767), line-height 1.667em, colour rgba(255,255,255,.68). Links in copy use .gl26-link: #dcb348, hover #e3bc55.

Breakpoints

Containers and sections

Spacing values in use

These are the values used by the gl26- and gh26- classes. There is no formal spacing scale or spacing variables.

Menu corners are concentric: outer radius = inner item radius + list padding + 1px border. The region list is 6 + 6 + 1 = 13px.

gl26-card-ring

A 1px ring in rgba(185,150,62,.38) added to the template features cards (card-4 and card-6 chains) so they match the other Global cards.

Live: .card-6.features-card.gbg26-card.gl26-card.gl26-card-ring. Padding is reduced here (real card: 180/80px, 80/48 at ≤991, 64/32 at ≤767) to save space.

Live: primary (gold), secondary (outline) and the nav download pill. Hover over each one to see its states.

Primary: gold

Secondary: outline

Download pill (Header Global)

The shared navy .btn-primary is the AU primary. On Global it is always combined with .gl26-gold.

Reference only. Nav and footer are component instances (Header Global, Footer) and are not placed on this page.

Header Global, 1440px. Links: Wallet · USD Card · Swap · P2P · Referral | Legacy (gold). Right side: Global region pill and gold Download the App pill.

Header Global, 390px. Logo, region pill and hamburger.

Global footer, 1440px. Legal, support, social and contact links are left unchanged.

Step / feature card

Live: .gh26-item.gl26-line.gl26-stepcard (left) and .gh26-item.gl26-line (right). Icons are inline SVG embeds on the real pages and are left empty here.

Card art

Virtual card and Legacy metal card exports (480px wide, 2x).

Spend rows

Virtual card

On your phone, every level

Metal card with Legacy

ATM access where available

Live: .lg-st-tr.gl26-sp-tr rows from “Built for how you spend.” Thumbnail .gl26-sp-cardimg is 156 / 148 / 96px wide with radius 8px (5px at ≤767), shadow 0 10px 24px rgba(0,0,0,.55) and a faint 1px ring.

Live: region pill and region list, drawn statically.

Flag: The chevron is Webflow’s built-in dropdown icon (w-icon-dropdown-toggle), so it is not shown in the live sample. Its glyph source is not documented.

Region dropdown open with the Confirm your location popup (1440px).

Confirm your location at 390px: Stay on Global / Go to Australia.

Dropdowns: cwpanim 1.1.0 (site footer script)

Scroll reveal: cwpix 1.0.0 (Webflow "Fade In" interaction, retuned)

Reduced motion

With prefers-reduced-motion: reduce, body gets data-wf-ix-vacation: reveals become opacity-only, the background blob loop stops, and cwpanim does nothing (dropdowns open instantly).

Touch devices

Hover scale is removed on touch (@media (hover:none)): button wrappers, .btn-secondary, .btn-circle-secondary, hamburger, social icons, .header-logo-link and .footer-logo-wrapper keep transform:none on :hover.

Region popup (GL26-05): 352px wide, radius 14px, opens in 400ms cubic-bezier(.22,1,.36,1) from translateY(-24px), closes in 200ms.

Flag: The touch rule (POL-03) lives in a page-head style block, not in classes. It was added before the "styles in classes" rule and is documented as is.

App screens

Show app screens side by side at the same height and aligned to the top. Use the full 1284×2778 export (9:19.5) and crop from the top (object-position 50% 0%), never letterbox.

Never show real customer data. Cover names, ID lines, photos and balances with neutral grey shapes (no blur), and rewrite chat text so it carries no personal details.

Global home platform visual (gl26-platform-app-screens.webp). On the page it is decorative, so it has alt="" and aria-hidden.

Live example: the four anonymised AU close-account screens (au26-ca-step-1-my-account-anon.png, step-2, step-3, au26-ca-step-4-customer-service-close-account.png), rendered here at the same height and aligned to the top.

Product and card art

Use the Figma exports as delivered and resize without cropping. Card thumbnails get a soft shadow and a faint 1px ring, never a second hard border. Do not use figma-legacy-card-4.png.

Flag: A :focus-visible style exists only on the region popup buttons (.gl26-rp-btn). Buttons, nav links, dropdown items and the region pill rely on the browser default focus outline. No colour-contrast audit is on record.

Class naming