Wise

Overview

Wise is a fintech platform that democratizes international money transfers through radical transparency and speed. The design system embodies "Energetic Pragmatism"—a visual language that pairs vibrant, optimistic greens (#163300 primary, #9ff870 accent) with sophisticated dark typography to convey both trustworthiness and forward momentum. The brand serves globally distributed users who value clarity over complexity: expatriates, freelancers, and businesses sending money across borders. The UI evokes confidence through bold, high-contrast typography (Wise Sans at 900 weight for headlines), generous whitespace, and a carefully calibrated accent system that guides users toward action without overwhelming them.

Wise's voice is direct, jargon-free, and slightly irreverent—never patronizing, always precise. The tone avoids financial industry clichés ("seamless," "cutting-edge") in favor of concrete, benefit-driven language. Example: "Send money to 140+ countries. Most arrive in under 20 seconds. No hidden fees." The design reinforces this clarity through consistent use of high-contrast text (on-surface: #163300 at 900 weight on light backgrounds), generous padding (24px gutters, 12px internal spacing), and a restricted color palette that prevents visual noise.

Colors

The Wise color system is built on three pillars: a deep forest green primary (#163300) that conveys stability and financial trust, a vibrant lime accent (#9ff870) that signals speed and optimism, and a secondary cyan (#00a2dd) for secondary actions and data visualization. Primary (#163300) is reserved exclusively for CTAs (buttons, links, active states) and headline typography; it appears on 48px+ text and interactive elements to command attention. On-primary (#9ff870) is the inverse—used as text color atop the dark green, creating 15:1 contrast for accessibility. The tertiary green (#9ff870) doubles as a secondary button fill and badge background, creating visual rhythm without introducing new hues. Secondary cyan (#00a2dd) supports accent scenarios: secondary CTAs, informational badges,

Typography

The type system uses a two-font strategy: Wise Sans (a custom, geometric sans-serif) for headlines and display text at weights 700–900, and Inter for body copy and labels at weights 400–600. This pairing communicates authority (Wise Sans's bold, architectural letterforms) paired with approachability (Inter's warm, open counters). Display text (86px, 900 weight, -0.04em letter-spacing) is reserved for hero headlines and should never appear below 60px. Headline-lg (48px, 700 weight) is used for section titles and major content blocks. Body-lg (18px, 400 weight, 28px line-height) is the default for marketing copy and long-form content; the 28px line-height (1.56x) ensures readability on mobile and desktop. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text, form labe

Layout

Wise uses a 12-column fluid grid with a maximum container width of 1280px, allowing content to scale gracefully from mobile (320px) to ultra-wide displays (1920px+). The spacing scale is semantic: 24px (md) is the primary gutter for section separation and card padding; 40px (lg) is used between major content blocks (hero to features, features to testimonials); 64px (xl) separates distinct page sections. On mobile (< 768px), gutters compress to 12px (sm) to preserve screen real estate. The layout philosophy prioritizes breathing room: no element should be closer than 12px to its neighbor, and major sections should have at least 40px vertical separation. Container max-width is enforced at 1280px to prevent line lengths from exceeding 75 characters on ultra-wide screens, maintaining readabili

Elevation & Depth

Wise uses a shadow-based elevation system with three discrete levels, avoiding flat design while maintaining clarity. Level 1 (Base/Cards): box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), applied to standard cards, input fields, and default button states. This shadow is subtle (8% opacity black) and creates a 6px vertical offset, suggesting the element is 6px above the surface. Level 2 (Hover/Elevated): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.125), applied on button hover, card hover, and modal overlays. The increased blur (40px) and spread create a softer, more diffuse shadow that suggests greate

Shapes

Wise employs a "Geometric Softness" philosophy: sharp corners are avoided in favor of consistent, generous border-radius values that suggest approachability without sacrificing precision. Buttons use rounded.full (9999px) to create pill-shaped CTAs that feel friendly and clickable; this 9999px value creates a perfect circle/pill regardless of button height (48px primary buttons, 40px secondary buttons). Cards and containers use rounded.lg (1rem / 16px) for a subtle roundness that softens the rectangular form without appearing overly organic. Input fields use rounded.DEFAULT (0.5rem / 8px) for

Components

Action Elements Buttons are the primary interaction mechanism and use a strict two-state system: primary (dark green background, lime text) and secondary (lime background, dark green text). Primary buttons (button-primary) use backgroundColor: {colors.primary}, textColor: {colors.on-primary}, rounded: {rounded.full}, padding: 12px 32px, height: 48px, with box-shadow: 0 2px 8px rgba(22, 51, 0, 0.12). On hover (button-primary-hover), the background shifts to primary-container (#2d5a1a) and shadow increases to 0 4px 12px rgba(22, 51, 0, 0.16); transition timing is 200ms cubic-bezier(0.4, 0, 0.2, 1). Secondary buttons (button-secondary) invert the color scheme: backgroundColor: {colors.tertiary} (#9ff870), textColor: {colors.on-tertiary} (#163300), padding: 8px 20px, height: 40px. Ghost bu

Do's and Don'ts

**Do**

• Do use primary green (#163300) exclusively for CTAs, active states, and headline typography—never for backgrounds or secondary elements.
• Do apply 24px gutters (md spacing) between major content blocks and 12px internal padding within cards to maintain visual breathing room.
• Do use Wise Sans at 700–900 weight for all headlines 24px and above; reserve Inter for body copy and labels.
• Do transition interactive elements (buttons, inputs, cards) with 150–200ms cubic-bezier(0.4, 0, 0.2, 1) easing to convey responsiveness without feeling sluggish.
• Do ensure all text meets WCAG AA contrast ratios: 4.5:1 for body text, 3:1 for large text (18px+, 700 weight).
• Do use rounded.full (9999px) exclusively for buttons and pill-shaped elements; use rounded.lg (16px) for cards and rounded.DEFAULT (8px) for inputs.
• Do apply box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) to cards and default button states; increase to 0 16px 40px rgba(0, 0, 0, 0.125) on hover.

**Don't**

• Don't use secondary cyan (#00a2dd) for primary CTAs or headlines—it's reserved for secondary actions and data visualization only.
• Don't apply rounded corners smaller than 8px (rounded.DEFAULT) to any interactive element; this reduces perceived clickability.
• Don't mix Wise Sans and Inter within a single headline or body paragraph—use one font family per text block.
• Don't use box-shadow with blur > 40px or opacity > 12.5%; this creates visual heaviness and obscures content beneath.
• Don't apply padding < 12px (sm) between elements or inside containers; this creates visual cramping and reduces scannability.
• Don't use color alone to convey status or meaning (e.g., red text for errors without an icon); always pair color with iconography or text labels.
• Don't apply text-shadow to body text or labels; reserve it only for small labels (12px) over busy backgrounds to improve legibility.