---
version: alpha
name: Wise
description: "Highlighter-green money, shouted in bottle-green block capitals."
colors:
  on-surface-variant: "#6A6C6A"
  on-surface: "#163300"
  surface: "#9FE870"
  outline: "#0E0F0C"
  error: "#CB272F"
  primary: "#0B4C72"
  white: "#FFFFFF"
  grey-700: "#454745"
  grey-border: "#868685"
  mist: "#E8EBE6"
  soft-green: "#E2F6D5"
  dark-olive: "#3E3B07"
  celebration-cyan: "#ECF9F9"
  coin-green: "#1C3108"
typography:
  caption:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-large:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead-button:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  sub-heading:
    fontFamily: Inter
    fontSize: 24.629px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  heading:
    fontFamily: Inter
    fontSize: 45.457px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.015em
  amount-input:
    fontFamily: Inter
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.02em
  display:
    fontFamily: Wise Sans
    fontSize: 58.514px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.02em
  hero-display:
    fontFamily: Wise Sans
    fontSize: 105.428px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.02em
rounded:
  buttons-pills: 9999px
  inputs-cards: 10px
  medium-container: 16px
  large-panel: 24px
  x-large-panel: 32px
  focus-ring-chip: 2px
spacing:
  xx-small: 8px
  small: 16px
  medium: 24px
  large: 32px
  x-large: 40px
  2x-large: 56px
---
# Wise — Style Reference
> Highlighter-green money, shouted in bottle-green block capitals.

**Theme:** light

Wise runs on one loud, unmistakable idea: a full-bleed acid green (`#9FE870`) canvas with near-black bottle-green ink (`#163300` / `#0E0F0C`) stamped on top. The signature move is scale and weight — Wise Sans set at ~105px in 900 black, all-caps, so the headline reads like a poster, not a paragraph. Everything else is quiet on purpose: Inter body copy, a stack of neutral greys, and crisp white product cards that float over the green so the transfer calculator feels like a tool, not a banner. Corners are either fully rounded pills (9999px CTAs) or a calm 10px on cards and inputs — no in-between. The palette stays disciplined: green is the brand, dark green is the ink, and colour is spent only on money-semantics (a cyan celebration banner, a red for errors) rather than decoration.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Bright Green | `#9FE870` | `--color-brand-green` | The signature. Hero canvas + primary CTA fill. Loud by design; never used as text on white. |
| Forest Green | `#163300` | `--color-ink-forest` | Primary ink on green, dark "Sign up" button fill, brand dark. The bottle-green that pairs with bright green. |
| Ink Black | `#0E0F0C` | `--color-ink` | Display headline colour (900 weight) and hairline borders. Slightly warmer than pure black. |
| White | `#FFFFFF` | `--color-surface` | Elevated product cards (the calculator) floating over the green field. |
| Grey 700 | `#454745` | `--color-content-secondary` | Secondary body text and labels. |
| Grey 600 | `#6A6C6A` | `--color-content-tertiary` | Muted / tertiary text, helper copy. |
| Grey Border | `#868685` | `--color-border-strong` | Input and control borders (also the `rgb(134,134,133)` inset ring). |
| Mist | `#E8EBE6` | `--color-content-inverse-soft` | Soft text/dividers on dark surfaces. |
| Soft Green | `#E2F6D5` | `--color-surface-green-soft` | Secondary "Change" pill and gentle green tint surfaces. |
| Dark Olive | `#3E3B07` | `--color-surface-olive` | Deep olive accent field (imagery overlays). |
| Celebration Cyan | `#ECF9F9` | `--color-background-celebration` | The "Sending over 25,000?" info banner background. |
| Celebration Blue | `#0B4C72` | `--color-content-celebration` | Link/content text inside the celebration banner — the one non-green accent. |
| Error Red | `#CB272F` | `--color-content-negative` | Negative / error state text only. Never decorative. |
| Coin Green | `#1C3108` | `--coin-colour` | Fill for the decorative coin illustration motif. |

*Semantic EDS tokens also ship in the stack (positive `#008026`, negative `#CF2929`, accent blue `#00A2DD`, `#37517E`) — legacy content colours, held back from the green marquee identity.*

## Tokens — Typography
### Wise Sans — display & headings: all-caps, black weight, poster-scale · `--font-family-display`
- **Substitute:** Inter (its own bundled fallback), Averta, sans-serif
- **Weights:** 600 (semibold sub-heads), 900 (black display)
- **Sizes:** 105.428px / 89.143px / 60.857px / 58.514px / 45.457px / 40px / 24.629px
- **Line height:** tight — `--line-height-title: 1.2`
- **Letter spacing:** negative tracking on large display (`--letter-spacing-negative-lg: -0.02em` down to `-0.05em`)
- **Role:** Headlines set ALL-CAPS in 900 black at poster scale; this is the brand's entire volume knob.

