---
version: alpha
name: "wise.com"
description: "Design system extracted from https://wise.com/ on 2026-10-28"
colors:
  background: "#ffffff"
  surface: "#ecefeb"
  surface-2: "#e2f6d5"
  surface-3: "#d0d6cc"
  foreground: "#163300"
  primary: "#163300"
  on-primary: "#ffffff"
  secondary: "#cf2929"
  border: "#e2e2e2"
typography:
  headline-display:
    fontFamily: "Wise Sans"
    fontSize: "88.5px"
    fontWeight: 900
    lineHeight: "75.225px"
  headline-lg:
    fontFamily: "Wise Sans"
    fontSize: "58px"
    fontWeight: 900
    lineHeight: "49.3px"
  headline-md:
    fontFamily: "Inter"
    fontSize: "20px"
    fontWeight: 600
    lineHeight: "28px"
    letterSpacing: "0.1px"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "24px"
    letterSpacing: "0.08px"
  label-md:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "21.7px"
    letterSpacing: "-0.084px"
  button:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 600
    lineHeight: "24px"
    letterSpacing: "-0.176px"
rounded:
  none: "0px"
  full: "9999px"
  lg: "10px"
  sm: "2px"
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-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#9fe870"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "32px"
    padding: "8px 12px"
  button-secondary:
    backgroundColor: "#9fe870"
    textColor: "#163300"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "48px"
    padding: "12px 16px"
  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 88.5px / 900, a single green accent on neutrals. The site ships in light mode by default. Measured from 2376 rendered elements at 1440px wide on 2026-10-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/brand-logo.png`: primary logo lockup
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/brand-favicon-source.png`: Favicon source
- `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/region-r3-icons.png`: r3 icons: icon placement and nearby text
- `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
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png
- `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp
- `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png
- `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png
- `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png
- `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png
- `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png
- `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus
- `screenshots/c-icon-button-1--active.png`: Icon button 1, active
- `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled
- `screenshots/c-link-1--rest.png`: Text link 1 ("Send money to Australia"), rest
- `screenshots/c-link-1--hover.png`: Text link 1 ("Send money to Australia"), hover
- `screenshots/c-link-1--focus.png`: Text link 1 ("Send money to Australia"), focus
- `screenshots/c-link-1--active.png`: Text link 1 ("Send money to Australia"), active
- `screenshots/c-text-input-1--rest.png`: Text input 1, rest
- `screenshots/c-text-input-1--focus.png`: Text input 1, focus
- `screenshots/c-text-input-1--disabled.png`: Text input 1, disabled
- `screenshots/c-text-input-1--filled.png`: Text input 1, filled
- `screenshots/c-combobox-1--rest.png`: Combobox / custom select 1 ("USD"), rest
- `screenshots/c-combobox-1--hover.png`: Combobox / custom select 1 ("USD"), hover
- `screenshots/c-combobox-1--focus.png`: Combobox / custom select 1 ("USD"), focus
- `screenshots/c-overlay-dialog-1--open.jpg`: Dialog / modal 1 opened by combobox "USD"
- `screenshots/c-combobox-1--open.png`: Combobox / custom select 1 ("USD"), open (trigger)
- `screenshots/c-radio-1--rest.png`: Radio 1 ("Send money"), rest
- `screenshots/c-radio-1--focus.png`: Radio 1 ("Send money"), focus
- `screenshots/c-radio-1--checked.png`: Radio 1 ("Send money"), checked
- `screenshots/c-label-1--rest.png`: Field label 1 ("You send exactly"), rest
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Personal"), rest
- `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Personal"), hover
- `screenshots/c-overlay-dropdown-menu-2--open.png`: Dropdown menu 2 opened by menu-button "Personal"
- `screenshots/c-menu-button-1--open.png`: Menu / dropdown trigger 1 ("Personal"), open (trigger)
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Wise Personal"), rest
- `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Wise Personal"), hover
- `screenshots/c-social-links-1--rest.png`: Social icon links 1, rest
- `screenshots/c-social-links-1--hover.png`: Social icon links 1, hover
- `screenshots/c-card-1--rest.png`: Card 1 ("Wells Fargo30.29 USD in "), rest
- `screenshots/c-feature-item-1--rest.png`: Feature item (icon + title + text) 1 ("Federally regulatedRegul"), rest
- `screenshots/c-list-1--rest.png`: Styled list 1 ("Instant, secure transfer"), rest
- `screenshots/c-list-item-1--rest.png`: List row / menu row 1 ("Receive money fastGet pa"), rest
- `screenshots/c-image-1--rest.png`: Image / figure 1, rest
- `screenshots/c-video-1--rest.png`: Video / media embed 1, rest
- `screenshots/c-carousel-1--rest.png`: Carousel / slider 1 ("Excellent everywhereSee "), rest
- `screenshots/c-logo-strip-1--rest.png`: Logo strip 1, rest
- `screenshots/c-button-2--rest.png`: Button 2 ("Send money now"), rest
- `screenshots/c-button-2--hover.png`: Button 2 ("Send money now"), hover
- `screenshots/c-button-2--focus.png`: Button 2 ("Send money now"), focus

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## 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 |
| primary | `#163300` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| 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, h2: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **Inter** for h2, h3, body, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Wise Sans | 88.5px | 900 | 75.225px | normal |
| headline-lg | Wise Sans | 58px | 900 | 49.3px | normal |
| headline-md | Inter | 20px | 600 | 28px | 0.1px |
| body-md | Inter | 16px | 400 | 24px | 0.08px |
| label-md | Inter | 14px | 400 | 21.7px | -0.084px |
| button | Inter | 16px | 600 | 24px | -0.176px |

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

