Wise
Add this design system to use its color palette, typography, spacing & other tokens while creating your own designs.
Money-transfer fintech. Bright-green canvas with forest green, oversized black-weight type, full-bleed photography.
Palette
Typography
96px
56px
18px
16px
Spacing & Shape
| Token | Value | Preview |
|---|---|---|
| sm | 16px | |
| md | 24px | |
| lg | 40px | |
| xl | 64px |
Border Radius
| Token | Value | Preview |
|---|---|---|
| lg | 24px | |
| full | 9999px |
design.md
tokens (raw)
name: wise-design
version: alpha
description: >
Loud, confident fintech. A signature Bright Green (#9fe870) and a deep Forest
Green ink (#163300) on white, with mint-aqua accent circles. The hero move is
enormous, heavy, slightly-condensed display type (Wise Sans, weight 900) set
in ALL CAPS — "SEND AND SPEND MONEY WORLDWIDE" — paired with Inter for body.
Full-bleed bright-green bands, fully-rounded pill buttons, and big
generously-rounded cards carry the system. A formal token set defines
content/interactive/background/border roles plus semantic positive/negative.
Surfaces studied via Playwright: home (computed --color-* tokens + elements).
colors:
# Brand
primary: '#9FE870' # interactive-accent, Bright Green (hover #80E142, active #65CF21)
on-primary: '#163300' # Forest Green text on green
forest: '#163300' # Forest Green — ink, dark buttons, dark sections
on-forest: '#9FE870' # bright green text on forest
# Surface
surface: '#FFFFFF' # background-screen
surface-neutral: 'rgba(22,51,0,0.078)' # subtle green-tinted neutral
surface-mint: '#C6ECDB' # mint/aqua accent circles (approximate)
surface-band: '#9FE870' # full-bleed bright-green sections
# Text
on-surface: '#0E0F0C' # content-primary
on-surface-secondary: '#454745' # content-secondary
on-surface-tertiary: '#6A6C6A' # content-tertiary
hairline: 'rgba(14,15,12,0.12)' # border-neutral
# Semantic
accent-blue: '#0097C7' # content-accent (links)
positive: '#008026'
negative: '#CF2929'
warning: '#9A6500'
typography:
display: # "SEND AND SPEND MONEY WORLDWIDE"
fontFamily: '"Wise Sans", Inter, sans-serif'
fontSize: 96px
fontWeight: 900
lineHeight: 82px
letterSpacing: 0
transform: uppercase
heading: # "SAFE AT EVERY STEP"
fontFamily: '"Wise Sans", Inter, sans-serif'
fontSize: 56px
fontWeight: 900
lineHeight: 48px
letterSpacing: 0
transform: uppercase
body-lg:
fontFamily: 'Inter, Helvetica, Arial, sans-serif'
fontSize: 18px
fontWeight: 400
lineHeight: 26px
letterSpacing: -0.108px
body-md:
fontFamily: 'Inter, Helvetica, Arial, sans-serif'
fontSize: 16px
fontWeight: 400
lineHeight: 24px
link:
fontFamily: 'Inter, sans-serif'
fontWeight: 600
color: '{colors.accent-blue}'
rounded:
lg: 24px # large content cards / calculator
full: 9999px # all buttons, tags, icon circles
spacing:
sm: 16px
md: 24px
lg: 40px
xl: 64px
components:
button-primary: # "Sign up in minutes"
backgroundColor: '{colors.forest}'
textColor: '{colors.on-forest}'
typography: '{typography.body-lg}'
rounded: '{rounded.full}'
padding: '19px 24px'
button-accent: # "Learn about the Wise Travel card"
backgroundColor: '{colors.primary}'
textColor: '{colors.on-primary}'
rounded: '{rounded.full}'
feature-circle: # star / bank / headset icon badges
backgroundColor: '{colors.surface-mint}'
rounded: '{rounded.full}'
note: 'mint-aqua circle holding a line icon'
calculator-card:
backgroundColor: '{colors.surface}'
rounded: '{rounded.lg}'
note: 'amounts render in heavy Wise Sans (forest green)'
motion:
easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
duration-standard: 250ms
note: 'energetic but smooth; carousel slides, value flips'
icons:
style: line
stroke: 2px
sizes: { sm: 24px, md: 32px }
color-rule: 'forest ink, held inside mint or white circles'Wise
v alpha · "Send and spend money worldwide"
Overview. Wise is loud, confident fintech. The brand voltage is a single Bright Green #9FE870 paired with a deep Forest Green #163300 that serves as ink, dark buttons, and dark sections alike. The hero move is enormous, heavy, slightly-condensed display type — Wise Sans at weight 900, set in ALL CAPS ("SEND AND SPEND MONEY WORLDWIDE") — while Inter handles all body copy. Full-bleed bright-green bands, fully-rounded pill buttons, mint-aqua accent circles behind line icons, and big 24px-rounded calculator/content cards complete the look. Underneath sits a formal, role-based token system (content / interactive / background / border) with proper semantic positive/negative/warning hues.
Colors
- Bright Green
#9FE870{colors.primary}— interactive-accent. Full-bleed section bands and accent buttons; hover#80E142, active#65CF21. Text on green is always Forest. - Forest Green
#163300{colors.forest}— ink for headings/links, primary button fill (with bright-green text), and dark sections. Body ink is the cooler#0E0F0C(content-primary). - Text greens — secondary
#454745, tertiary#6A6C6A. - Mint/aqua
#C6ECDB{colors.surface-mint}(approximate) — circular icon badges. - Semantic — link blue
#0097C7, positive#008026, negative#CF2929, warning#9A6500. Backgrounds use a green-tinted neutralrgba(22,51,0,0.078).
Typography
Wise Sans (heavy display grotesque; substitute Inter Tight 900 / Archivo Expanded) used only at weight 900, UPPERCASE, with tight line-height (<1) so headlines stack into solid blocks. Inter for all body and links (links are 600 weight, blue).
| Token | Family | Size | Weight | Line-height | Usage |
|---|---|---|---|---|---|
| display | Wise Sans | 96px | 900 | 82px | hero h1 (CAPS) |
| heading | Wise Sans | 56px | 900 | 48px | section h2 (CAPS) |
| body-lg | Inter | 18px | 400 | 26px | lead/body |
| body-md | Inter | 16px | 400 | 24px | secondary body |
Layout
Alternating white and full-bleed bright-green bands. Feature lists pair mint-aqua icon circles with bold headings. The exchange calculator is a large rounded white card with heavy forest-green numerals. A vast "Wise works nearly everywhere" link grid and an "Excellent Everywhere" testimonial carousel anchor the lower page. Spacing is generous (16/24/40/64).
Elevation & Depth
Largely flat with confident color blocking. Cards use big radii and white-on-tint contrast rather than shadows. The brightness of the green bands provides the visual punch.
Shapes
Two radii: full pills for every button, tag and icon circle; 24px for large content/calculator cards. Friendly and rounded throughout.
Components
- button-primary "Sign up in minutes": forest pill with bright-green label.
- button-accent: bright-green pill with forest label.
- feature-circle: mint-aqua circle holding a 2px forest line icon.
- calculator-card: white, 24px radius, amounts in heavy Wise Sans forest green.
Motion
Energetic but smooth (~250ms) — testimonial carousels slide and currency values flip; nothing chaotic.
Iconography
2px line icons (star, bank, headset, card, heart), forest ink, almost always inside mint-aqua or white circles. Sizes 24/32px.
Do's and Don'ts
- Do pair Bright Green
#9FE870with Forest Green#163300— green on green is the core combo. - Do set hero/section headings in Wise Sans 900, UPPERCASE, tight.
- Do use full pills for buttons and 24px radius for big cards.
- Do put line icons inside mint-aqua circles.
- Don't set light green text on white (fails contrast) — text on white is forest or near-black.
- Don't mix in unrelated accent hues; blue/positive/negative are semantic only.
