Wise DESIGN.md

Design System Inspiration of Wise

Overview

Visual Theme & Atmosphere

Wise builds an international account for people and businesses that send, spend, receive, and hold money across borders. Its public web presentation makes that practical offer feel unmistakably unlike a conventional bank: a forest-green and electric-lime contrast, wide areas of paper white, and short, oversized Wise Sans headlines. Wise’s own 2021 name change broadened the story from transfers to multi-currency lives, while its later help guidance says the greener look, lettering, and globally inspired icons were introduced to better reflect the products and the people using them. The supplied July 2026 capture confirms the palette and type are not merely campaign language: the three public home/pricing surfaces repeatedly render Inter for functional UI and load Wise Sans for display moments.

• Lime punctuation: #9fe870 is the repeated live primary-action fill, paired with #163300 text.
• Forest rhythm: #163300, paper white, and #e8ebe6 make the captured public pages feel warm rather than corporate-blue.
• Expressive restraint: Wise Design reserves Wise Sans for short, high-impact moments and says to default to Inter for most product communication.

Primary tasks

• Send money abroad from an international account
• Hold and spend money in several currencies
• Open an international account with Wise

Brand Narrative

Wise’s February 2021 first-party rebrand account says the company changed its name from TransferWise to Wise as the service had grown beyond transfers. It describes the job as making money move across borders more instantly, transparently, conveniently, and eventually for free, for people and businesses managing money internationally.

The later first-party help update connects the greener look, new logo, lettering, and people-and-place-inspired icons to the products Wise is building and the people it serves. That explains the visible contrast between the practical Inter-led UI and moments where Wise Sans is allowed to add a more expressive voice.

Principles

1. Money across borders, not a single transfer. UI implication: describe sending, spending, receiving, and holding as a coherent international-money task when the product context supports it.
2. Clarity for functional communication. UI implication: default to Inter for readable UI and long-form information.
3. Expression is a deliberate accent. UI implication: use Wise Sans for short key moments, not as a universal UI family.

Personas

These are verified stakeholder groups, not invented individual personas.

• People with international lives: Wise’s rebrand account names people who live, work, travel, or support family around the world.
• Businesses managing money across borders: Wise explicitly frames the expanded service around both people and businesses.

Colors

Observed public-surface roles

