wise.com Designsystem

---
version: alpha
name: "wise.com"
description: "Design system extracted from https://wise.com/ on 2026-09-28"
colors:
  background: "#ffffff"
  surface: "#ecefeb"
  surface-2: "#e2f6d5"
  surface-3: "#d0d6cc"
  foreground: "#163300"
  muted-foreground: "#0e0f0c"
  primary: "#163300"
  on-primary: "#ffffff"
  secondary: "#cf2929"
  border: "#e2e2e2"
typography:
  headline-display:
    fontFamily: "Wise Sans"
    fontSize: "89px"
    fontWeight: 900
    lineHeight: "0.85"
  headline-lg:
    fontFamily: "Inter"
    fontSize: "59px"
    fontWeight: 900
    lineHeight: "0.84"
  headline-md:
    fontFamily: "Inter"
    fontSize: "20px"
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: "0.1px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: "0.08px"
  label-md:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.55"
    letterSpacing: "-0.084px"
  button:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 600
    lineHeight: "1.5"
    letterSpacing: "-0.176px"
rounded:
  none: "0px"
  full: "9999px"
  lg: "10px"
  sm: "2px"
  xl: "19px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "28px"
  8: "32px"
  9: "40px"
  10: "48px"
  11: "56px"
components:
  button-ghost:
    backgroundColor: "#9fe870"
    textColor: "#163300"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "32px"
    padding: "8px 12px"
  button-secondary:
    backgroundColor: "#9fe870"
    textColor: "#163300"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "32px"
    padding: "8px 9.38462px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#9fe870"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "32px"
    padding: "8px 12px"
  input:
    backgroundColor: "transparent"
    rounded: "0px"
    height: "47px"
  card:
    backgroundColor: "transparent"
    rounded: "10px"
    padding: "0px"
---

# wise.com

## Overview

Wise: The international account | Money without borders | Wise United States: Banks charge a lot for overseas transfers. We don't. Transfer money abroad easily and quickly with our low cost money transfers.

Pill-shaped controls, layered shadows for depth, large display type at 89px / 900, a single green accent on neutrals. The site ships in light mode by default. Measured from 2342 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#ecefeb` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#e2f6d5` | Secondary surface |
| surface-3 | `#d0d6cc` | Secondary surface |
| foreground | `#163300` | Primary text |
| muted-foreground | `#0e0f0c` | Secondary text, captions |
| primary | `#163300` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#cf2929` | Secondary accent (orange) |
| border | `#e2e2e2` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#ecefeb`, `#9fe870`, `#163300`, `#e2f6d5`, `#d0d6cc`, `#e2e2e2`.

The accent `#163300` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Wise Sans** for h1: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **Inter** for h2, h3, body, label, button: Google Fonts (Inter).

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Wise Sans | 89px | 900 | 0.85 | normal |
| headline-lg | Inter | 59px | 900 | 0.84 | normal |
| headline-md | Inter | 20px | 600 | 1.4 | 0.1px |
| body-md | Inter | 16px | 400 | 1.5 | 0.08px |
| label-md | Inter | 14px | 400 | 1.55 | -0.084px |
| button | Inter | 16px | 600 | 1.5 | -0.176px |

Type scale in use: 14px, 16px, 18px, 20px, 25px, 45px, 59px, 89px. Base body size 16px.

The H1 renders at 89.1428px / 900, center aligned, up to 1239px wide. Sample: "The fast way to send money abroad".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56 (px).
- Flex and grid gaps: 4, 8, 12, 16, 20, 28, 40, 56 px.
- Content max width: 1240px, centred.
- Breakpoints: 576px, 768px, 992px, 1200px, 1440px.
- Header: 76px tall, relative, background `rgba(0, 0, 0, 0)`; 12 nav links at 18px / 600 (Wise AccountThe international account for sending, spending and converting money · Send money · Send large amounts · Receive money · Get a Wise Multi-Currency Card · Receive interest · Personal pricing · Wise BusinessThe only account your start-up or scale-up needs to thrive internat).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px`
- shadow-2: `rgba(0, 0, 0, 0.08) 0px 6px 20px 0px`
- shadow-3: `rgb(134, 134, 133) 0px 0px 0px 1px inset`
- shadow-4: `rgba(14, 15, 12, 0.12) 0px 0px 0px 1px`

## Shapes

- Buttons: 9999px
- Inputs: 0px
- Cards and panels: 10px
- Images and media: 9999px
- Radius scale: none 0px, full 9999px, lg 10px, sm 2px, xl 19px

## Components

### Button, ghost

Background transparent (it sits on `#9fe870`, so place it on that colour), text `#163300`, border none, radius 9999px, height 32px, padding 8px 12px, 18px / 400. Sample label: "Personal".

