Design System Inspired by Wise

1. Visual Theme & Atmosphere

Wise’s website is a bold, confident fintech platform that communicates “money without borders” through massive typography and a distinctive lime-green accent. The design operates on a warm off-white canvas with near-black text (#0e0f0c) and a signature Wise Green (#9fe870) — a fresh, lime-bright color that feels alive and optimistic, unlike the corporate blues of traditional banking.

The typography uses Wise Sans — a proprietary font used at extreme weight 900 (black) for display headings with a remarkably tight line-height of 0.85 and OpenType "calt" (contextual alternates). At 126px, the text is so dense it feels like a protest sign — bold, urgent, and impossible to ignore. Inter serves as the body font with weight 600 as the default for emphasis, creating a consistently confident voice.

What distinguishes Wise is its green-on-white-on-black material palette. Lime Green (#9fe870) appears on buttons with dark green text (#163300), creating a nature-inspired CTA that feels fresh. Hover states use scale(1.05) expansion rather than color changes — buttons physically grow on interaction. The border-radius system uses 9999px for buttons (pill), 30px–40px for cards, and the shadow system is minimal — just rgba(14,15,12,0.12) 0px 0px 0px 1px ring shadows.

Key Characteristics:

Wise Sans at weight 900, 0.85 line-height — billboard-scale bold headlines
Lime Green (#9fe870) accent with dark green text (#163300) — nature-inspired fintech
Inter body at weight 600 as default — confident, not light
Near-black (#0e0f0c) primary with warm green undertone
Scale(1.05) hover animations — buttons physically grow
OpenType "calt" on all text
Pill buttons (9999px) and large rounded cards (30px–40px)
Semantic color system with comprehensive state management

2. Color Palette & Roles

Primary Brand

Near Black (#0e0f0c): Primary text, background for dark sections
Wise Green (#9fe870): Primary CTA button, brand accent
Dark Green (#163300): Button text on green, deep green accent
Light Mint (#e2f6d5): Soft green surface, badge backgrounds
Pastel Green (#cdffad): --color-interactive-contrast-hover, hover accent

Semantic

Positive Green (#054d28): --color-sentiment-positive-primary, success
Danger Red (#d03238): --color-interactive-negative-hover, error/destructive
Warning Yellow (#ffd11a): --color-sentiment-warning-hover, warnings
Background Cyan (rgba(56,200,255,0.10)): --color-background-accent, info tint
Bright Orange (#ffc091): --color-bright-orange, warm accent

Neutral

Warm Dark (#454745): Secondary text, borders
Gray (#868685): Muted text, tertiary
Light Surface (#e8ebe6): Subtle green-tinted light surface

3. Typography Rules

Font Families

Display: Wise Sans, fallback: Inter — OpenType "calt" on all text
Body / UI: Inter, fallbacks: Helvetica, Arial

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Mega	Wise Sans	126px (7.88rem)	900	0.85 (ultra-tight)	normal	`"calt"`
Display Hero	Wise Sans	96px (6.00rem)	900	0.85	normal	`"calt"`
Section Heading	Wise Sans	64px (4.00rem)	900	0.85	normal	`"calt"`
Sub-heading	Wise Sans	40px (2.50rem)	900	0.85	normal	`"calt"`
Alt Heading	Inter	78px (4.88rem)	600	1.10 (tight)	-2.34px	`"calt"`
Card Title	Inter	26px (1.62rem)	600	1.23 (tight)	-0.39px	`"calt"`
Feature Title	Inter	22px (1.38rem)	600	1.25 (tight)	-0.396px	`"calt"`
Body	Inter	18px (1.13rem)	400	1.44	0.18px	`"calt"`
Body Semibold	Inter	18px (1.13rem)	600	1.44	-0.108px	`"calt"`
Button	Inter	18px–22px	600	1.00–1.44	-0.108px	`"calt"`
Caption	Inter	14px (0.88rem)	400–600	1.50–1.86	-0.084px to -0.108px	`"calt"`
Small	Inter	12px (0.75rem)	400–600	1.00–2.17	-0.084px to -0.108px	`"calt"`

Principles

Weight 900 as identity: Wise Sans Black (900) is used exclusively for display — the heaviest weight in any analyzed system. It creates text that feels stamped, pressed, physical.
0.85 line-height: The tightest display line-height analyzed. Letters overlap vertically, creating dense, billboard-like text blocks.
“calt” everywhere: Contextual alternates enabled on ALL text — both Wise Sans and Inter.
Weight 600 as body default: Inter Semibold is the standard reading weight — confident, not light.

4. Component Stylings

Buttons

Primary Green Pill

Background: #9fe870 (Wise Green)
Text: #163300 (Dark Green)
Padding: 5px 16px
Radius: 9999px
Hover: scale(1.05) — button physically grows
Active: scale(0.95) — button compresses
Focus: inset ring + outline

Secondary Subtle Pill

Background: rgba(22, 51, 0, 0.08) (dark green at 8% opacity)
Text: #0e0f0c
Padding: 8px 12px 8px 16px
Radius: 9999px
Same scale hover/active behavior

Cards & Containers

Radius: 16px (small), 30px (medium), 40px (large cards/tables)
Border: 1px solid rgba(14,15,12,0.12) or 1px solid #9fe870 (green accent)
Shadow: rgba(14,15,12,0.12) 0px 0px 0px 1px (ring shadow)

Green-tinted navigation hover: rgba(211,242,192,0.4)
Clean header with Wise wordmark
Pill CTAs right-aligned

5. Layout Principles

Spacing System

Base unit: 8px
Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 16px, 18px, 19px, 20px, 22px, 24px

Border Radius Scale

Minimal (2px): Links, inputs
Standard (10px): Comboboxes, inputs
Card (16px): Small cards, buttons, radio
Medium (20px): Links, medium cards
Large (30px): Feature cards
Section (40px): Tables, large cards
Mega (1000px): Presentation elements
Pill (9999px): All buttons, images
Circle (50%): Icons, badges

6. Depth & Elevation

Level	Treatment	Use
Flat (Level 0)	No shadow	Default
Ring (Level 1)	`rgba(14,15,12,0.12) 0px 0px 0px 1px`	Card borders
Inset (Level 2)	`rgb(134,134,133) 0px 0px 0px 1px inset`	Input focus

Shadow Philosophy: Wise uses minimal shadows — ring shadows only. Depth comes from the bold green accent against the neutral canvas.

7. Do’s and Don’ts

Do

Use Wise Sans weight 900 for display — the extreme boldness IS the brand
Apply line-height 0.85 on Wise Sans display — ultra-tight is intentional
Use Lime Green (#9fe870) for primary CTAs with Dark Green (#163300) text
Apply scale(1.05) hover and scale(0.95) active on buttons
Enable “calt” on all text
Use Inter weight 600 as the body default

Don’t

Don’t use light font weights for Wise Sans — only 900
Don’t relax the 0.85 line-height on display — the density is the identity
Don’t use the Wise Green as background for large surfaces — it’s for buttons and accents
Don’t skip the scale animation on buttons
Don’t use traditional shadows — ring shadows only

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	<576px	Single column
Tablet	576–992px	2-column
Desktop	992–1440px	Full layout
Large	>1440px	Expanded

9. Agent Prompt Guide

Quick Color Reference

Text: Near Black (#0e0f0c)
Background: White (#ffffff / off-white)
Accent: Wise Green (#9fe870)
Button text: Dark Green (#163300)
Secondary: Gray (#868685)

Example Component Prompts

“Create hero: white background. Headline at 96px Wise Sans weight 900, line-height 0.85, ‘calt’ enabled, #0e0f0c text. Green pill CTA (#9fe870, 9999px radius, 5px 16px padding, #163300 text). Hover: scale(1.05).”
“Build a card: 30px radius, 1px solid rgba(14,15,12,0.12). Title at 22px Inter weight 600, body at 18px weight 400.”

Iteration Guide

Wise Sans 900 at 0.85 line-height — the extreme weight IS the brand
Lime Green for buttons only — dark green text on green background
Scale animations (1.05 hover, 0.95 active) on all interactive elements
“calt” on everything — contextual alternates are mandatory
Inter 600 for body — confident reading weight