Wise Design System Reference

Foundation

Color Tokens

The complete color palette from Wise's design system, featuring bold lime accents, deep forest greens, and a carefully curated neutral scale for financial clarity and trust.

Deep Forest Green

#163300

Primary brand · Text · Buttons

Dark Neutral Black

#0E0F0C

Body text · Structural elements

Darkest Forest

#0D1F00

Emphasis · Premium moments

Lime Green

#9FE870

Primary accent · Highlights · CTAs

Soft Lime

#E2F6D5

Light backgrounds · Hover states

Cyan Teal

#A0E1E1

Secondary accent · Interactive elements

Warm Yellow

#FADC65

Tertiary accent · Featured content

Warning Yellow

#FFD11A

Alerts · Cautionary indicators

Error Red

#CB272F

Error states · Danger indicators

Medium Gray

#454745

Secondary text · Disabled states

Pure White

#FFFFFF

Primary background · Surfaces

Charcoal Black

#21231D

Detailed information · Strong text

Typography

Type Scale

Inter powers the interface with clarity and accessibility, while Wise Sans dominates hero moments with bold, distinctive display text. A precisely calibrated scale ensures hierarchy and readability across all devices.

Primary Inter UI · Body · Headings · Buttons

Display Wise Sans (Display) Hero text · Large headlines

Display XL Global Money 105px · 900 · 90px

Display L Move Money 89px · 900 · 76px

Display M The quick brown 61px · 600 · 67px

H1 Large Fast Transfer 100px · 700 · 92px

H1 Medium Wise Platform 58px · 900 · 50px

H2 Section Heading 35px · 600 · 44px

H3 Large Subsection heading 25px · 600 · 32px

H3 Medium Feature callout 20px · 700 · 24px

H3 Small Small heading 18px · 600 · 26px

H4 Tertiary heading 20px · 600 · 28px

Body Large The quick brown fox jumps over the lazy dog 17px · 400 · 27px

Body The quick brown fox jumps over the lazy dog 16px · 400 · 24px

Label Form label text here 14px · 400 · 22px

Small Small metadata caption 13px · 600 · 20px

Tiny Smallest text · Helper text 12px · 500 · 16px

Input Large 500 EUR 49px · 400 · 74px

Input XL 1200 USD 52px · 400 · 78px

Button Send Money 18px · 400 · 26px

Button Small Skip 13px · 400 · normal

Link Learn more about fees 16px · 400 · 24px

Span Accent Emphasized inline text 16px · 600 · 24px

Layout

Spacing & Shapes

8px base grid system ensures consistent spacing throughout. Radius tokens scale from sharp to rounded, supporting clean card layouts and modern UI patterns.

Spacing Scale

4px xs

8px sm

12px sm+

16px md

20px lg

24px lg+

28px xl

32px xl+

36px 2xl

56px 3xl

Border Radius

None 0px

Small 2px

Medium 10px

Large 24px

Extra Large 28.1539px

Full Circle 50%

Pill 9999px

Shadows

Base No elevation

Raised (Small) Hover states · gentle

Elevated (Medium) Dropdowns · popovers

Prominent (Large) Headers · sticky elements

Border Widths

Thin 1px

Medium 2px

Opacity

Full 100%

High 85%

Medium 70%

Muted 60%

Semi 50%

Subtle 45%

Z-index / Layering

Base 1–5

Dropdown 10

Dropdown High 99

Sticky 100

Sticky High 200

Modal 1040

Elevation

Depth & Surfaces

Four shadow levels create clear spatial hierarchy while maintaining the premium, minimal aesthetic. Soft green-tinted shadows integrate naturally with the brand palette.

White Surface

Primary background and elevated content surface

Base · #FFFFFF

Forest Green

Primary brand surface for buttons and overlays

Primary · #163300

Light Green Surface

Contextual highlighting and soft background zones

Accent · #E2F6D5

Base White #FFFFFF

Forest Green #163300

Soft Lime #E2F6D5

Lime Accent #9FE870

Components

Component Library

Core interactive elements rendered at their exact design specifications — colors, typography, spacing, and interaction states from the Wise system.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #163300 bg · #FFFFFF text · 9999px radius · 19px/24px padding · 72px height. Secondary: transparent bg · rgba(22,51,0,0.12) border · hover bg rgba(159,232,112,0.15). Ghost: link-style, no border, color #163300.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · rgba(14,15,12,0.1) border · 100px radius · 43px height · 12px/20px padding. Focus: #163300 border · 3px box-shadow rgba(159,232,112,0.2).

Card

Content container — elevated surface with shadow

.card

Fast & Low-Cost

Send money internationally with real exchange rates. No hidden fees.

#FFFFFF bg · rgba(22,51,0,0.12) border · 10px radius · Raised shadow. Title: 14px/600/#163300. Body: 13px/#454745. CTA: Primary green button.

Badges

Status indicators — Success, Error, Info

.badge

Active Blocked New

12px/700 · 4px/16px padding · 100px radius. Success: #163300. Error: #CB272F. Info: #9FE870 bg · #163300 text.

Guidelines

Do's & Don'ts

Principles for consistent application of the Wise design language across surfaces and contexts.

Do — Embrace

Use lime green (#9FE870) sparingly for primary CTAs and badges; it's high-energy and draws maximum attention
Pair deep forest green with white for the highest contrast and readability — it's the core brand combination
Apply 16px minimum padding to all interactive elements for touch accessibility
Use Inter for body text and UI labels exclusively; it's proven readable at all scales
Reserve Wise Sans for display text 58px and above to maximize brand impact
Maintain 1.5–1.75 line height ratio for body paragraphs; tighter reduces readability
Stack spacing in multiples of 8px to ensure visual harmony and predictable layouts
Include ample whitespace around major sections (56px–100px margins) to reduce cognitive load

Don't — Avoid

Don't use pure black (#000000) for primary UI text; use #163300 or #0E0F0C instead
Don't apply both a border and shadow to the same element; choose one depth cue
Don't exceed 720px width for body text blocks; readability drops significantly
Don't use opacity below 0.45 for interactive elements; they become invisible or inaccessible
Don't apply border-radius below 10px for card containers; keeps them clean and modern
Don't set font sizes below 12px for body text; accessibility and readability fail
Don't use the warning yellow (#FFD11A) for primary brand moments; reserve it for alerts
Don't combine multiple accent colors in a single component; stick to primary green + one accent

wise.com

Preview