Design System
A global money-transfer brand whose surface combines an unusually heavy near-black display sans at weight 900 with a vivid lime-green CTA, sage-tinted canvas, and rounded white cards. The whole system reads more like a Scandinavian fintech magazine than a bank — generous whitespace, large 24 px radii, and a single chromatic signature in lime green.
Color Palette
The brand operates from a single chromatic signature — Wise green — used as every primary CTA and accent moment, set against a sage-tinted page background and ink near-black for body and headlines. A full semantic palette covers positive, warning, and negative states for in-product surfaces. Two tertiary accents — peach orange and sky cyan — appear only inside illustrative content. No second brand accent, no marketing gradient.
Typography
Two faces ladder the system. Inter (substitute for the proprietary Wise Sans) at weight 900 carries every hero display — the brand's typographic signature is the unusual heaviness combined with extreme display scale, 126 px at the largest hero. Inter at weight 600 handles all sub-displays, body, button labels, and nav. The role separation is strict: weight 900 is reserved for marketing display moments; everything else lives at weight 600 or weight 400.
Cards & Containers
Cards use the brand's canonical 24 px pill radius. Four feature variants ladder by surface: the white default sits inside sage bands, sage-tinted feature cards group related content, soft-green cards highlight a brand moment, and a polarity-flipped dark variant with green text carries promotional callouts. The brand's signature interactive component is the currency-converter card — a bordered white pill hosting amount inputs and currency selector pills.
The default white card. Sits on sage canvas. No border, surface contrast carries elevation.
Sage-tinted card for grouping related features inside a content band.
Soft-green pale card. Highlights a brand moment without using the bright CTA green.
Polarity-flipped dark card with Wise green text. Used for promotional moments.
Form Elements
Text inputs render with a 1 px solid ink border at 12 px radius — a slightly tighter softness than the 24 px button geometry. Labels in Inter weight 600, sentence-case. The brand never uses uppercase form labels.
Spacing Scale
Section padding lands at the 48 px step (3xl) on desktop. Card interiors live at 24 px (xl). The base unit is 4 px, and every step is a multiple of it. The scale ladders xxs (2) → xs (4) → sm (8) → md (12) → lg (16) → xl (24) → 2xl (32) → 3xl (48).
Border Radius Scale
The brand softens every UI element with rounded geometry. 24 px is the canonical button + card radius — generous, friendly, defining the brand's calm fintech voice. Inputs land at 12 px, small chips at 8 px, and only badges + circular icon buttons use full pill geometry. The brand never uses sharp 0 px corners on UI elements.
Elevation & Depth
The brand uses surface contrast as the primary elevation cue. A white card sitting on sage canvas reads as elevated without any drop shadow at all. Three discrete states: flat (sage canvas, default mood), hairline (1 px solid ink border on tertiary buttons and inputs), and soft-card (a white card on sage canvas — surface contrast IS the elevation).
Signature Components
A sage-canvas hero band hosting the 126 px Inter weight 900 headline, a polarity-flipped dark hero where Wise green carries the headline on near-black, a white content band that follows hero, the currency-converter card with its signature from/to amount inputs and country-flag currency pills, and a pair of badges — positive on green-pale, negative on dark maroon — for in-product status moments.
hero-band — display-mega · Inter w900
hero-band-dark — polarity-flipped
White surface, 1 px hairline border, 40 px Inter weight 900 section headline. Used for editorial content rows that sit beneath the sage hero.
Responsive Behavior
The marketing grid collapses cleanly: hero stays text-first at every viewport, with the converter card stacking below the headline at mobile. Section padding steps from 48 px desktop to 32 px tablet to 20 px mobile.
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768 px | Hero scales 126 → 56 px. All grids 1-up. Converter card stacks below headline. |
| Tablet | 768 – 1023 px | 2-up feature grids. Section padding 72 / 32. |
| Desktop | ≥ 1024 px | Full marketing grid. Section padding 96 / 48. |
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.