The hero heading (h1) renders at 88.5px / 900, center aligned, up to 1239px wide. Sample: "The fast way to send money abroad".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## 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: 600px, 840px, 1160px, 1280px, 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

## 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, primary

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

### Button, secondary

Background `#9fe870`, text `#163300`, border none, radius 9999px, height 48px, padding 12px 16px, 14px / 400. Sample label: "Send money".

### 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.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (31 of 87 in the checklist, 58 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 20 state changes, 2 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | ghost-primary-with-icon sm, primary, ghost-primary-with-icon lg, outline-with-icon sm, outline, ghost-primary sm, outline, ghost-primary-with-icon sm | hover, focus | "Send money" |
| Icon button | secondary, ghost-primary, primary, secondary | focus, active, disabled |  |
| Text link | underlined-accent, underlined-accent, plain-accent, underlined-accent | hover, focus, active | "Send money to Australia" |
| Text input | outlined sm, outlined | focus, disabled, filled, placeholder |  |
| Combobox / custom select | filled sm, filled | hover, focus, open | "USD" |
| Radio | custom, custom | focus | "Send money" |
| Field label | above, left | rest only | "You send exactly" |
| Fieldset / form section | default | rest only | "Total feesIncluded in USD amou" |
| Navigation link | plain-accent | rest only | "Wise AccountThe international " |
| Menu / dropdown trigger | ghost-primary | hover, open | "Personal" |
| Footer | default | rest only | "ProductsWise PersonalWise Busi" |
| Footer link | plain-accent | hover | "Wise Personal" |
| Social icon links | default | hover |  |
| Card | filled-with-media, flat-with-media, filled-with-media, outlined-with-media | rest only | "Wells Fargo30.29 USD in total " |
| Feature item (icon + title + text) | outlined | rest only | "Federally regulatedRegulated n" |
| Testimonial / quote card | filled-with-media | rest only | ""It is so quick. It took only " |
| Styled list | default, default | rest only | "Instant, secure transfersDesig" |
| List row / menu row | filled | rest only | "Receive money fastGet paid eas" |
| Avatar | 48px-round, 48px-round, 80px-rounded | rest only |  |
| Divider | horizontal | rest only |  |
| Image / figure | aspect-1, aspect-1, aspect-1.69-rounded | rest only |  |
| Video / media embed | default | rest only |  |
| Carousel / slider | default | rest only | "Excellent everywhereSee the st" |
| Logo strip | default | rest only |  |
| Icon | filled-24px, filled-32px, filled-16px | rest only |  |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Search field, Textarea, Select (native), Checkbox, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Help / hint text, Validation error text, Header / navbar, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Theme toggle, Language / region switch, Tooltip, Popover, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Stat / metric, Table, Table row, Accordion / disclosure, Avatar stack, Code block / inline code, Keyboard key, Blockquote, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Sticky bar.

## 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 | 88.5px, 2 lines, center | 76px, 32 links, 1 CTA | media below text | 3→3 col; 2→1 col; 3→3 col | content-width |
| laptop 1024px | 944px | 40px | 18px | 65.1px, 2 lines, center | 76px, 32 links, 1 CTA | media below text | 3→3 col; 3→3 col; 4→1 col | content-width |
| tablet 768px | 704px | 32px | 18px | 50px, 2 lines, center | 0px, 0 links | media below text | 3→2 col; 2→1 col; 2→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 88.5px → 44.9px (51%), 2 → 3 lines.
- No navigation links or hamburger detected at 390px; mobile navigation behavior is unverified.
- Body text is 18px at the sampled desktop and phone widths.
- Phone side gutter 16px.
- 6 buttons stretch full-width on phones.
- Section top padding 56px → 48px.

## Interaction & Motion

143 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, text #9fe870 → #bbef9a, border #9fe870 → #bbef9a, icon/inner colour → #bbef9a; cursor pointer; transition color, background-color, border-color | 0.35s | cubic-bezier(0.8, 0.05, 0.2, 0.95) | delay 0s, 0s, 0s, 0s.
- Hover on button-secondary ("Sign up"): background #163300 → #0d1f00, border #163300 → #0d1f00; cursor pointer; transition color, background-color | 0s, 0.15s | ease, ease-in-out | 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).
- Tooltips: above the trigger, 9px gap, shifted right; transparent on #0e0f0c, 14px/600, radius 0px, padding 0px 0px, no arrow; appears instantly (no fade); stays open after the pointer leaves (click-away or hover-intent grace); shows about 611ms after hover.
- Hover/click menus: above the trigger, 57px gap, shifted right; transparent, radius 0px, padding 0px 0px, shadow none; appears instantly (no fade); stays open after the pointer leaves (click-away or hover-intent grace).
- 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

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#163300` where supported by measured component or regional evidence; its accent role is inferred.
- 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.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from html; large surface colors remain in the palette.