### Inter — body, controls, product UI · `--font-family-regular`
- **Substitute:** Helvetica, Arial, sans-serif
- **Weights:** 400 (body), 500 (medium), 600 (labels/buttons)
- **Sizes:** 14px / 16px / 18px / 20px (plus a 52px calculator amount input)
- **Line height:** `--line-height-body: 1.5`
- **Letter spacing:** near-zero; small positive steps available (`--letter-spacing-xs: 0.01em`)
- **Role:** Everything that isn't a headline — running copy, form fields, the transfer calculator. Quiet, legible, neutral.

*Also loaded: Averta (400/600/700) as a legacy body face.*

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 14px | 1.5 | 0 | `--font-size-14` |
| Body | 16px | 1.5 | 0 | `--font-size-16` |
| Body Large | 18px | 1.5 | 0 | `--font-size-18` |
| Lead / Button | 20px | 1.5 | 0 | `--font-size-20` |
| Sub-heading | 24.629px | 1.2 | -0.01em | — |
| Heading | 45.457px | 1.2 | -0.015em | — |
| Amount Input | 52px | 1.2 | -0.02em | — |
| Display | 58.514px | 1.2 | -0.02em | — |
| Hero Display | 105.428px | 1.2 | -0.02em | `--font-family-display` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xx-small | 8px | `--padding-x-small` |
| small | 16px | `--space-small` |
| medium | 24px | `--padding-medium` |
| large | 32px | `--space-medium` |
| x-large | 40px | `--space-large` |
| 2x-large | 56px | `--space-x-large` |

*Fluid `clamp()` steps also ship (`--mw-space-*` / `--eds-space-*`) for responsive section rhythm.*

### Border Radius
| Element | Value |
|---------|-------|
| Buttons / pills | 9999px (`--radius-full`) |
| Inputs / cards | 10px (`--radius-small`) |
| Medium container | 16px (`--radius-medium`) |
| Large panel | 24px (`--radius-large`) |
| X-large panel | 32px (`--radius-xlarge`) |
| Focus ring / chip | 2px |
| Flags / avatars | 50% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Hairline ring | `rgba(14,15,12,0.12) 0 0 0 1px` | `--shadow-ring` |
| Inset border | `rgb(134,134,133) 0 0 0 1px inset` | `--shadow-inset` |
| Soft lift | `rgba(0,0,0,0.08) 0 6px 20px 0` | `--shadow-soft` |
| Card float | `rgba(0,0,0,0.15) 0 10px 32px, rgba(0,0,0,0.04) 0 40px 40px` | `--shadow-card` |

### Layout
- **Page max-width:** 1440px (`--navigation-container`)
- **Section gap:** 56–80px (fluid `--space-x-large` → `--eds-space-*`)
- **Card padding:** 16–24px
- **Element gap:** 8–16px

## Components
### Primary Button
**Role:** The main "Sign up" / "Send money" action.
Bright green fill `#9FE870`, forest-green text `#163300`, 1px `#9FE870` border, fully rounded (9999px), padding 19px 24px, 20px Inter at 600. No shadow — the pill shape and colour do the work.

### Dark Button
**Role:** High-contrast nav CTA ("Sign up" top-right).
Forest-green fill `#163300` with light text, same 9999px pill geometry. Used when the green background needs the button to invert for contrast.

### Secondary / Soft Pill
**Role:** In-context switch like the "Change" country control.
Soft green surface `#E2F6D5`, forest-green text `#163300`, 9999px radius, compact 8px 12px padding, 16px/600. Reads as adjustable, not primary.

### Text / Ghost Button
**Role:** Nav links (Personal, Business, Platform) and inline actions.
No fill, forest-green text `#163300`, 9999px hit-area, 18px at 400–600. Quiet until hovered.

### Amount Input
**Role:** The calculator's "You send exactly" field.
Borderless, 52px Inter at 400, colour `#163300`, zero padding — the number IS the interface. Currency selector sits inline as a pill dropdown.

### Standard Input
**Role:** Form fields and search.
Colour `#0E0F0C`, 10px radius, 12px 16px padding, 16px body; border via `#868685` inset ring on focus.

### Product Card
**Role:** The floating transfer calculator over the green hero.
White `#FFFFFF` surface, 10px radius, card-float shadow (`0 10px 32px` + `0 40px 40px`), generous 16–24px internal padding. Bordered variant uses 1px `#0E0F0C`.

### Celebration Banner
**Role:** Contextual money-tips ("Sending over 25,000? We'll discount our fee").
Pale cyan `#ECF9F9` background with blue `#0B4C72` link text — the single sanctioned break from the green/dark system.

