Design System Inspiration of Wise

1. Visual Theme & Atmosphere

Wise's website is a bold, confident fintech platform that communicates "money without borders" through massive typography and a distinctive lime-green accent. The design operates on a warm off-white canvas with near-black text (#0e0f0c) and a signature Wise Green (#9fe870) — a fresh, lime-bright color that feels alive and optimistic, unlike the corporate blues of traditional banking.

The typography uses Wise Sans — a proprietary font used at extreme weight 900 (black) for display headings with a remarkably tight line-height of 0.85 and OpenType "calt" (contextual alternates). At 126px, the text is so dense it feels like a protest sign — bold, urgent, and impossible to ignore. Inter serves as the body font with weight 600 as the default for emphasis, creating a consistently confident voice.

What distinguishes Wise is its green-on-white-on-black material palette. Lime Green (#9fe870) appears on buttons with dark green text (#163300), creating a nature-inspired CTA that feels fresh. Hover states use scale(1.05) expansion rather than color changes — buttons physically grow on interaction. The border-radius system uses 9999px for buttons (pill), 30px–40px for cards, and the shadow system is minimal — just rgba(14,15,12,0.12) 0px 0px 0px 1px ring shadows.

Key Characteristics:

• Wise Sans at weight 900, 0.85 line-height — billboard-scale bold headlines
• Lime Green (#9fe870) accent with dark green text (#163300) — nature-inspired fintech
• Inter body at weight 600 as default — confident, not light
• Near-black (#0e0f0c) primary with warm green undertone
• Scale(1.05) hover animations — buttons physically grow
• OpenType "calt" on all text
• Pill buttons (9999px) and large rounded cards (30px–40px)
• Semantic color system with comprehensive state management

2. Color Palette & Roles

Primary Brand

• Near Black (#0e0f0c): Primary text, background for dark sections
• Wise Green (#9fe870): Primary CTA button, brand accent
• Dark Green (#163300): Button text on green, deep green accent
• Light Mint (#e2f6d5): Soft green surface, badge backgrounds
• Pastel Green (#cdffad): --color-interactive-contrast-hover, hover accent

Semantic

• Positive Green (#054d28): --color-sentiment-positive-primary, success
• Danger Red (#d03238): --color-interactive-negative-hover, error/destructive
• Warning Yellow (#ffd11a): --color-sentiment-warning-hover, warnings
• Background Cyan (rgba(56,200,255,0.10)): --color-background-accent, info tint
• Bright Orange (#ffc091): --color-bright-orange, warm accent

Neutral

• Warm Dark (#454745): Secondary text, borders
• Gray (#868685): Muted text, tertiary
• Light Surface (#e8ebe6): Subtle green-tinted light surface

3. Typography Rules

Font Families

• Display: Wise Sans, fallback: Inter — OpenType "calt" on all text
• Body / UI: Inter, fallbacks: Helvetica, Arial

Hierarchy

Principles

• Weight 900 as identity: Wise Sans Black (900) is used exclusively for display — the heaviest weight in any analyzed system. It creates text that feels stamped, pressed, physical.
• 0.85 line-height: The tightest display line-height analyzed. Letters overlap vertically, creating dense, billboard-like text blocks.
• "calt" everywhere: Contextual alternates enabled on ALL text — both Wise Sans and Inter.
• Weight 600 as body default: Inter Semibold is the standard reading weight — confident, not light.

4. Component Stylings

Buttons

Primary Green Pill

• Background: #9fe870 (Wise Green)
• Text: #163300 (Dark Green)
• Padding: 5px 16px
• Radius: 9999px
• Hover: scale(1.05) — button physically grows
• Active: scale(0.95) — button compresses
• Focus: inset ring + outline

Secondary Subtle Pill

• Background: rgba(22, 51, 0, 0.08) (dark green at 8% opacity)
• Text: #0e0f0c
• Padding: 8px 12px 8px 16px
• Radius: 9999px
• Same scale hover/active behavior

Cards & Containers

• Radius: 16px (small), 30px (medium), 40px (large cards/tables)
• Border: 1px solid rgba(14,15,12,0.12) or 1px solid #9fe870 (green accent)
• Shadow: rgba(14,15,12,0.12) 0px 0px 0px 1px (ring shadow)

Navigation

• Green-tinted navigation hover: rgba(211,242,192,0.4)
• Clean header with Wise wordmark
• Pill CTAs right-aligned

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 16px, 18px, 19px, 20px, 22px, 24px

Border Radius Scale

• Minimal (2px): Links, inputs
• Standard (10px): Comboboxes, inputs
• Card (16px): Small cards, buttons, radio
• Medium (20px): Links, medium cards
• Large (30px): Feature cards
• Section (40px): Tables, large cards
• Mega (1000px): Presentation elements
• Pill (9999px): All buttons, images
• Circle (50%): Icons, badges

6. Depth & Elevation

Shadow Philosophy: Wise uses minimal shadows — ring shadows only. Depth comes from the bold green accent against the neutral canvas.

7. Do's and Don'ts

Do

• Use Wise Sans weight 900 for display — the extreme boldness IS the brand
• Apply line-height 0.85 on Wise Sans display — ultra-tight is intentional
• Use Lime Green (#9fe870) for primary CTAs with Dark Green (#163300) text
• Apply scale(1.05) hover and scale(0.95) active on buttons
• Enable "calt" on all text
• Use Inter weight 600 as the body default

Don't

• Don't use light font weights for Wise Sans — only 900
• Don't relax the 0.85 line-height on display — the density is the identity
• Don't use the Wise Green as background for large surfaces — it's for buttons and accents
• Don't skip the scale animation on buttons
• Don't use traditional shadows — ring shadows only

8. Responsive Behavior

Breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Text: Near Black (#0e0f0c)
• Background: White (#ffffff / off-white)
• Accent: Wise Green (#9fe870)
• Button text: Dark Green (#163300)
• Secondary: Gray (#868685)

Example Component Prompts

• "Create hero: white background. Headline at 96px Wise Sans weight 900, line-height 0.85, 'calt' enabled, #0e0f0c text. Green pill CTA (#9fe870, 9999px radius, 5px 16px padding, #163300 text). Hover: scale(1.05)."
• "Build a card: 30px radius, 1px solid rgba(14,15,12,0.12). Title at 22px Inter weight 600, body at 18px weight 400."

Iteration Guide

1. Wise Sans 900 at 0.85 line-height — the extreme weight IS the brand
2. Lime Green for buttons only — dark green text on green background
3. Scale animations (1.05 hover, 0.95 active) on all interactive elements
4. "calt" on everything — contextual alternates are mandatory
5. Inter 600 for body — confident reading weight

10. Voice & Tone

Wise's voice is fintech-clear and money-honest. "The international account / Money without borders" — capability-driven, no marketing fluff. Lime green primary #9fe870 signals "modern fintech, not bank corporate." Wise has been famously transparent about exchange rate markups since founding.

Voice samples

• Marketing tagline: "Money without borders"

Forbidden phrases. "Revolutionary fintech". Hidden fees framing.

11. Brand Narrative

Wise was founded January 2011 in London as TransferWise (renamed July 2012 → rebranded Wise February 2021) by Kristo Käärmann (ex-Deloitte management consultant) and Taavet Hinrikus (Skype's first employee). Both Estonian, both moved to London ~2006, both frustrated by ~5% bank FX markups on EUR↔GBP transfers — they devised a peer-to-peer workaround between themselves that became the business concept. Reached unicorn status in 2016. On 7 July 2021, Wise went public via direct listing on the London Stock Exchange (LSE:WISE) at an ~$11B valuation — no new shares issued, making Käärmann + Hinrikus Estonia's first two billionaires. The brand voice — transparent, honest, lime green #9fe870 primary, Wise Sans 900 display, Inter 600 body — reflects "money without borders" for international citizens.

Sources:

• Wise (company) — Wikipedia
• Bloomberg — Wise Founders Turn Bank Fee Frustration into $3B Fortune (2021-07-07)
• ERR — Wise founders' story contained plenty of twists and turns
• Fortune — Taavet Hinrikus on his next act (2021-11-24)

12. Principles

1. Real exchange rate is the product. UI implication: always show interbank rate; markups visible.
2. Multi-currency native. UI implication: nav supports 50+ currency selection.
3. Lime green #9fe870 for primary. UI implication: preserve lime; don't substitute corporate blue.
4. Inter 600 body. UI implication: confident reading weight; don't lighten to 400.
5. calt OpenType. Contextual alternates mandatory. UI implication: preserve OpenType features.

13. Personas

Personas are fictional archetypes informed by Wise user segments (international workers, freelancers with multi-currency income, expats), not individual people.

Sergey Volkov, 33, Berlin. Russian-origin engineer working remotely for US company. Wise multi-currency account.

Sofia Russo, 31, Milan. Freelancer with EUR/USD/GBP income. Wise Business for invoicing.

Henrik Sondergaard, 38, Singapore. Expat with Danish family. Wise for sending money home + multi-currency debit card.

14. States

15. Motion & Easing

Standard cubic-bezier; no bounce — fintech register. prefers-reduced-motion: reduce removes rate pulse.

---

Verified: 2026-05-08 (Apple-tier full migration) Tier 1 sources: wise.com/, wise.com/pricing (live DOM via playwright)

• Primary #9fe870 Wise Green + #163300 Dark Green text 9999px / 48px / 11×24 / 16px·600 (Open an account / Try demo / Get Started / Sign up today — canonical hero/pricing CTA)
• Sign up — Header utility #9fe870 9999px / 32px / 8×12 / 16px·600 (compact variant)
• Skip-to-content #9fe870 9999px / 72px / 19×24 / 20px·600 (a11y, larger geometry)
• Top nav pills transparent / #163300 text / 9999px / 32px / 8×12 / 18px·600
• Submenu pills transparent / #163300 / 18.7693px / 40px / 8×12 / 18px·600 (subpixel — rem-based design tokens) Tier 2 sources: styles.refero.design / getdesign.md — no record. Tier 1 (Philosophy): Wikipedia (Wise company), Bloomberg 2021-07-07, ERR.ee, Fortune 2021-11-24. Style ref: stripe. Conflicts unresolved: none.