# Wise — Design System
> The international account | Money without borders
- **Canonical:** https://uiuxskills.com/library/wise
- **Source:** https://wise.com/
- **Category:** Fintech & Crypto
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:40.558Z

---

---
version: alpha
name: Wise
description: International money transfer and multi-currency account platform.
tone: >-
  Direct, transparent, and reassuring. The voice is professional yet accessible, focusing on
  concrete benefits and clear comparisons.
color-scheme: light
colors:
  primary: "#9FE870"
  secondary: "#00B9FF"
  surface: "#FFFFFF"
  surface-container: "#F2F5F7"
  on-surface: "#253647"
  on-primary: "#253647"
  error: "#E63946"
  success: "#26C281"
  outline: "#D1D9E0"
  focus-ring: "#00B9FF"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    width: auto
  button-primary-hover:
    backgroundColor: "#88D05E"
  button-secondary:
    backgroundColor: transparent
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.secondary}"
  link-hover:
    textColor: "#0099D6"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "#FFFFFF"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Wise employs a clean, functional, and trust-oriented aesthetic designed to simplify complex financial transactions. The brand identity balances professional reliability with an accessible, human-centric tone, using high-contrast visuals to emphasize transparency and speed.

## Colors

The color strategy relies on a high-contrast palette that prioritizes readability and clear call-to-action identification.