### Hero Headline
**Role:** The poster statement ("THE FAST WAY TO SEND MONEY ABROAD").
Wise Sans, 900 black, ~105px, ALL-CAPS, colour `#0E0F0C` (or `#163300` on lighter fields), tight 1.2 leading with negative tracking. Set 2–3 lines, left- or centre-aligned.

### Country / Currency Chip
**Role:** Inline selector with circular flag.
Flag rendered at 50% radius inside a pill row; label in 16–18px Inter 600, forest-green ink.

### Info / Rate Pill
**Role:** Status chips like "Guaranteed for 8h".
Neutral rounded pill, lock icon, small 14px label — sits on the white card, muted grey text.

## Do's and Don'ts
### Do
- Commit fully to `#9FE870` as a full-bleed field — it's the brand's whole first impression.
- Set headlines ALL-CAPS in Wise Sans 900 at poster scale with tight negative tracking.
- Pair bright green only with `#163300` / `#0E0F0C` ink or clean white cards.
- Keep every CTA a full 9999px pill; use 10px for cards and inputs.
- Reserve colour beyond green for meaning — cyan for celebration, red for errors.

### Don't
- Don't put `#9FE870` as text on white — it fails contrast; it's a fill, not an ink.
- Don't soften the display type — mid-weights or sentence case kills the poster voice.
- Don't scatter the legacy blue EDS tokens into the green marquee identity.
- Don't add drop shadows to buttons — the pill and colour carry them.
- Don't mix radii on one element; pills OR the 10px family, never a compromise.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Brand Canvas | `#9FE870` | The hero / marketing field. |
| 0-alt | Paper | `#FFFFFF` | Product-UI background and cards. |
| 1 | Soft Green | `#E2F6D5` | Tinted secondary surfaces and pills. |
| 1-alt | Neutral Solid | `#EDEEEC` | Muted grey panel (`--color-background-neutral-solid`). |
| 2 | Forest | `#163300` | Inverted dark surfaces and dark buttons. |
| 2-alt | Olive | `#3E3B07` | Deep olive imagery overlay. |
| info | Celebration | `#ECF9F9` | Contextual tip banners. |

## Elevation
Depth is a luminance-and-shadow game, not a border game. On the green hero, white product cards lift with a soft double-shadow (`0 10px 32px` over `0 40px 40px`) so they read as physically above the field. Controls inside cards get only a 1px inset ring (`rgb(134,134,133)`), never a heavy border. Buttons carry no shadow at all — the pill shape plus saturated fill supplies the affordance. Dark buttons invert luminance instead of casting shadow.

## Imagery
Flat, brand-coloured illustration over photography — the coin motif (`#1C3108`) and green-on-green textured panels (the "SEND SECURELY" card sits on a darker green photographic wash). Circular flag icons (50% radius) anchor country/currency choices. Iconography is minimal, line-based, and stays in forest-green ink. The aesthetic favours a confident single-colour field with a hero object over lifestyle stock.

## Layout
Contained to a 1440px max, but the green canvas runs full-bleed edge to edge. Hero is centred: giant caps headline, a short two-line sub-hook (Inter, mixed case), one pill CTA, then the transfer calculator card floating below — a white product surface breaking into the green. Navigation is a clean horizontal bar (logo left; Personal / Business / Platform; locale, Help, Log in, and the dark "Sign up" pill right), ~76px tall. Section rhythm is generous and fluid via `clamp()` spacing.

## Typography Signature
Wise runs a strict two-mode system. Mode one is the **shout**: Wise Sans, 900 black, ALL-CAPS, ~105px, tight 1.2 leading and negative tracking (`-0.02em`) so letters nearly touch — a headline built to be read from across a room. Mode two is the **whisper**: Inter at 14–20px, 400–600, 1.5 leading, near-zero tracking — deliberately anonymous so the product feels trustworthy and calm. The tension between a screaming display face and a neutral body face is the whole voice: Wise is bold about the promise and quiet about the details.

## Agent Prompt Guide
## Quick Color Reference
- background: `#9FE870` (marketing) / `#FFFFFF` (product UI)
- text: `#0E0F0C` / `#163300` (forest ink)
- surface: `#FFFFFF` cards, `#E2F6D5` soft-green
- border: `#0E0F0C` (hairline) / `#868685` (control)
- accent: `#0B4C72` on `#ECF9F9` (celebration only)
- primary action: `#9FE870` fill with `#163300` text (or inverted `#163300` fill)

