Wise Design System
Dark Green · Generated 18/04/2026 · 18 colors · 43 type tokens · 24 spacing steps · 28 breakpoints · 6 motion tokens
v1.0.0
Color Palette
Background Colors
Dark Green
#163300
Black
#000000
Green (Brand)
#9FE870
White
#FFFFFF
Green Tint 8%
rgba(22,51,0,.08)
Green Tint 20%
rgba(22,51,0,.2)
Light Cyan
#A0E1E1
White Cyan
#ECF9F9
Light Gray 2
#ECEFEB
Text Colors
Dark Gray 2
#0E0F0C
Dark Gray
#454745
Mid Gray
#6A6C6A
Mid Gray 2
#808080
Light Gray
#E8EBE6
Dark Blue
#0B4C72
Border Colors
Green Border
rgba(22,51,0,.12)
Mid Gray 3
#868685
Typography
Primary Font · Inter / Wise Sans
Wise Sans
Send money abroad easily. Fast transfers at the real exchange rate.
Regular · 400 Medium · 500 Semibold · 600 Black · 900
Display Font · Wise Sans (Black)
₹5,000
Black weight reserved for display numbers, hero headlines, and exchange rates
Black · 900 · Hero
Wise
Display Hero · 80.7px · Black (900) · line-height: 75px · letter-spacing: −1.2px
Money without borders.
Heading XL · 50px · Black (900) · line-height: 57px · letter-spacing: −1.2px
The real exchange rate.
Heading Large · 40px · Semibold · line-height: 44.4px · letter-spacing: −0.34px
Send, receive, and spend money around the world with the real exchange rate and low fees.
Body Large · 22.5px · Regular · line-height: 32px · letter-spacing: −0.22px
Join over 16 million customers using Wise to send money internationally.
Body Default · 16px · Regular · line-height: 28px · letter-spacing: −0.18px
Transfer completed · 12,480 INR received
Body Small · 14px · Regular · line-height: 21px · letter-spacing: −0.11px
TRANSFER · ACCOUNT · CARD
Caption · 13px · Semibold · line-height: 20px · letter-spacing: 0.08px · UPPERCASE
Line Heights
Tight
18.4px
Snug
20px
Normal
21px
Loose
24px
LH-6
26px
LH-7
28px
LH-8
32px
LH-9
34px
LH-10
44.4px
LH-11
57px
LH-13
68.6px
LH-14
75px
Letter Spacing
Wise
Tight
−1.2px · hero display, large headlines
Real rate
Normal
−0.34px · headings, subheadings
TRANSFER
LS-8
0.08px · uppercase labels
Wise Sans
LS-10
0.17px · micro labels, small caps
Spacing
Spacing Scale
24 tokens — 2px → 331.9px
2
3
4
4.5
5
6.4
8
9
11
12
13.5
18
19
22
24
27
32
36
40
48
54
80
107.9
332
Borders
Border Radii
sm
2px
md
8px
lg
10px
2xl
11.24px
Full
16px
r7
17.98px
r8
26.97px
r10
35.96px
Circle
50%
Pill
9999px
Border Widths
Hairline
1px · ×84
Thin
2px · ×20
Two border widths — --border-width-hairline: 1px used extensively (×84) and --border-width-thin: 2px for emphasis (×20).
Shadows / Elevation
Shadow Tokens
1 token — green-tinted outline shadow
sm
×1
rgba(22, 51, 0, 0.12) 0px 0px 0px 1px — a 1px green-tinted ring used as an outline or focus indicator
Wise uses a minimal shadow system — only a single brand-tinted 1px outline shadow was detected. Elevation is primarily communicated through background color differences and border opacity.
Z-Index
LayerValueUsage
Below-1Background decorations, canvas underlays
Base1Default content layer
Dimmer1040Navigation desktop dimmer / backdrop
Mobile Nav1049Mobile navigation primary & secondary dropdown
Desktop Nav1050Desktop navigation primary layer
Viewport1060Desktop navigation viewport layer
Panel1070Desktop navigation panel, top-level drawers
Breakpoints
📱
XS · Minimum Mobile
320px
Smallest supported viewport
📲
MD · Tablet Start
768px
Tablet viewport (bp-15)
💻
LG · Desktop
992px
Desktop breakpoint (bp-19)
🖥️
XL · Wide
1200px
Wide desktop (bp-22)
🖥️
2XL · Max Layout
1440px
Max layout width (bp-25)
📺
4K · Ultra Wide
1920px
Full HD / 4K viewport (bp-28)
Wise uses 28 breakpoints from 320px to 1920px, including sub-pixel variants (e.g. 479.98px, 767.98px) for precise boundary handling — typical of Bootstrap-derived grid systems.
Opacity
Opacity Tokens
3 tokens — 0.06 · 0.45 · 0.94
Ghost
6% · subtle tints
Half
45% · overlays
Near Full
94% · near-opaque
Only 3 opacity tokens were detected. Wise relies primarily on RGBA color values rather than separate opacity tokens for transparency effects.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 · AAA ≥ 7:1
Text ColorBackground ColorRatioWCAG Rating
Dark GrayDark Green1.49:1Fail
Dark GrayGreen (#9FE870)6.36:1AA
Dark GrayWhite9.37:1AAA
Dark Gray 2Dark Green1.38:1Fail
Dark Gray 2Green (#9FE870)13.05:1AAA
Dark Gray 2White19.23:1AAA
Dark BlueDark Green1.52:1Fail
Dark BlueGreen (#9FE870)6.22:1AA
Dark BlueWhite9.17:1AAA
Light GrayDark Green11.58:1AAA
Light GrayBlack17.46:1AAA
Light GrayGreen (#9FE870)1.22:1Fail
Light GrayWhite1.2:1Fail
Mid GrayDark Green2.63:1Fail
Mid GrayBlack3.97:1AA Large
Mid GrayGreen (#9FE870)3.59:1AA Large
Mid GrayWhite5.3:1AA
CSS Variables Reference
Background Colors
Dark Green--color-dark-green#163300
Black--color-black#000000
Green (Brand)--color-green#9FE870
White--color-white#FFFFFF
Green Tint 8%--color-dark-green-2rgba(22,51,0,.08)
Green Tint 20%--color-dark-green-3rgba(22,51,0,.2)
Light Cyan--color-light-cyan#A0E1E1
White Cyan--color-white-2#ECF9F9
Light Gray 2--color-light-gray-2#ECEFEB
Text & Border Colors
Dark Gray 2--color-dark-gray-2#0E0F0C
Dark Gray--color-dark-gray#454745
Mid Gray--color-mid-gray#6A6C6A
Mid Gray 2--color-mid-gray-2#808080
Light Gray--color-light-gray#E8EBE6
Dark Blue--color-dark-blue#0B4C72
Green Border--color-dark-green-4rgba(22,51,0,.12)
Mid Gray 3--color-mid-gray-3#868685
Typography
Base Font--font-family-baseInter
Display Font--font-family-2Wise Sans
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Black--font-weight-black900
Body Small--font-size-2xs14px
Body Default--font-size-xs16px
Body Medium--font-size-base18px
Body Large--font-size-2xl22.5px
Heading Large--font-size-3xl40px
Heading XL--font-size-5xl50px
Display--font-size-72px72.3px
Hero Display--font-size-81px80.7px
Tightest--letter-spacing-tight−1.2px
Normal--letter-spacing-normal−0.34px
Label Wide--letter-spacing-ls-80.08px
Micro Wide--letter-spacing-ls-100.17px
Spacing (Key Tokens)
Space 1--space-12px
Space 2--space-23px
Space 3--space-34px
Space 8--space-88px
Space 16--space-1612px
Space 32--space-3217.98px
Space 48--space-4822px
Space 64--space-6424px
Space 80--space-8026.97px
Space 96--space-9632px
Space 128--space-12835.96px
Space 160--space-16040px
Space 192--space-19248px
Space 256--space-25653.95px
Space 23--space-2380px
Space 25--space-25331.97px
Borders & Radius
Hairline--border-width-hairline1px
Thin--border-width-thin2px
sm--radius-sm2px
md--radius-md8px
lg--radius-lg10px
2xl--radius-2xl11.24px
Full--radius-full16px
r7--radius-r717.98px
r8--radius-r826.97px
r10--radius-r1035.96px
Circle--radius-r1150%
Pill--radius-r129999px
Motion, Opacity & Layers
Instant--duration-instant150ms
Fast--duration-fast200ms
Normal--duration-normal300ms
Slow--duration-slow350ms
Slower--duration-slower1s
Ease In-Out--easing-ease-in-outease-in-out
Ghost--opacity-66%
Half--opacity-4545%
Near Full--opacity-9494%
Below Content--z-1-1
Base--z-21
Nav Dimmer--z-31040
Mobile Nav--z-41049
Desktop Nav--z-51050
Viewport--z-61060
Panel--z-71070
Design System Preview · Wise (Dark Green) · Generated 18/04/2026 · 18 color tokens · 13 font-size · 2 font-family · 4 font-weight · 14 line-height · 10 letter-spacing · 24 spacing · 12 radius · 2 border-width · 1 shadow · 5 duration · 1 easing · 7 z-index · 28 breakpoints · 3 opacity