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