## Example Component Prompts
1. **Primary CTA**: A fully-rounded pill button (border-radius 9999px), background `#9FE870`, text `#163300` in Inter 600 at 20px, padding 19px 24px, no shadow, 1px `#9FE870` border.
2. **Hero headline**: An all-caps headline in Wise Sans (fallback Inter) 900 weight at clamp up to 105px, colour `#0E0F0C`, line-height 1.2, letter-spacing -0.02em, two to three lines, on a full-bleed `#9FE870` background.
3. **Transfer calculator card**: A white (`#FFFFFF`) card with 10px radius floating over green, shadow `0 10px 32px rgba(0,0,0,0.15), 0 40px 40px rgba(0,0,0,0.04)`, containing a borderless 52px amount input (`#163300`) with an inline pill currency selector.
4. **Celebration banner**: A pale cyan (`#ECF9F9`) inline banner with an icon and a `#0B4C72` underlined link, 14–16px Inter.
5. **Soft switch pill**: A compact pill (9999px) with `#E2F6D5` background and `#163300` text at 16px/600, padding 8px 12px, labelled "Change".

## Similar Brands
- **Monzo** — challenger-bank confidence with a single saturated brand colour carried edge to edge.
- **Robinhood** — bright signature green as the entire identity, dark ink, product cards over colour.
- **Cash App** — loud green fintech field with oversized, no-nonsense typography.
- **Duolingo** — a friendly acid-green system where one hue plus heavy rounded UI is the whole brand.
- **Klarna** — clean fintech minimalism, big type, playful single-accent restraint.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Identity */
  --color-brand-green: #9FE870;
  --color-ink-forest: #163300;
  --color-ink: #0E0F0C;
  --color-surface: #FFFFFF;
  /* Colors — Neutrals */
  --color-content-secondary: #454745;
  --color-content-tertiary: #6A6C6A;
  --color-border-strong: #868685;
  --color-content-inverse-soft: #E8EBE6;
  --color-background-neutral-solid: #EDEEEC;
  /* Colors — Green surfaces */
  --color-surface-green-soft: #E2F6D5;
  --color-surface-olive: #3E3B07;
  --coin-colour: #1C3108;
  /* Colors — Semantic */
  --color-background-celebration: #ECF9F9;
  --color-content-celebration: #0B4C72;
  --color-content-negative: #CB272F;

  /* Typography — Families */
  --font-family-display: 'Wise Sans', 'Inter', ui-sans-serif, sans-serif;
  --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
  /* Typography — Scale */
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --text-subheading: 24.629px;
  --text-heading: 45.457px;
  --text-display: 58.514px;
  --text-hero: 105.428px;
  --line-height-title: 1.2;
  --line-height-body: 1.5;
  --letter-spacing-negative-lg: -0.02em;
  /* Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-black: 900;

  /* Spacing */
  --padding-x-small: 8px;
  --space-small: 16px;
  --padding-medium: 24px;
  --space-medium: 32px;
  --space-large: 40px;
  --space-x-large: 56px;

  /* Border Radius */
  --radius-full: 9999px;
  --radius-small: 10px;
  --radius-medium: 16px;
  --radius-large: 24px;
  --radius-xlarge: 32px;

  /* Shadows */
  --shadow-soft: 0 6px 20px 0 rgba(0,0,0,0.08);
  --shadow-card: 0 10px 32px 0 rgba(0,0,0,0.15), 0 40px 40px 0 rgba(0,0,0,0.04);
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Identity */
  --color-brand-green: #9FE870;
  --color-ink-forest: #163300;
  --color-ink: #0E0F0C;
  --color-surface: #FFFFFF;
  /* Colors — Neutrals */
  --color-content-secondary: #454745;
  --color-content-tertiary: #6A6C6A;
  --color-border-strong: #868685;
  --color-content-inverse-soft: #E8EBE6;
  --color-background-neutral-solid: #EDEEEC;
  /* Colors — Green surfaces */
  --color-surface-green-soft: #E2F6D5;
  --color-surface-olive: #3E3B07;
  --color-coin: #1C3108;
  /* Colors — Semantic */
  --color-background-celebration: #ECF9F9;
  --color-content-celebration: #0B4C72;
  --color-content-negative: #CB272F;

  /* Typography */
  --font-display: 'Wise Sans', 'Inter', ui-sans-serif, sans-serif;
  --font-sans: 'Inter', Helvetica, Arial, sans-serif;
  --text-caption: 0.875rem;
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-lead: 1.25rem;
  --text-subheading: 24.629px;
  --text-heading: 45.457px;
  --text-display: 58.514px;
  --text-hero: 105.428px;
  --leading-title: 1.2;
  --leading-body: 1.5;
  --tracking-display: -0.02em;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 40px;
  --spacing-2xl: 56px;

  /* Border Radius */
  --radius-full: 9999px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Shadows */
  --shadow-soft: 0 6px 20px 0 rgba(0,0,0,0.08);
  --shadow-card: 0 10px 32px 0 rgba(0,0,0,0.15), 0 40px 40px 0 rgba(0,0,0,0.04);
}
```