Design System

Money without
boundaries.
For everyone.

Friendly fintech, transparent transfers. A light canvas with deep green accents, warm neutrals, and a welcoming, trustworthy aesthetic.

18 color tokens 12 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutral canvas with a deep forest green primary, warm neutrals, and vivid status colors. 18 tokens across surfaces, text, interaction, and decoration.

White
#ffffff
Page background, cards
Cream
#f2f5f0
Secondary sections
Cloud
#e8ece5
Borders, dividers
Ash
#b8c4b0
Placeholder, disabled
Sage
#6b7a64
Secondary text
Forest
#2E472D
Body text
Deep Forest
#1a2e19
Headings, nav
Wise Green
#163300
Primary brand, CTA
Green Light
#2d6b00
Hover states
Green Dark
#0e2200
Pressed states
Green Wash
#edf5e8
Highlights, selected
Teal
#00b9a8
Success states
Red
#e5503c
Error states
Amber
#f5a623
Warning states
Sky
#3b82f6
Info accents

Gradients

gradient-hero
Hero backgrounds, feature banners
gradient-green
Button hovers, card accents
gradient-warm
Status banners, attention surfaces
gradient-subtle
Subtle section differentiation
Typography

Type Scale

Inter as primary typeface (substitute for Wise Sans). Rounded letterforms and open apertures for a friendly, approachable voice.

Display-xl Money without boundaries 56px / 1.0 / -0.02em
Display-lg Send money globally 48px / 1.1 / -0.02em
Display Transparent pricing 40px / 1.15 / -0.02em
Heading Section heading 24px / 1.33 / -0.015em
Heading-sm Subsection heading 20px / 1.4 / -0.015em
Body Default body text for readable content 15px / 1.6 / 0
Body-sm Dense data, comparison rows 14px / 1.5 / 0
Caption Meta info · Footer · Labels 12px / 1.5 / 0.02px

Fonts

Primary Inter 400-700 · 12-16px
Mono JetBrains Mono 400-700 · Amounts, accounts
Brand Wise Sans Proprietary · Inter substitute
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with generous whitespace. 16-step spacing scale, 8 border radius values.

Spacing Scale (4px base)

44px
88px
1616px
2424px
4040px
6464px
9696px
160160px

Border Radius

sm 6px
default 8px
md 12px
lg 16px
xl 20px
pill 9999px

Shadows

Card subtle layer
Elevated dropdowns
Modal overlays
Focus inputs
Elevation

Surfaces

Layered whites with subtle shadows. 4 distinct surface levels using border and shadow rather than color shifts.

White #ffffff
Cream #f2f5f0
Card shadow layer
Green Wash #edf5e8
Components

Button Variants

Primary (Wise Green), secondary (outlined), and ghost variants. Friendly hierarchy with precise padding and radius.

Primary Button (Filled)
Main call to action — highest visual weight
.btn-primary
Wise Green (#163300) background, White text, 8px radius. Hover lightens to Green Light (#2d6b00). Use exclusively for the single most important action.
Secondary Button (Outlined)
Secondary interactive actions
.btn-secondary
Forest (#2E472D) text, Cloud border, White background. Hover adds Cream background and Forest border. For less prominent actions.
Ghost Button
Tertiary actions, inline links
.btn-ghost
Wise Green text, green border, transparent background. Hover adds Green Wash background. For inline actions and navigation.
Badge
Status indicators, labels
.badge
New Completed Failed Pending
Pill-shaped (9999px radius), 12px font weight 600, color-coded for status. Green for brand, Teal for success, Red for error, Amber for warning.
Input Field
Text inputs, form controls
input
White background, 8px radius, Cloud border. Focus state uses Wise Green border with a subtle green ring shadow.
Transfer Card
Transfer amount display, currency conversion
.transfer-card
You send
1,000.00 GBP
Recipient gets
1,267.45 EUR
White background, 12px radius, Cloud border, Wise Green left accent. Wise Mono for amounts at 24px weight 600. Currency codes in Sage.
Code Block
API examples, account details
.code-block
const wise = require('wise-api')('token...');
Cream background, 12px radius, Cloud border, 16px padding. Wise Mono at 14px. Keywords in green, strings in teal.
Guidelines

Do's & Don'ts

Do — Embrace
  • White (#ffffff) as primary page background
  • Wise Green (#163300) for CTAs and active states
  • Forest (#2E472D) for body text on white
  • Deep Forest (#1a2e19) for headings and nav
  • 12px radius for cards, 8px for buttons
  • 4px-based spacing with generous whitespace
  • Hero gradient on large surfaces only
  • JetBrains Mono for all transfer amounts
Don't — Avoid
  • Dark backgrounds for primary content
  • Wise Green for body text or large blocks
  • Hard-coded hex values outside the palette
  • Generic system fonts — always Inter
  • Heavy drop shadows — keep elevation subtle
  • Dense packing without breathing room
  • Hero gradient on small elements (buttons)
  • Mono fonts for prose or non-amount content