Wise — design system & UI screens

Fintech · 1 screen · 12 sections · wise.com

A bold lime-green hero spans the top with a chunky black condensed all-caps headline ("THE FAST WAY TO SEND MONEY ABROAD") set against a live currency-conversion calculator card showing 1,000.00 converting to 873.51 with country flag selectors. The signature element is the dark-green "100% TRANSPARENT PRICING" comparison table that benchmarks Wise's fee against Bank of America, Wells Fargo and PayPal with green-highlighted winning cells. Sections alternate between the recurring lime-green brand block, photographic lifestyle imagery, and a vibrant sunset-gradient app-download band, anchored by a row of circular world-flag corridor links near the footer.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/wise.

Decoded design system

Wise's decoded design system: background #FFFFFF, text #0A0A0B, accent #9FE870, link #9FE870, primary #163300; type scale h1 89px / h2 58px / body 18px; 4px spacing base; 3px base radius. The single interactive/action color is #9FE870 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F0F0F0`
border	`#DADADA`
text	`#0A0A0B`
text_muted	`#676767`
primary	`#163300`
accent	`#9FE870`
link	`#9FE870`
secondary	`#37517E`
button_bg	`#9FE870`
button_text	`#163300`

Using these colors

Action color #9FE870 — the single interactive color; only on things you click or must notice, never large fills.
accent, link, button_bg are all #9FE870 — one role, not several (the action color).
accent #9FE870 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #163300 — a brand color — but the call-to-action uses #9FE870, not this.
secondary #37517E — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Wise Sans
Body: Inter
h1: 89px
h2: 58px
body: 18px

Spacing

base unit: 4px
scale: 3px, 4px, 8px, 9px, 11px, 12px, 16px, 24px, 28px, 38px

Radii

base: 3px
button: 9999px

Shadows (elevation)

subtle: rgba(14, 15, 12, 0.12) 0px 0px 0px 1px
card: rgba(0, 0, 0, 0.08) 0px 6px 20px 0px
overlay: rgba(0, 0, 0, 0.15) 0px 10px 32px 0px, rgba(0, 0, 0, 0.04) 0px 40px 40px 0px

Motion

Micro-interactions run at 350ms (dominant) with cubic-bezier(0.8, 0.05, 0.2, 0.95).

durations: 350ms · 150ms · 100ms
easings: cubic-bezier(0.8, 0.05, 0.2, 0.95) · ease
animated properties: color, background-color, width, border-color

Native design tokens

Token	Value
`--color-content-primary`	`#0e0f0c`
`--color-content-secondary`	`#454745`
`--color-content-tertiary`	`#6a6c6a`
`--color-content-accent`	`#0097c7`
`--color-content-accent-hover`	`#0084b3`
`--color-content-accent-active`	`#0077a5`
`--color-content-positive`	`#008026`
`--color-content-positive-hover`	`#006d13`
`--color-content-positive-active`	`#006002`
`--color-content-negative`	`#cf2929`

…and 110 more measured on the page.

Button states (measured)

primary hover: border 1px solid rgb(128, 225, 66) · background #80E142

Layout (measured)

container max-width: 1440px
nav: 76px sticky
common grid: 2 columns

Motion choreography (measured)

Load order: div.np-theme-personal → div.np-theme-personal → div.np-theme-personal

Input (measured)

height 52px · radius 0px

Responsive (measured)

breakpoints: 480px · 576px · 768px · 992px · 1200px · 1439px
mobile (390px): hero 51px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Money-transfer fintech landing with lime hero and live conversion calculator widget