design-md-wise
Design System: 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), 30px40px 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 (30px40px)
- Semantic color system with comprehensive state management