Design System

# Design System Inspiration of Wise

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.

Get started See how it works

Color Palette

## A lime-green CTA on sage canvas.

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.

### Brand & Accent — Wise Green Family

Wise Green#9fe870The brand's universal CTA color.
Green Active#cdffadLighter active state for hover / press.
Green Neutral#c5edabMid-saturation neutral active fill.
Green Pale#e2f6d5Lightest green for soft tints / badges.

### Surface

Canvas#ffffffPure white for card interiors.
Canvas Soft#e8ebe6Sage-tinted page background — the brand mood.

### Text

Ink#0e0f0cDefault text and headings.
Ink Deep#163300Deep forest ink on positive surfaces.
Body#454745Secondary body text.
Mute#868685Captions, placeholder, fine print.

### Semantic — Positive Family

Positive#2ead4bSuccess indicator.
Positive Deep#054d28Pressed positive state.

### Semantic — Warning Family

Warning#ffd11aCaution indicator.
Warning Deep#b86700Pressed warning.
Warning Content#4a3b1cText on warning surfaces.

### Semantic — Negative Family

Negative#d03238Destructive / error red.
Negative Deep#a72027Pressed destructive.
Negative Darkest#a7000dHighest-emphasis destructive text.
Negative Bg#320707Dark maroon callout background.

### Tertiary Accents

Accent Orange#ffc091Bright peach for illustration only.
Accent Cyan#38c8ffSky-blue tertiary illustration accent.

Typography

## Weight 900 for hero, 600 for everything else.

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.

display-megaInter · 126 / 107.1 / 0 · w900
Send money.
display-xxlInter · 96 / 81.6 / 0 · w900
Get the best rate.
display-xlInter · 64 / 54.4 / 0 · w900
A standard hero headline.
display-lgInter · 47 / 70.5 / -0.108 · w400
A lighter sub-display.
display-mdInter · 40 / 34 / 0 · w900
Section / card headlines.
display-smInter · 32 / 38.4 / -0.96 · w600
Inter-rendered section heading.
display-xsInter · 24 / 31.2 / -0.48 · w600
Sub-section display.
body-lgInter · 20 / 30 / 0 · w400
Lead paragraph for hero copy and section intros.
body-mdInter · 16 / 24 / 0 · w400
Default body. Inter at the comfortable reading scale.
body-md-strongInter · 16 / 24 / 0 · w600
Bold inline body for emphasis.
body-smInter · 14 / 20 / 0 · w400
Secondary body. Captions and helper text.
body-sm-strongInter · 14 / 20 / 0 · w600
Bold caption / nav-link.
captionInter · 12 / 16 / 0 · w400
Fine print and footnote.
button-mdInter · 16 / 24 / 0 · w600
Get started
family-systemInter — w400 · w600 · w900
Wise Inter Semibold Inter Regular

Buttons

## Pill rectangles at 24 px.

Every button on the brand is a generous 24 px pill rectangle — the geometric softness is non-negotiable across send-money CTAs, secondary actions, and tertiary outlines. The primary is the lime-green CTA that defines the brand identity; secondary lives on sage-tinted neutral; tertiary is the white outline with a 1 px ink border for low-priority actions. The circular icon button is the only round affordance, used for inline icon controls. Labels set in Inter weight 600. Touch targets land at 48–56 px tall.

button-primary
Wise green fill, ink label, 24 px pill. The universal CTA.
button-secondary
Sage canvas fill, ink label, 24 px pill. Secondary action.
button-tertiary
White fill with 1 px ink border, 24 px pill. Low-priority outline.
button-icon-circular
White circle for inline icon affordances.

Cards & Containers

## Pill cards on sage canvas.

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.

card-content

#### Move money your way.

The default white card. Sits on sage canvas. No border, surface contrast carries elevation.

card-feature-sage

#### Fair, mid-market rate.

Sage-tinted card for grouping related features inside a content band.

card-feature-green

#### Send to 160 countries.

Soft-green pale card. Highlights a brand moment without using the bright CTA green.

card-feature-dark

#### The Wise account.

Polarity-flipped dark card with Wise green text. Used for promotional moments.

currency-converter-card
You send
USUSD ▾
Recipient gets
EUEUR ▾
Fee 2.55 USD Rate 0.92745

Form Elements

## Inputs are 12 px rounded rectangles.

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.

Email address
Search

Spacing Scale

## A 4 px rhythm from xxs to 3xl.

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).

xxs2px
xs4px
sm8px
md12px
lg16px
xl24px
2xl32px
3xl48px

Border Radius Scale

## Generous, friendly, never sharp.

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.

rounded.sm
8 px corners. Inline pills, small badges.
rounded.md
12 px corners. Form inputs, smaller chrome.
rounded.lg
16 px corners. Mid-size cards.
rounded.xl
24 px corners. Canonical button + card radius.
rounded.pill
9999 px corners. Status pills and badges.
rounded.full
9999 px corners. Circular icon containers.

Elevation & Depth

## Surface contrast over drop shadows.

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).

Level 0 — Flat No shadow, no border. Default — almost every surface lives here on sage canvas.
Level 1 — Hairline on Ink 1 px solid ink border. Tertiary outline buttons and form inputs.
Level 2 — Soft Card White card sitting on sage canvas. Surface contrast IS the elevation.

Signature Components

## The pieces that make this Wise.

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

### Send money.

hero-band-dark — polarity-flipped

### Save more.

### A content band that follows hero.

White surface, 1 px hairline border, 40 px Inter weight 900 section headline. Used for editorial content rows that sit beneath the sage hero.

currency-converter-card — the brand's signature widget
You send
USUSD ▾
Recipient gets
EUEUR ▾
Fee 1.28 USD Rate 0.92745
badges — positive / negative
Payment received Transfer failed

Responsive Behavior

## Three breakpoints, one rhythm.

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.

## Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

- Core features
- Up to 3 projects
- Community support

/0.2 · Pro Most popular
$29/month

For teams ready to ship.

- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics

/0.3 · Team
$99/month

For organizations operating at scale.

- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding