---
title: "Wise design system"
variant: extended
source: https://wise.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/wise-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Wise · Design System

> Bold green, clear money movement, built for everywhere

**Theme:** light · **Industry:** fintech · **Source:** https://wise.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Wise pairs oversized, tightly composed headlines with vivid green surfaces and dark forest-green controls to make an international finance homepage feel direct and approachable. Product interfaces, customer photography, and practical comparison content balance the bold brand identity with concrete evidence.

## North star

Use oversized Wise Sans headlines and vivid lime-green panels to make practical international money features feel clear, confident, and human.

## Overview

The page’s visual signature is a vivid lime-and-forest palette: bright green fills the opening hero and selected feature or mission panels, while deep green carries navigation, links, and pill-shaped primary actions. White remains the main canvas, so the long homepage feels open despite its many sections; pale gray-green marks the dense disclosures and destination directory near the footer. Wise Sans supplies the exceptionally heavy, compact display headlines, often centered and set in uppercase, while Inter handles navigation, body copy, buttons, and detailed interface labels. The layout alternates centered editorial moments with broad multi-column card rows and full-bleed video or photo bands. Rounded cards and pill controls soften the high-impact typography. Real product screenshots, money-transfer comparisons, customer photography, and testimonial cards make the brand promise tangible rather than abstract.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Wise Lime | `#9fe870` | `--color-wise-lime` | brand | Signature green for the hero canvas, selected feature and mission panels, light primary buttons, and prominent accents. |
| Forest Ink | `#163300` | `--color-forest-ink` | brand | Deep green for navigation, text links, dark primary buttons, and inverse testimonial cards. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and clean backing for cards, product-interface panels, and contrasting content. |
| Slate Olive | `#454745` | `--color-slate-olive` | neutral | Muted body text and secondary explanatory copy on light backgrounds. |
| Leaf Edge | `#8fd262` | `--color-leaf-edge` | accent | Measured hairline border accent, including around navigation elements. |
| Near Black | `#0e0f0c` | `--color-near-black` | neutral | Primary text and headings where the design uses a near-black rather than forest-green tone. |
| Mist Sage | `#edefeb` | `--color-mist-sage` | surface | Soft gray-green background for disclosures, destination links, and footer content. |
| Pool Aqua | `#a0e1e1` | `--color-pool-aqua` | accent | Secondary accent appearing in selected feature cards, icons, and content alongside the green palette. |
| Soft Divider | `#e2e2e1` | `--color-soft-divider` | neutral | Subtle card or interface borders; use as a quiet separator rather than a prominent brand color. |
| Charcoal Olive | `#21231d` | `--color-charcoal-olive` | neutral | Supporting dark tone in card text, product imagery, and interface details. |
| Pale Lime | `#e2f6d5` | `--color-pale-lime` | accent | Light green detail for small button or heading accents and supporting emphasis. |
| Quiet Gray | `#868685` | `--color-quiet-gray` | semantic | Secondary interface border and inset input treatment, not a defining brand surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#edefeb` (Mist Sage) · `--color-surface-2` → `#163300` (Forest Ink) · `--color-text` → `#0e0f0c` (Near Black) · `--color-text-muted` → `#454745` (Slate Olive) · `--color-border` → `#8fd262` (Leaf Edge) · `--color-accent` → `#9fe870` (Wise Lime) · `--color-accent-2` → `#a0e1e1` (Pool Aqua)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0e0f0c` | `#ffffff` | 19.23:1 | AAA |
| `#0e0f0c` | `#edefeb` | 16.61:1 | AAA |
| `#0e0f0c` | `#163300` | 1.38:1 | fail |
| `#454745` | `#ffffff` | 9.37:1 | AAA |
| `#454745` | `#edefeb` | 8.1:1 | AAA |
| `#454745` | `#163300` | 1.49:1 | fail |
| `#9fe870` | `#ffffff` | 1.47:1 | fail |
| `#9fe870` | `#edefeb` | 1.27:1 | fail |
| `#9fe870` | `#163300` | 9.45:1 | AAA |

### Gradients

- `linear-gradient(to right, rgb(255, 255, 255) 30%, rgba(0, 0, 0, 0)), linear-gradient(to left, rgb(255, 255, 255) 30%, rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 0px 50%, rgba(22, 51, 0, 0.08), rgba(0, 0, 0, 0)),`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600 | Navigation, body copy, buttons, links, captions, and much of the interface text. | Inter |
| Wise Sans | `--font-display` | webfont | 900, 400 | Display headlines, section headings, and large transfer amount inputs. | Inter |

- **Inter:** Mostly regular or semibold; body copy is readable and open, while controls and links use semibold weight.
- **Wise Sans:** Use very heavy weight for large, compact headlines; uppercase is common in the major promotional headings.

### Type scale — Augmented Fourth (ratio ≈ 1.395, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 105.5px | 900 | 0.85 | 0 | — | Wise Sans | Oversized hero headline setting the homepage’s bold editorial tone. |
| h1 | 89px | 900 | 0.85 | 0 | — | Wise Sans | Primary hero heading and other prominent campaign-style headline treatment. |
| h2 | 58.5px | 900 | 0.85 | 0 | — | Wise Sans | Major section headings for savings, security, reviews, and mission content. |
| h3 | 45.5px | 600 | 1.25 | -0.03em | — | Inter | Feature or content subheadings, including secondary editorial sections. |
| h4 | 40px | 900 | 0.85 | 0 | — | Wise Sans | Smaller display-style headings used to establish section emphasis. |
| body | 20px | 600 | 1.4 | 0.005em | — | Inter | Introductory and supporting paragraphs beside features and calls to action. |
| caption | 16px | 400 | 1.5 | 0.005em | — | Inter | Fine print, card details, product labels, and supporting interface copy. |
| button | 16px | 600 | 1.5 | -0.011em | — | Inter | Semibold text on pill-shaped primary and secondary actions. |
| nav | 16px | 600 | 1.5 | 0.005em | — | Inter | Top-level navigation and utility menu labels. |
| link | 16px | 600 | 1.5 | 0.005em | — | Inter | Inline content links and destination or resource links. |

