Loud consumer-fintech brand built on typography: a white canvas with an enormous UPPERCASE Wise Sans headline at weight 900 set with negative leading so the lines lock into a solid block, bright acid-green #9fe870 pill buttons labelled in forest green, calm Inter for all body and UI, flat colour blocks, and the signature currency-converter card with big tabular numerals and flag currency pills.
Browse Wise in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: wise.com (live DOM, computed styles), 2026-07-18 (desktop 1512px). Semantic tokens read from the site's own:rootcustom properties; brand system published at wise.design. Coverage: home / marketing. Dashboard: pending login (needs-dashboard). Responsive: breakpoints from tokens only; mobile rendering not verified.
Loud, confident consumer-fintech brand: a clean white canvas dominated by an enormous UPPERCASE Wise Sans headline set at the heaviest weight (900) with *negative leading* — the line-height is smaller than the font size, so the lines stack into a solid typographic block. The signature colour pairing is a bright acid green #9fe870 against deep forest green #163300: the green fills every fully-rounded pill button while the forest green does the talking as ink. Body and UI drop to Inter at normal weights, which keeps the shouting reserved for the display. The hero's other half is the live currency-converter card — a large rounded white panel with big tabular numerals, flag-avatar currency pills and a full-width green CTA. Feels: bold, direct, optimistic, trustworthy.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page background, converter card |
| surface | #e8ebe6 | Light gray-green section fills |
| mint | #e2f6d5 | Pale green info banners / highlights |
| ice | #ecf9f9 | Pale blue-green info row |
| forest | #163300 | Deep green blocks, primary ink |
| Token | Hex | Role / usage |
|---|---|---|
| ink | #0e0f0c | Display headline, near-black |
| forest | #163300 | Primary text, button label on green |
| gray | #454745 | Body / secondary text |
| gray-2 | #6a6c6a | Tertiary text |
| faint | #868685 | Captions, placeholder |
| Token | Hex | Role / usage |
|---|---|---|
| bright-green | #9fe870 | Signature accent — every pill button |
| forest-alt | #1a3300 | Deep green variant |
:root custom properties)| Token | Hex | Role / usage |
|---|---|---|
| content-accent | #0097c7 | Accent text (blue) |
| interactive-accent | #00a2dd | Interactive blue |
| positive | #008026 / #2ead4b | Success |
| negative | #cf2929 | Error |
| warning | #9a6500 | Warning |
Product token set also exposes --color-content-primary #37517e, --color-content-secondary #5d7079, --color-content-tertiary #768e9c (legacy navy scale used in product UI).
Rule: the bright green #9fe870 is reserved for pill buttons and highlights; forest green #163300 carries text and dark blocks. Never use the green as body text or the blue semantic accent as a brand colour.
"Wise Sans", sans-serif — UPPERCASE, weight 900, with negative leading.Inter, Helvetica, Arial, sans-serif — the workhorse for everything else.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 90 / 76.6 | 900 | normal, UPPERCASE |
| Section (h2) | 59 / 50.4 | 900 | normal |
| Sub-display | 40 / 34 | 900 | normal |
| Body / lead | 16–18 / 1.5 | 400 | normal, Inter |
| Button | 16 | 600 | normal, Inter |
Patterns: the display is the whole identity — huge, uppercase, weight 900, and set with line-height *below* font-size so lines lock together. Everything else is calm Inter at 400–600. Never set body copy in Wise Sans 900.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.