Wise

Overview

Wise is a fintech platform that democratizes international money transfers through radical transparency and low costs. The design system embodies 'Energetic Pragmatism'—a visual language that combines the optimism of a vibrant lime-green (#163300 primary, #9fe870 accent) with the trustworthiness of deep navy and cool grays. The brand serves globally mobile individuals, expatriates, and businesses who demand both clarity and speed. The UI evokes confidence through bold typography (Wise Sans at 900 weight for headlines), generous white space, and a deliberately flat, modern aesthetic that avoids skeuomorphism. Users should feel that Wise is simultaneously powerful and approachable—a financial tool that doesn't intimidate.

The tone is direct, jargon-free, and occasionally playful. Wise speaks in active voice, uses concrete numbers ("Save up to 8x on fees"), and avoids corporate hedging. The vocabulary is conversational yet precise: "Send money abroad" not "execute international remittance transactions." The brand personality is confident without arrogance, helpful without condescension. Example sentence in Wise's voice: "We charge what banks pay. You get the real rate, nothing hidden."

Colors

The color system is built on a high-contrast, energetic foundation. Primary (#163300, a deep forest green) is the signature brand color, used exclusively for CTAs, active states, and key interactive elements. It conveys growth, trust, and forward momentum. On-primary (#9fe870, a bright lime) provides crisp contrast for text and icons on primary backgrounds, ensuring WCAG AAA compliance (contrast ratio 8.5:1). Secondary (#00a2dd, a vibrant cyan-blue) is reserved for accent highlights, secondary CTAs, and status indicators—it adds visual interest without competing with primary. Tertiary (#37517e, a muted slate) anchors the system, used for body text, secondary labels, and subtle UI elements.

The surface stack uses near-white and cool grays to maintain clarity: surface (#ffffff) is the defau

Typography

The type system pairs Wise Sans (a custom, geometric sans-serif available in weights 400–900) for headlines with Inter (a neutral, highly legible system font) for body text. This pairing communicates both personality and clarity: Wise Sans at 900 weight (98px for display, 48px for headline-lg) creates commanding visual hierarchy and brand recognition, while Inter at 400 weight (18px for body-lg, 16px for body-md) ensures comfortable reading at any size. Letter-spacing is tight on headlines (-0.04em for display, -0.02em for headline-lg) to create density and impact, while body text uses 0em spacing for natural readability. Line-height scales proportionally: display uses 110px (1.12x), headlines use 1.17x, and body uses 1.5x to 1.67x for comfortable scanning. On small labels over busy backgr

Layout

The layout system uses a 12-column responsive grid with a max-width of 1280px, maintaining consistent gutters of 24px on desktop and 16px on mobile. The spacing scale is semantic: unit (8px) is the baseline, with xs (4px) for micro-spacing, sm (12px) for tight grouping, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Container max-width is enforced at 1280px to prevent line-length from exceeding 75 characters on body text. White space is generous and intentional—sections are separated by lg spacing (40px), cards within sections by md spacing (24px), and elements within cards by sm spacing (12px). The rhythm creates visual breathing room and reduces cognitive load. Breakpoints follow a mobile-first approach: 0px (base), 48

Elevation & Depth

Depth is conveyed through a three-tier shadow system that maintains flatness while creating clear visual hierarchy. Level 1 (Base/Surface): no shadow, flat on the canvas. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used for cards, input fields, and default interactive elements. Level 3 (Elevated/Hover): box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), applied on card-hover and modal overlays. Level 4 (Modal/Overlay): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.125), reserved for modals and floating panels. Shadows use a soft, diffuse blur (8–40px) and low opacity (8–12.5%) to av

Shapes

The shape philosophy is 'Geometric Softness'—sharp enough to feel modern and tech-forward, rounded enough to feel approachable and human. Border-radius follows a deliberate scale: sm (3px) for subtle, almost-sharp edges on small UI elements (checkboxes, small badges), DEFAULT (10px) for cards and standard containers, md (16px) for larger cards and modals, lg (20px) for prominent sections, xl (32px) for hero sections and full-width containers, and full (9999px) for pills and circular elements. Buttons always use full (9999px) to create a distinctive, friendly silhouette. Input fields use DEFAUL

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses primary (#163300) background with on-primary (#9fe870) text, 44px height, 11px vertical / 24px horizontal padding, and full (9999px) border-radius. Font is Inter 600 at 14px. On hover, darken to #0d2200 (10% darker); on active, darken to #0a1a00 (20% darker). Transition all properties over 150ms ease-out. Button-secondary is transparent with a 2px primary border, same padding and height, and reverses on hover to surface-container-low background. Button-accent uses secondary (#00a2dd) for tertiary actions; on hover, shift to #0081ba. Never use more than one primary button per view; secondary and accent buttons support the primary action.

Containers & Surfaces Cards are the fundamental container. Base

Do's and Don'ts

**Do**

• Do use primary (#163300) exclusively for primary CTAs and active states—it's the brand's signature and must remain distinctive.
• Do maintain the 10px default border-radius across cards, inputs, and standard containers for visual cohesion.
• Do apply generous white space (lg spacing, 40px) between major sections to reduce cognitive load and improve scannability.
• Do use Wise Sans 900 for headlines and Inter 400 for body to create clear typographic hierarchy and brand personality.
• Do transition all interactive states (hover, focus, active) over 150–200ms with ease-out timing for smooth, responsive feedback.
• Do enforce max-width 1280px on all containers to maintain optimal line-length (75 characters) and readability.
• Do use the three-tier shadow system (Level 2 for cards, Level 3 for hover, Level 4 for modals) to convey depth without visual noise.

**Don't**

• Don't use secondary (#00a2dd) or tertiary (#37517e) for primary CTAs—they dilute brand recognition and confuse interaction hierarchy.
• Don't mix border-radius values within a single component family (e.g., don't use 16px on some buttons and 10px on others).
• Don't apply shadows to text or icons; reserve shadows for containers and interactive elements only.
• Don't use system fonts (system-ui, -apple-system) for headlines—always specify Wise Sans or Inter to maintain brand consistency.
• Don't exceed 2 font weights per line (e.g., don't combine 600 and 700 in a single heading).
• Don't use hard borders (1px solid) on cards; rely on shadow and background color for visual separation.
• Don't apply more than one primary button per view; use secondary and accent buttons to support the primary action and avoid decision paralysis.