Wise

---
version: alpha
name: Wise landing-page reference
description: A bold international-money landing page using heavy uppercase display
  typography, bright lime green, pill-shaped actions, a globe-and-coins hero, transfer
  calculators and editorial lifestyle photography. Captured in the English Germany
  variant.
colors:
  primary: '#9FE870'
  secondary: '#163300'
  surface: '#FFFFFF'
  on-surface: '#0E0F0C'
  tint: '#E2F6D5'
typography:
  headline-display:
    fontFamily: Wise Sans
    fontSize: 105.428px
    fontWeight: 900
    lineHeight: 89.6142px
  headline-md:
    fontFamily: Inter
    fontSize: 45.4572px
    fontWeight: 600
    lineHeight: 57px
    letterSpacing: -1.36372px
  headline-mobile:
    fontFamily: Wise Sans
    fontSize: 50.9092px
    fontWeight: 900
    lineHeight: 43.2728px
  body-md:
    fontFamily: Wise Sans
    fontSize: 40px
    fontWeight: 900
    lineHeight: 34px
---

# Wise landing-page reference

## Overview

Observed at https://wise.com/ on 2026-09-18 at 1440px desktop and 390px mobile widths. A bold international-money landing page using heavy uppercase display typography, bright lime green, pill-shaped actions, a globe-and-coins hero, transfer calculators and editorial lifestyle photography. Captured in the English Germany variant. This is an independent visual reference, not an official brand specification.

## Colors

The palette above records key sampled CSS colors, with approximate neutral conversions explicitly noted where relevant. Use the primary color for the observed emphasis and acquisition hierarchy; keep surface and text roles distinct. Artwork, photography and gradients add colors beyond these tokens. Maintain strong ink-on-lime contrast and the distinction between expressive display headings and readable interface labels.

## Typography

The visible display sample uses "Wise Sans", 105.428px size, 89.6142px line height and weight 900. Tracking is normal. The frontmatter records measured display, secondary-heading and mobile-heading samples, not an exhaustive scale. Body tokens, when present, are one observed paragraph sample rather than a universal paragraph rule. Preserve supplied font assets when licensed; fallback font metrics will differ.

## Layout

Start with an oversized centered promise and globe illustration, then use bright green full-width transfer and fee-comparison sections. Continue through account feature cards, a dark-green business panel, alternating photo-and-copy stories, country motifs, an app-download promotion, supported-country grid and extensive legal/footer content. The desktop hero region is about 1240px wide with 100px side margins.

At 390px the header retains signup and a menu. The hero uses approximately 50.9px display text with tight 43.3px line height and about 16px side gutters. The primary action expands to full width and the secondary link sits below it. The globe is intentionally cropped within the mobile composition. Both inspected widths measured no horizontal document overflow. Intermediate breakpoints and the full mobile scroll sequence were not inspected. Desktop section spacing and card arrangement are visual observations; no complete spacing scale was inferred.

## Elevation & Depth

White calculator panels float above the lime canvas with soft shadows. Photographs and rendered coins add realism; dark-green panels create strong sectional depth without requiring extra borders. Exact shadow and artwork lighting values were not measured.

## Shapes

Use fully rounded action pills, generously rounded calculator and content cards, flag circles, globe/coin artwork and large editorial photographs with rounded corners. Heavy condensed-looking display type creates the sharp contrast to these soft shapes. Radius descriptions are visual estimates unless explicitly measured elsewhere.

## Components

The hero pairs a lime open-account button with an understated transfer link. Transfer input cards and fee comparison tables make pricing tangible. Country flags, photographed payment cards, feature links and an oversized app-download panel support the global-money story. No financial transaction was initiated.

## Do's and Don'ts

Maintain strong ink-on-lime contrast and the distinction between expressive display headings and readable interface labels. Keep calculator numbers legible. Do not reuse the sample rates, availability or country-specific claims as timeless product facts.

- Do retain the reference-specific layout and responsive hierarchy, not only its palette.
- Do verify readable content when substituting your own assets and copy.
- Don't infer hover, keyboard focus, validation or open-menu states: those were not exercised.
- Don't treat the static screenshot as a complete animation or carousel specification.