• Lime action (#9fe870): primary CTA fill on home and both public pricing surfaces.
• Forest ink (#163300): recurring text, border, dark-action fill, and CTA text.
• Obsidian (#0e0f0c): high-contrast text and borders in the supplied public capture.
• Charcoal (#454745): repeated secondary copy and border value.
• Fog (#e8ebe6): repeated light surface/border value on home and business pricing.
• Paper (#ffffff): observed public canvas and dialog surface.
• Pebble (#868685): observed home input/chip border; this is a lower-frequency public value, not a universal semantic claim.

No unobserved status palette or broad authenticated-product color scale is asserted here.

Typography

Evidence classes

• Official product-use: Wise Design says to use Inter for most communication and Wise Sans for short, expressive headlines; its product guidance specifically allows Wise Sans for success, progress, and feature-intro moments.
• Live computed public-surface use: the supplied collector records Inter as loaded/high confidence with 1,502 visible uses across home and pricing, backed by seven Wise-hosted WOFF2 sources. Wise Sans is loaded/high confidence with 24 visible uses and two Wise-hosted WOFF2 sources. These are the only two family tokens promoted here.
• Official distributed-font licence: Inter’s upstream project is licensed under SIL OFL 1.1. That licence applies to Inter, not to Wise Sans.
• Declared-only: Averta, VideoJS, and Wise Sans JP have declared font-face sources in the bundle but zero visible use in the captured surfaces. They are not UI tokens or specimen substitutes.
• Unresolved: no public licence source for Wise Sans was found in this pass. Its live metadata and official Wise Design usage guidance remain useful, but redistribution rights are not asserted.

Measured public hierarchy

Layout

Observed spacing scale

The public capture repeatedly uses 4, 8, 12, 16, 24, and 32px values. Wise Design’s published spacing foundation lists the same values as foundational tokens and extends the scale beyond the captured component set. This reference keeps only the overlap as machine tokens.

Observed shape scale

• Input/dialog control: 10px
• Selection chip: 16px
• Public navigation control: 18.7693px computed radius
• Public CTA: 9999px pill

Responsive Behavior

The supplied evidence is desktop-only (1440x900) for home, business pricing, and Korean pricing. No breakpoint, mobile layout, or responsive component change is claimed.

Elevation & Depth

The supplied capture does not establish a universal card-elevation scale. The observed home dialog uses rgba(69, 71, 69, 0.2) 0px 0px 40px 0px; the dialog field exposes an inset focus-like shadow in its dialog-open snapshot. Keep those values local to those components rather than treating them as a global shadow system.

Motion & Easing

The collector expanded two dialogs but did not capture a transition duration, easing value, hover behavior, or pressed behavior. No motion token is supplied.

---

Verified: 2026-07-13 Tier 1 sources: https://wise.com/ · https://wise.com/gb/pricing/business · https://wise.com/kr/pricing/ · https://wise.design/foundations/typography · https://docs.wise.design/components · https://wise.com/us/blog/world-meet-wise · https://wise.com/help/articles/0pZf4t8FdGwauVsQGiHqD/why-does-wise-look-different Tier 2 sources: https://getdesign.md/wise · https://styles.refero.design/style/367c0c6e-73a7-441c-a8ff-91d139ac60dc Conflicts unresolved: none

Components

All variants below are observations from the supplied public home/pricing capture, not a complete Wise product-component contract. Selector, surface, and observed-state provenance are retained; no hover, pressed, focus, animation, or unobserved size variant is inferred.

Public actions

Lime primary CTA

• Background: #9fe870
• Text: #163300
• Border: 1px solid #9fe870
• Radius: 9999px
• Padding: 11px 24px
• Height: 48px
• Font: 16px / 600 / Inter
• Use: home marketing CTA; home::[data-omd-capture="35"], also repeated on surface-3

Forest inverted CTA

• Background: #163300
• Text: #9fe870
• Border: 1px solid #163300
• Radius: 9999px
• Padding: 11px 24px
• Height: 48px
• Font: 16px / 600 / Inter
• Use: home marketing CTA on a dark surface; home::[data-omd-capture="40"]

Public navigation

Secondary navigation control

• Text: #163300
• Border: 0px solid #163300
• Radius: 18.7693px
• Padding: 8px 12px
• Height: 40px
• Font: 18px / 600 / Inter
• Use: public navigation; home::[data-omd-capture="5"], also present on surface-3

Selection and dialog

Selection chip

• Background: #9fe870
• Text: #163300
• Border: 1px solid #9fe870
• Radius: 16px
• Padding: 0px 16px
• Height: 32px
• Font: 18px / 600 / Inter
• Checked: home::[data-omd-capture="79"]
• Unchecked: transparent background with #868685 1px border at home::[data-omd-capture="80"]
• Use: home selection chip; checked and unchecked states were both captured

Dialog field

• Text: #0e0f0c
• Radius: 10px
• Padding: 0px 16px 0px 48px
• Height: 48px
• Font: 16px / 400 / Inter
• Dialog-open: home::[data-omd-interaction-capture="dialog-0-3"]; inset shadow rgb(52, 74, 36) 0px 0px 0px 2.45557px
• Use: field inside the captured home dialog

Published component roster (55 not measured here)

Wise publishes 55 components at wise.design, enumerated by that host's own sitemap (https://wise.design/sitemap.xml, read 2026-09-19). None of them is measured in this reference. The five stylings above were captured from the wise.com public marketing home and pricing pages — a different host and a different evidence domain from the design system — so they are not a subset of this list and no value here is asserted for any name below.

action-prompt, avatar, bottom-sheet, button, card, carousel-cards, checkbox, chip, circular-button, compact-date-input, copy-block, critical-banner, date-input, date-picker, divider, dropdown, expressive-money-input, icon-button, image-ratios, info-prompt, inline-prompt, instruction, list-item, list-item-button, list-item-checkbox, list-item-icon-button, list-item-navigation, list-item-no-action, list-item-radio, list-item-switch, media-button, modal, money-input, navigation-option, nudge, password-input, popover, progress-bar, progress-spinner, promo-card, radio, screen-loader, search-input, section-header, segmented-control, select, snackbar, summary, switch, table, tabs, text-area, text-input, upload, upload-input

The list is flat because the host publishes it flat: every page is wise.design/components/<name> with no category segment. Grouping them into sections would be structure this reference invented rather than structure Wise publishes.

The source this reference cites for components no longer exists

verification_v2.sources carries wise-components → https://docs.wise.design/components, captured 2026-07-13. As of 2026-09-19 the whole of docs.wise.design answers 302 to https://wise.design/404: Wise moved its design system to a Figma Sites build on the apex domain and retired the documentation host. The old entry is kept with its original capture date, because it records an observation that was true when it was made; wise-component-index is added alongside it for the index actually read today.

The URL returns 200 after the redirect, so a status-code check calls it healthy. It is the same soft-404 shape that made this catalogue-wide review necessary.

States

Only the following UI states were captured on the public home surface:

No public evidence in this pass establishes loading, empty, success, or error treatment.

Do's and Don'ts

Do

• Default to Inter for functional UI and longer communication; this is Wise Design’s stated default.
• Reserve Wise Sans for short, expressive display moments.
• Pair the observed lime primary action with forest-green text on the captured public-web pattern.
• Preserve the captured pill geometry for a public CTA only when that specific marketing pattern is intended.

Don't

• Don’t use Wise Sans for long or serious text; Wise Design directs those cases to the cleaner face.
• Don’t promote declared-only Averta or Wise Sans JP to visible UI typography.
• Don’t copy the public marketing CTA, dialog, or chip measurements into authenticated-product or documentation surfaces without separate evidence.
• Don’t infer hover, pressed, focus, motion, error, or loading variants from this capture.

Voice & Tone

Wise’s first-party rebrand account frames the service around making money work without borders and speaks directly to people and businesses with multi-currency lives. The current public messaging is concise and capability-led rather than decorative.

No fictional error copy, prohibited-language list, or broad documentation tone is asserted.

Agent Prompt Guide

Evidence-safe prompt

• “Create a public Wise-inspired marketing action using the observed lime #9fe870 fill, forest #163300 text, 9999px radius, 11px 24px padding, 48px height, and 16px/600 Inter. Do not assume this is an authenticated-product button.”
• “Use Inter for body/UI and reserve Wise Sans for a short display headline; do not substitute a system font for a declared-only family.”
• “For a home selection chip, use the observed checked and unchecked values only; no transition, hover, or error behavior is specified.”