*   Primary (#9FE870): The signature brand green used for primary CTAs and key highlights.
*   Secondary (inferred) (#00B9FF): An accent color for digital product elements and text-based links.
*   Surface (#FFFFFF): The primary background color for the application and marketing surfaces.
*   Surface-container (inferred) (#F2F5F7): A light gray used for modular containers and card backgrounds.
*   On-surface (#253647): The primary dark text color for high-contrast readability.
*   On-primary (inferred) (#253647): Dark text used specifically for legibility on the bright primary green.
*   Error (inferred) (#E63946): A semantic color reserved for critical alerts and error states.
*   Success (inferred) (#26C281): Used for positive status indicators and successful transfer confirmations.
*   Outline (inferred) (#D1D9E0): The standard border color for input fields and structural dividers.
*   Focus-ring (inferred) (#00B9FF): A high-visibility ring for keyboard navigation and focus states.

## Typography

The typography uses the Inter typeface family to maintain a clean, modern, and highly legible interface across all screen sizes.

*   Display-lg (inferred): Used for primary hero headlines.
*   Headline-lg (inferred): Used for sub-headers and section titles.
*   Body-md (inferred): The standard size for body copy and paragraph text.
*   Label-sm (inferred): Used for captions, small UI labels, and metadata.

## Layout

The layout follows a mobile-first, modular approach with a maximum content width of 840px on large screens. The page structure follows this order: nav, hero, features, pricing, social-proof, and footer. The hero pattern features a centered headline and subhead paired with a functional transfer calculator. Content is organized into modular clusters that stack vertically on mobile and expand into multi-column layouts at 768px and 1024px breakpoints, utilizing a 16px (`spacing.md`) gutter for consistent rhythm between sections.

## Elevation & Depth

Elevation is used sparingly to maintain a flat, clean aesthetic while providing necessary visual separation between cards and the background. The values are inferred based on the platform's focus on clarity.

*   Elevation.sm: Subtle lift for secondary UI elements.
*   Elevation.md: Standard lift for card components to differentiate them from the `surface-container`.
*   Elevation.lg: Deepest shadow for modal overlays or persistent drawers.

## Shapes

The brand uses a moderate corner radius to balance a friendly, modern feel with professional stability. The `rounded.md` (8px) token is the standard for cards and buttons, while `rounded.sm` (4px) is reserved for input fields and smaller UI components to maintain a tighter, more precise look.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.primary}` with `{colors.on-primary}` text for high visibility. Use these for main actions like "Send money" or "Sign up." Secondary buttons use a transparent background with a `{colors.primary}` border to maintain a lighter visual weight.

### Card
Cards utilize `{colors.surface}` with a `{rounded.md}` radius and a subtle `{colors.outline}` border. Use these to group related information or features, ensuring they are separated from the `{colors.surface-container}` background.

### Input Field
Input fields feature a `{rounded.sm}` radius and a `{colors.outline}` border. On focus, the border must transition to `{colors.focus-ring}` to provide clear accessibility feedback.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Do not use `{colors.primary}` for text, as it lacks sufficient contrast. |
| Apply `{rounded.md}` to all card components for visual consistency. | Do not mix sharp corners with the standard `{rounded.md}` radius. |
| Use `{colors.on-surface}` for body text to ensure high contrast. | Avoid using `{colors.error}` for anything other than critical alerts. |
| Use `{colors.secondary}` for all text-based links. | Do not use `{colors.secondary}` for primary buttons. |
| Maintain `{spacing.md}` between major content sections. | Avoid excessive use of shadows; keep elevation subtle. |
| Use `{colors.success}` for positive status indicators. | Do not use font sizes smaller than `{typography.label-sm}` for UI labels. |
| Apply `{input-field-focus}` border color on interaction. | Do not use `{colors.surface-container}` for primary backgrounds. |
| Use `{divider}` to separate modular content blocks. | Do not use `{colors.outline}` for text elements. |

## Content Style

CTA labels are imperative and action-oriented, using verbs like "Send money" or "Get Wise" to drive immediate user engagement.

Headings are benefit-driven and transparent, focusing on concrete financial advantages such as speed, cost-savings, and global reach.

Copy density is kept low to ensure scannability. Paragraphs are short, and bullet points are used frequently to break down complex information into digestible, actionable insights.

## Imagery & Icons

The imagery style is mixed, utilizing a combination of flat vector illustrations, clean iconography, and flag assets to represent international currencies. Icons should be minimal and functional, while illustrations should maintain a flat, vector-based aesthetic that aligns with the brand's clean, digital-first personality.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Wise, a minimal, trust-focused international money transfer platform. Match its direct, transparent, and reassuring tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, font sizes, or pixel radii.
2. Use only the component variants defined under `components:`. Do not invent variants (e.g. a filled secondary button or an outlined card-elevated).
3. Follow the Layout section for page order (nav → hero → features → pricing → social-proof → footer), max content width of 840px, and breakpoints at 768px and 1024px with `{spacing.md}` gutters.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g. using `{colors.primary}` for body text), surface the conflict before proceeding.
5. Apply elevation tokens sparingly per the Elevation & Depth narrative — `{elevation.sm}` for secondary elements, `{elevation.md}` for cards, `{elevation.lg}` for modals only.

## Output contract

**Must:**
- Use all tokens by name as defined in the YAML front matter.
- Include hover, focus, and disabled states for every interactive component the spec defines (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.sm}` to inputs and small UI elements; `{rounded.md}` to cards and buttons.
- Use `{colors.focus-ring}` as the visible focus indicator on all keyboard-navigable elements.
- Keep copy style imperative and benefit-driven per Content Style when generating any placeholder CTA or heading.

**Must NOT:**
- Invent colors, font sizes, radii, or spacing values absent from the spec.
- Use `{colors.primary}` for text or `{colors.secondary}` for primary buttons.
- Apply `{colors.error}` to anything other than critical alerts.
- Use `{colors.surface-container}` as a primary page background.
- Rewrite, replace, or invent page copy, headings, labels, or navigation items.
- Alter information architecture as a side effect of applying design tokens.

## When in doubt
- If a value isn't in the spec, ask the user before inventing one.
- For background roles, default to `{colors.surface}`; for modular containers, use `{colors.surface-container}`.
- For body text on any surface, default to `{colors.on-surface}`.
- Tokens marked "(inferred)" in the spec are visual approximations. If an authoritative source (theme file, Storybook) exists, those values take precedence.
- For unspecified layout decisions, default to mobile-first with breakpoints at 768px and 1024px.