OpenType features in use: `"calt"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 8, 9, 10, 11, 12, 16, 19, 24, 28, 32, 38, 48, 56 px.
- Section rhythm 56px · element gap 4px · card padding 28px · max content width 1240px.

A long, mostly white page uses centered, wide content areas and alternates between multi-column card rows, centered feature sections, and full-bleed media. The measured page maximum width is 1240px; measured spacing is based on a 4px unit, with a 56px section gap and 28px card padding. Keep headline blocks prominent and centered where shown, then use left-aligned directory and footer content. Density is comfortable: product evidence and cards are separated by generous white canvas.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `28px` · media `50%` · nav `19px` · link `2px` · xs `2px` · sm `10px` · md `16px` · lg `19px` · xl `28px` · 2xl `38px` · pill `9999px`
- Shadow `hairline` (media): `rgba(22, 51, 0, 0.12) 0px 0px 0px 1px`
- Shadow `hairline-2` (media): `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.15) 0px 10px 32px 0px, rgba(0, 0, 0, 0.04) 0px 40px 40px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.08) 0px 6px 20px 0px`
- Shadow `inset` (input): `rgb(134, 134, 133) 0px 0px 0px 1px inset`
- Motion: standard transition `0.35s cubic-bezier(0.8, 0.05, 0.2, 0.95)` on interactive elements.

The page is primarily flat, relying on strong color blocks and white space rather than persistent shadows. Use measured rounded cards and pill buttons to define components. Product or comparison panels can sit above their surrounding surface with subtle measured shadow treatments; keep borders restrained and use hairlines for separation.

## Imagery

Use real-life customer and travel photography in rounded feature cards and full-width video bands, with people interacting naturally with phones and money-related settings. Product-interface visuals should show transfer amounts, currency selectors, fees, and comparison rows clearly. The page also uses interface illustrations and decorative graphics; keep them secondary to product proof and photography. Avoid applying a uniform tint that obscures the imagery.

## Components

### Primary pill button

Semibold Inter action in a 9999px pill. The dark version pairs Forest Ink #163300 with Wise Lime #9fe870; the light version reverses those colors.

### Feature cards

Rounded cards combine a concise heading, short supporting copy, and an underlined link; green, dark green, and aqua surfaces provide variation.

### Transfer calculator

White product panel foregrounds large Wise Sans amounts, currency selection, fee details, recipient total, and a prominent send action.

### Savings comparison

A green section presents a white, rounded comparison interface with provider rows and a highlighted Wise result.

### Customer review cards

Rounded testimonial panels use contrasting lime or deep-green fills, readable quotation text, and compact source labels.

### Destination directory

Muted sage background groups destination and resource links into a spacious multi-column list, with understated underlines.

### Measured component styles

- **Primary button** (“Open an account in minutes”): background #163300 · text #9fe870 · border 1px solid #163300 · radius 9999px · padding 11px 24px · 600 16px Inter
- **Secondary button** (“Explore the account”): background #9fe870 · text #163300 · border 1px solid #9fe870 · radius 9999px · padding 11px 24px · 600 16px Inter
- **Link** (“Learn more”): transparent background · text #163300 · radius 2px · padding 0px · 600 16px Inter
- **Input** (“1,000”): transparent background · text #163300 · radius 0px · padding 0px · 400 52px Wise Sans
- **Card** (“"My Wise account is my proper current ac”): background #9fe870 · text #163300 · radius 28.1539px · padding 28.2px · 400 18px Inter
- **Navigation item** (“Personal”): transparent background · text #163300 · radius 0px · padding 0px · 600 16px Inter

## Do

- Lead with a bold, compact Wise Sans headline.
- Use the measured Wise Lime and Forest Ink pairing.
- Give product interfaces clear visual priority.
- Alternate open white sections with distinctive color panels.
- Keep primary actions in rounded pills.
- Use aqua selectively for secondary highlights.

## Don't

- Do not replace the measured green palette with generic fintech blue.
- Do not crowd the hero headline with competing elements.
- Do not make every section a colored card.
- Do not use heavy shadows as the main layout device.
- Do not bury fees or transfer amounts in decorative imagery.
- Do not apply display typography to dense fine print.

## Agent prompt

Build a new page in Wise’s visual style using a white canvas, Wise Lime #9fe870 panels, and Forest Ink #163300 for navigation, links, and dark pill actions. Use oversized, heavy Wise Sans-style headlines with compact line spacing, then let Inter carry readable body copy and controls. Organize content into centered editorial sections, clear multi-column feature cards, and occasional full-bleed customer imagery. Show real product value through legible transfer interfaces, amounts, fees, and comparison rows. Keep cards generously rounded and the overall elevation restrained. Use Mist Sage #edefeb for dense informational areas and Pool Aqua #a0e1e1 sparingly as a secondary accent. Preserve generous white space, consistent section rhythm, and an approachable, practical tone.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered oversized headline and actions above a three-column feature-card row. | account signup CTA, send-money link, transfer calculator | lime hero canvas, pill buttons, overlapping product card, mixed-color cards |
| 2 | comparison | Centered green section with a white comparison panel. | fee savings explanation, provider comparison, show more providers | rounded green section, white calculator panel, highlighted Wise row |
| 3 | stats | Centered heading above three horizontally aligned proof points. | trust proof, support availability, customer growth | simple icon markers, three-column layout, white canvas |
| 4 | video | Full-bleed single-column video section. | account opening CTA | full-width moving image, overlay pill action |
| 5 | feature-grid | Centered intro followed by a horizontal, image-led audience card rail. | audience selection, learn more links, explore account CTA | rounded photo cards, horizontal card rail, centered pill CTA |
| 6 | product-showcase | Two-column business feature with a large media area. | business/platform selection, business signup, learn more | tab-like selector, media showcase, paired text and visual |
| 7 | logo-cloud | Wide, shallow horizontal strip of repeated country or currency imagery. | browse represented destinations | flag imagery, horizontal ribbon, arrow control |
| 8 | feature-grid | Centered heading and CTA above a three-column feature-card row. | security information link, learn more links | green and aqua feature panels, rounded imagery, three-column cards |
| 9 | testimonials | Large left-aligned title beside a horizontal review-card rail. | review browsing, review source labels | contrasting rounded cards, country markers, carousel controls |
| 10 | feature-split | Centered mission copy in a broad green panel with decorative media. | mission update link | lime panel, oversized headline, decorative floating graphic |
| 11 | cta | Full-bleed colorful media surrounding a centered white panel. | scan QR code | full-width video or image, white rounded inset, QR code |
| 12 | other | Single-column legal disclosure on a muted sage surface. | read numbered disclosures, follow reference links | small text, numbered paragraphs, white inset card |
| 13 | category-nav | Left-aligned heading and tabs above a multi-column destination link grid. | switch link categories, show all destinations | sage background, underlined links, multi-column directory |
| 14 | footer | White footer with multiple left-aligned link columns. | browse product links, browse resources, browse company links | multi-column link lists, section headings, plain white canvas |

## Source CSS custom properties (selected)

```css
--color-content-primary: #0e0f0c;
--color-content-secondary: #454745;
--color-content-tertiary: #6a6c6a;
--color-content-accent: #0097c7;
--color-content-accent-hover: #0084b3;
--color-content-accent-active: #0077a5;
--color-content-positive: #008026;
--color-content-positive-hover: #006d13;
--color-content-positive-active: #006002;
--color-content-negative: #cf2929;
--color-content-negative-hover: #b80419;
--color-content-negative-active: #a7000d;
--color-content-warning: #9a6500;
--color-content-warning-hover: #855400;
--color-content-warning-active: #764700;
--color-interactive-accent: #9fe870;
--color-interactive-accent-hover: #80e142;
--color-interactive-accent-active: #65cf21;
--color-interactive-positive: #2ead4b;
--color-interactive-positive-hover: #069939;
--color-interactive-positive-active: #008b2b;
--color-interactive-negative: #e74848;
--color-interactive-negative-hover: #d03238;
--color-interactive-negative-active: #bf1e2c;
--color-interactive-warning: #df8700;
--color-interactive-warning-hover: #c97500;
--color-interactive-warning-active: #b86700;
--color-interactive-secondary: #868685;
--color-interactive-secondary-hover: #6c6c6b;
--color-interactive-secondary-active: #525251;
--color-background-screen: #ffffff;
--color-background-elevated: #ffffff;
--color-background-neutral: rgba(22,51,0,0.07843);
--color-background-accent: rgba(56,200,255,0.10196);
--color-background-positive: rgba(54,199,151,0.10196);
--color-background-negative: rgba(255,135,135,0.10196);
--color-background-warning: rgba(255,172,0,0.10196);
--color-background-overlay: rgba(22,51,0,0.07843);
--color-border-neutral: rgba(14,15,12,0.12157);
--color-border-overlay: rgba(14,15,12,0.12157);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/wise-com