### Button, secondary

Background transparent (it sits on `#9fe870`, so place it on that colour), text `#163300`, border 1px solid transparent, radius 9999px, height 32px, padding 8px 9.38462px, 16px / 600. Sample label: "Help".

### Button, primary

Background `#163300`, text `#9fe870`, border 1px solid #163300, radius 9999px, height 32px, padding 8px 12px, 16px / 600. Sample label: "Sign up".

### Input

Height 47px, background `transparent`, border 0px solid #163300, radius 0px, 52px text, padding 0px 0px.

### Card

Background `transparent`, border 1px solid #1633001f, radius 10px, padding 0px, no shadow. Typical size about 374×395px.

### Link

Colour `#163300`, no underline at rest, weight 600.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1240px | 100px | 18px | 89.1px, 2 lines, center | 76px, 32 links, 1 CTA | media below text | 3→3 col; 3→1 col; 6→1 col | content-width |
| laptop 1024px | 864px | 80px | 18px | 55.1px, 2 lines, center | 76px, 32 links, 1 CTA | media below text | 3→3 col; 3→1 col; 6→1 col | content-width |
| tablet 768px | 688px | 40px | 18px | 50px, 2 lines, center | 76px, 32 links, 1 CTA | media below text | 3→3 col; 3→1 col; 6→1 col | content-width |
| phone 390px | 358px | 16px | 18px | 44.9px, 3 lines, center | 0px, 0 links | media below text | 2→1 col; 2→1 col; 2→1 col | 6 full-width |

- H1 goes 89.1px → 44.9px (50%), 2 → 3 lines.
- Nav never collapses to a hamburger (0 links still visible at 390px).
- Body text stays 18px at every width.
- Phone side gutter 16px.
- 6 buttons stretch full-width on phones.
- Section top padding 56px → 48px.

## Interaction & Motion

134 elements carry transitions; typical 0.35s with cubic-bezier(0.8, 0.05, 0.2, 0.95), mostly on color, background-color, border-color. 3 running keyframe animations (RevealInteractive_revealFlag__GCaSC 1.5s 1; cc_barGrow_3445914449 1.6s 1; RevealInteractive_arrowSlide__Ij84P 1.5s 1).

- Hover on button-primary ("Sign up"): background #163300 → #0d1f00, border #163300 → #0d1f00; cursor pointer; transition color, background-color, border-color | 0.35s | cubic-bezier(0.8, 0.05, 0.2, 0.95) | delay 0s, 0s.
- Hover on button-secondary ("Help"): text #163300 → #0d1f00; cursor pointer; transition color, background-color, border-color | 0.35s | cubic-bezier(0.8, 0.05, 0.2, 0.95) | delay 0s, 0s.
- Hover on nav-link ("Send money"): no visible change; cursor pointer; transition color | 0.35s | cubic-bezier(0.8, 0.05, 0.2, 0.95).
- Hover on card ("Wise AccountThe international account fo"): no visible change; cursor pointer.
- Hover on input: no visible change; cursor text.
- Focus on button-primary: outline 2px solid rgb(22, 51, 0), offset 2px.
- Focus on input: no visible focus style measured (may rely on :focus-visible with keyboard only).
- No tooltip could be triggered from the first viewport, but the stylesheet defines tooltip rules (.tooltip): opacity: 0; text-decoration: none; text-decoration-color: initial; font-weight: 400; z-index: 1070; position: absolute.
- 5 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- 5 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).
- Overlay library detected: floating-ui.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#163300` for actions and focus; never paint large areas with it.
- Do keep body text at 16px in Inter and headings in Wise Sans.
- Do match corner radii per element class (buttons 9999px, cards 10px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.