Design System Inspired by Wise
Bold, confident fintech platform with massive typography and a lime-green accent using a warm off-white canvas and near-black text (#0e0f0c). Key features include extreme typography usage, scale(1.05) hover animations, and a minimal shadow system.
Color Palette
Primary Brand
Semantic
Neutral
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Bold, confident fintech platform with massive typography and a lime-green accent using a warm off-white canvas and near-black text (#0e0f0c). Key features include extreme typography usage, scale(1.05) hover animations, and a minimal shadow system.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Elevation & Depth
Do's & Don'ts
Do
Don't
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
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)
### Navigation
• 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
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
1. Wise Sans 900 at 0.85 line-height — the extreme weight IS the brand
2. Lime Green for buttons only — dark green text on green background
3. Scale animations (1.05 hover, 0.95 active) on all interactive elements
4. "calt" on everything — contextual alternates are mandatory
5. Inter 600 for body — confident reading weight
Use with MCP
Don't have the MCP? Install it here