# Design System
Inspired by
Wise

A design token catalog generated from DESIGN.md. Every color, font, and component — bold, green, and borderless.

Send Money Learn More

01 / Colors

## Color Palette

Brand
Near Black
#0e0f0c
Primary text
Wise Green
#9fe870
Primary CTA
Dark Green
#163300
Button text on green
Mint
#e2f6d5
Soft green surface
Semantic
Positive
#054d28
Success
Danger
#d03238
Error
Warning
#ffd11a
Warning
Orange
#ffc091
Warm accent
Neutral
Warm Dark
#454745
Secondary text
Gray
#868685
Muted text
Light
#e8ebe6
Light surface

02 / Typography

## Typography Scale

DISPLAY HERO
Display — 126px / 900 / 0.85 / Wise Sans / "calt"
Section Title
Section — 40px / 900 / 0.85 / Wise Sans
Card Title
Card — 22px / 600 / 1.25 / -0.396px / Inter
Body — Send money abroad. Fast, cheap, transparent. No hidden fees, no bad exchange rates.
Body — 18px / 400 / 1.44 / +0.18px / Inter
Body Semibold — Account balance
Semibold — 18px / 600 / 1.44 / -0.108px / Inter
Caption — Updated 2 minutes ago
Caption — 14px / 600 / 1.55 / -0.084px / Inter

03 / Buttons

## Buttons

Send Money
Primary Green
Learn More
Subtle

Hover to see scale(1.05) grow. Click for scale(0.95) compress.

04 / Cards

## Cards

### International Transfers

Send money to 80+ countries at the real exchange rate. No markup, just a small, transparent fee.

### Multi-currency Account

Hold and convert 40+ currencies. Spend abroad with the Wise card. Green accent card variant.

### Business Account

Pay invoices, receive payments, and manage your international finances in one place.

05 / Forms

## Forms

Amount
Default
Recipient
Focus (green ring)
IBAN
Error
Reference

06 / Spacing

## Spacing

4
8
12
16
20
24

07 / Radius

## Radius

10px
16px
30px
40px
pill

08 / Elevation

## Depth

Flat
No shadow
Ring
1px ring shadow