--- version: alpha name: "Wise" description: "Wise stripped fintech to one chromatic decision: an unmistakable lime-green `#9fe870` painted onto a warm cream `#fffbf5` canvas. The brand is the colour; the colour is the brand. Where Mercury reaches for a quiet mint and Stripe orchestrates a chromatic dance, Wise commits to a single high-saturation green and lets the rest of the page recede into warm cream and forest text. Inter Display carries the display work and Inter (regular) the body — the system Vercel and Linear made standard, but Wise pairs it with full-pill buttons (radius 9999) that read as friendly rather than technical. The dark-forest `#163300` doubles as ink on the lime button and as the colour of inverted \"money mode\" hero bands, an inversion trick borrowed from Stripe's brand-as-system playbook. The cream canvas is the move that separates Wise from cold neobanks: it suggests paper, ledger, and an everyday object — not the cold blues of legacy finance. Multi-currency banking is reduced to one font, one button shape, one colour — a chromatic restraint as the trust signal." colors: bg: "#fffbf5" bg-soft: "#fbf6ec" bg-tan: "#f4f1eb" bg-cream-strong: "#f9f3e6" bg-forest: "#163300" bg-forest-deep: "#0c1d00" bg-lime-soft: "#dcf3c7" bg-lime-paler: "#ecf8db" surface: "#ffffff" surface-soft: "#faf6ee" surface-tan: "#f4f1eb" surface-forest: "#163300" surface-forest-soft: "#1f4400" text: "#0e0f0c" text-strong: "#163300" text-body: "#1c1d18" text-muted: "#37513e" text-muted-warm: "#677378" text-soft: "#8a8a85" text-faint: "#b0b0a8" text-on-forest: "#fffbf5" text-on-forest-soft: "#a3b39a" text-on-brand: "#163300" brand: "#9fe870" brand-strong: "#8edc60" brand-hover: "#92e066" brand-deep: "#163300" brand-soft: "#dcf3c7" brand-tint: "rgba(159, 232, 112, 0.16)" brand-glow: "rgba(159, 232, 112, 0.32)" accent: "#37513e" accent-strong: "#1f4400" accent-warm: "#f1c84d" accent-warm-soft: "rgba(241, 200, 77, 0.15)" on-brand: "#163300" on-forest: "#fffbf5" link: "#163300" link-hover: "#0c1d00" border: "rgba(22, 51, 0, 0.10)" border-soft: "rgba(22, 51, 0, 0.06)" border-strong: "rgba(22, 51, 0, 0.18)" border-on-forest: "rgba(255, 251, 245, 0.14)" shadow-ambient: "rgba(22, 51, 0, 0.04)" scrim: "rgba(22, 51, 0, 0.50)" success: "#1a7f3a" success-soft: "rgba(26, 127, 58, 0.10)" warning: "#f1c84d" warning-soft: "rgba(241, 200, 77, 0.18)" danger: "#9a1f1f" danger-soft: "rgba(154, 31, 31, 0.10)" info: "#163300" info-soft: "rgba(22, 51, 0, 0.06)" typography: display: fontFamily: "Inter Display" fontSize: "88px" lineHeight: 1.55 letterSpacing: "-0.03em" body: fontFamily: "Inter" fontSize: "17px" lineHeight: 1.55 mono: fontFamily: "IBM Plex Mono" rounded: button: "12px" card: "16px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "40px" xl: "64px" --- ## Overview ## Overview Wise's marketing surface answers "international banking" with a single chromatic gesture: a bright lime green `#9fe870` painted onto a cream `#fffbf5` canvas. There's no second accent, no chromatic system, no secondary brand colour to manage. Every primary CTA is the same rounded green pill; every headline is forest-green Inter Display at 600; every illustration borrows the same lime as a fill, never as decoration. The discipline is total — and the brand reads, paradoxically, as more confident *because* of the restraint. A multi-stop palette would dilute the chromatic impact; a single colour at full saturation, used everywhere it should be and nowhere it shouldn't, becomes the brand's most recognisable asset. The cream canvas is the move that separates Wise from cold neobanks. Pure white reads as Plaid or Stripe — clean, technical, slightly cold. Cool grey reads as Brex or Linear — modern, neutral, but distant. Cream `#fffbf5` reads as **paper**: a ledger page, a bank statement, an everyday physical object that carries trust through tactility. The cream canvas is what makes Wise feel like an extension of the analogue financial world rather than a replacement for it. It signals approachable-and-friendly without sliding into consumer-app aesthetics; it signals trustworthy-and-stable without the corporate iciness of legacy banking. The result is a site that reads more like a **product manual** than a campaign — restrained, almost stubborn, in its commitment to one colour. Compared to legacy banking blues or fintech purple-gradients, Wise's cream-and-lime feels like an everyday object: a green pen on a ledger page. The forest-green type (`#163300`) is the third decision: dark enough to read as type-grade, green enough to harmonise with the lime accent, warm enough to belong on the cream canvas. The colour-only commitment compounds: cream + lime + forest text creates a chromatic system in which everything belongs because everything is green, even the dark — only the saturation and luminance differ. The atmospheric vocabulary that captures Wise's feeling: *cream-and-lime, ledger-paper, multi-currency-native, Inter-Display-tracked-warm, forest-text-not-black, full-pill-friendly, mono-caps-currency, banking-as-everyday-object, Stripe-restraint-in-green, neobank-without-blue, brand-as-single-colour, FX-rate-as-product-feature.* Every surface lands like it was designed by an in-house brand team that decided the brand differentiator would be *one colour, used with extreme discipline*, on a canvas that signalled *paper, not screen*. The fourth register is the **discipline of the cream canvas + lime pill + forest text triad**. The brand is mathematically constrained to three colours plus a tan-grey panel and a dark-forest inverted band. There is no fourth colour. The yellow accent (`#f1c84d`) appears only inside illustrations as an editorial highlight; it is not a brand colour. The chromatic tightness is what gives Wise its instantly-recognisable quality — when a Wise page appears in your peripheral vision, you know it's Wise from the colour pair alone, the way you might recognise a Penguin Classics book cover from across a bookstore. **Key Characteristics** - Warm cream `#fffbf5` canvas — the brand neutral, not pure white - Signature lime green `#9fe870` — used only as CTA fill, illustration accent, never as type - Dark-forest `#163300` — display headline colour and inverted hero-band ground - Tan-grey `#f4f1eb` — quiet panel for FAQ, comparison tables, supporting blocks - Inter Display at 600 weight — display copy, slightly softer than Linear's 700 - Inter regular at 17px / 1.55 line-height — body bumped up half a step from default 16 - IBM Plex Mono — currency codes, FX rate displays, status pills - Full-pill button radius (9999) — non-negotiable, the friendliness signal - 16px primary card radius — softer than Brex's 16 + harder than Mercury's 18 - 1200px max page width with 24px container gutters - 96px section padding for major bands — generous but not extreme - 48px button height — slightly taller than the 44px SaaS-consensus, signals approachable-and-confident - Lime focus ring — the brand chroma extends into every focus event - Optional dark mode — forest canvas with cream type, lime button preserved exactly ## Colors ### Primary - **Canvas** (`#fffbf5`): warm cream off-white. The brand neutral — distances Wise from cold neobanks. The whole brand sits on this ground. - **Cream Soft** (`#fbf6ec`): softer cream tier for elevated panels. - **Tan Panel** (`#f4f1eb`): quiet tan-grey panel tone — used for FAQ blocks, comparison tables, supporting blocks. The third tier in the warm-neutral system. - **Cream Strong** (`#f9f3e6`): deeper cream for sectional emphasis (newsletter, dense blocks). - **Text** (`#0e0f0c`): near-black warm body text — slight green-warmth in the deep, harmonises with forest headlines. - **Text Strong (Forest)** (`#163300`): the brand's signature display colour. Forest-green at this saturation reads as type-grade rather than decorative. Used for all display headlines, links, and ink on the lime button. ### Brand & Sub-Brand - **Brand Lime** (`#9fe870`): the signature accent — fluorescent-leaning lime green. Used only as CTA fill, illustration accent, status pill ground. Never as a foreground colour. - **Brand Strong** (`#8edc60`): pressed-state lime, slightly desaturated. - **Brand Hover** (`#92e066`): hover-state lime, between brand and brand-strong. - **Brand Deep (Forest)** (`#163300`): the dark forest doubles as the ink on the lime button and as the inverted-band ground. The pair is the brand's full chromatic system. - **Brand Soft** (`#dcf3c7`): tonal wash for chips, illustration backgrounds. - **Brand Tint** (`rgba(159, 232, 112, 0.16)`): subtle lime wash for hover states, selected nav. - **Brand Glow** (`rgba(159, 232, 112, 0.32)`): focus glow colour, lime translucent ring. ### Accent (Supporting) - **Accent (Deep Green)** (`#37513e`): supporting deep-green accent. Used for muted text, secondary chips. Not a brand colour, but a darker tier of the green family. - **Accent Strong (Deeper Forest)** (`#1f4400`): deeper supporting forest, used for elevated dark cards. - **Accent Warm (Yellow)** (`#f1c84d`): editorial yellow accent observed in illustration only. Not a brand colour, never a CTA, never type. Appears as a fill inside illustration vignettes. The accent system is **disciplined**. The yellow appears only inside illustration; it never becomes a brand colour. The deep forest is a darker tier of the lime family; it doesn't introduce a new chromatic axis. The whole palette stays within green, with a single warm-yellow editorial flourish reserved for illustration only. ### Interactive - **Link** (`#163300` with optional underline): inline body links use forest-green at the same colour as headlines. Hover deepens to `#0c1d00` and underline appears (or thickens if already present). - **Link Hover**: deeper forest `#0c1d00` with underline. - **Selected** (`#163300` text on `rgba(159, 232, 112, 0.16)` background): selected nav, active filter chip — lime tint with forest text. - **Disabled** (`#b0b0a8`): faint warm-grey for disabled controls. - **Focus** (3px `rgba(159, 232, 112, 0.32)` ring + 2px outline-offset): lime translucent ring. The brand chroma extends into every focus event. ### Neutral Scale The neutral ramp is warm-cream-to-forest: - **Cream Canvas** (`#fffbf5`) — page background - **Cream Soft** (`#fbf6ec`) — elevated panel - **Tan Panel** (`#f4f1eb`) — quiet panel for FAQ, comparison - **Cream Strong** (`#f9f3e6`) — sectional emphasis - **Border Soft** (`rgba(22, 51, 0, 0.06)`) — quiet divider, forest-tinted - **Border Default** (`rgba(22, 51, 0, 0.10)`) — 10% forest hairline (never grey) - **Border Strong** (`rgba(22, 51, 0, 0.18)`) — focused inputs - **Text Faint** (`#b0b0a8`) — placeholder, disabled - **Text Soft** (`#8a8a85`) — eyebrow secondary - **Text Muted Warm** (`#677378`) — captions / metadata, warm grey - **Text Muted (Forest)** (`#37513e`) — supporting muted forest - **Text Body** (`#1c1d18`) — body paragraph - **Text** (`#0e0f0c`) — primary body - **Text Strong (Forest)** (`#163300`) — display headlines The neutral ramp's distinguishing feature is that **borders are forest-tinted rather than grey**. A 10% forest hairline at `rgba(22, 51, 0, 0.10)` reads warmer than a neutral grey would, and harmonises with the cream canvas. This is the brand's most considered chromatic detail — every divider belongs to the green family. ### Surface & Borders - **Cream Canvas** (`#fffbf5`) — page background - **White Surface** (`#ffffff`) — default card surface (pure white card on cream canvas) - **Surface Soft** (`#faf6ee`) — softer card alternative - **Tan Panel** (`#f4f1eb`) — quiet tan-grey panel surface - **Forest Surface** (`#163300`) — dark-forest card surface for inversion - **Forest Soft** (`#1f4400`) — softer forest for elevated dark cards - **Border Default** (`rgba(22, 51, 0, 0.10)`) — 10% forest hairline rule - **Border Soft** (`rgba(22, 51, 0, 0.06)`) — quieter separation - **Border Strong** (`rgba(22, 51, 0, 0.18)`) — focused inputs - **Border On-Forest** (`rgba(255, 251, 245, 0.14)`) — cream hairline on forest band ### Shadow Colors Wise uses **forest-tinted shadows** (`rgba(22, 51, 0, …)`) — the brand chroma extends into the shadow tones, keeping the page coherent. The signature card shadow is `rgba(22, 51, 0, 0.06) 0 2px 8px` — a quiet 2px drop with 8px blur, low opacity, intentionally subtle. It gives feature cards a slight float without stepping into consumer-app territory. On primary CTAs, the shadow gets a **lime-glow** treatment: `rgba(159, 232, 112, 0.32) 0 8px 24px -8px` — lime-tinted, used under the primary lime button to extend the brand chroma into the surrounding negative space. - `rgba(22, 51, 0, 0.04) 0 1px 2px` — ambient - `rgba(22, 51, 0, 0.06) 0 2px 8px` — card (the signature quiet drop) - `rgba(22, 51, 0, 0.10) 0 8px 24px -4px` — card-hover (lifts on hover) - `rgba(22, 51, 0, 0.10) 0 12px 32px -8px` — elevated dropdown - `rgba(22, 51, 0, 0.12) 0 16px 40px -16px` — popover - `rgba(22, 51, 0, 0.20) 0 24px 64px -16px` — modal - `rgba(159, 232, 112, 0.32) 0 8px 24px -8px` — brand glow under primary CTA ### Semantic - **Success** (`#1a7f3a` on `rgba(26, 127, 58, 0.10)`): forest-green confirmation — naturally harmonises with the brand lime. *"Transfer complete"*. - **Warning** (`#f1c84d` on `rgba(241, 200, 77, 0.18)`): the brand's editorial yellow doubles as warning — used for FX rate volatility, expiring offers. - **Danger** (`#9a1f1f` on `rgba(154, 31, 31, 0.10)`): ink-red error, restrained. - **Info** (`#163300` on `rgba(22, 51, 0, 0.06)`): info reads as plain forest with optional underline — the same convention as inline links. The semantic palette stays disciplined: success is forest (the brand family), warning is the editorial yellow (the only non-green accent, used only here and inside illustrations), danger is a restrained ink-red. The semantic colours never clash with the brand chroma because they all belong either to the green family or to a single non-green editorial accent. ## Typography ### Font Family **Primary**: `"Inter Display", "Helvetica Neue", Helvetica, Arial, sans-serif`. **Inter Display** is the variable-font display variant of Inter, designed by Rasmus Andersson — a humanist sans-serif optimised for screen rendering. Used at weight 600 for display copy with `-0.025em` letter-spacing. The slightly more open weight (vs. 700) plus mild negative tracking gives Wise a friendlier, more humanist tone than Linear's denser headlines. The fallback chain runs Helvetica Neue → Helvetica → Arial; Inter is the default in modern browsers. **Body**: `Inter, "Helvetica Neue", Helvetica, Arial, sans-serif`. Inter regular (the same family as Inter Display, but optimised for body sizes) carries paragraph copy at 17px with 1.55 line-height. The body type is bumped up half a step from the typical 16px to make legibility the dominant sensation — Wise's audience reads dense financial copy (FX rates, fee schedules, transfer details), and the larger body size signals *we expect you to read this carefully*. **Mono companion**: `"IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace`. **IBM Plex Mono** is the brand's mono companion — used for currency codes (USD, GBP, EUR), FX rate displays, status pills, and developer-facing copy. The choice of Plex Mono over JetBrains Mono is deliberate: Plex is the slightly more humanist mono (designed by IBM with Bold Monday), reading as approachable-mono rather than dev-tool-mono. The fallback chain runs JetBrains Mono → ui-monospace → SF Mono → Menlo. **OpenType features**: Inter renders with `kern` and `liga` always on. `cv11` enables the alternate single-storey `a` for slightly friendlier display copy. Plex Mono adds `liga`, `tnum` (tabular figures for FX rate column alignment), and `zero` (slashed zero for code clarity). The discipline: weight 600 across all display copy, weight 400 for body, weight 500–600 split for nav and labels. The display + body family share the same tonal warmth (Inter Display is the same humanist proportions as Inter, just optimised for larger sizes). This single-family system is what makes Wise read as cohesive — the brand doesn't manage two type families like Mercury's serif/sans split. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |------|------|------|--------|-------------|----------------|-------------|-------| | display-hero | Inter Display | 88px | 600 | 0.98 | -0.03em | cv11 | The largest hero variant — landing page only | | display-xl | Inter Display | 72px | 600 | 1.05 | -0.025em | — | The canonical Wise H1 — most pages | | display-lg | Inter Display | 56px | 600 | 1.08 | -0.02em | — | Section opener | | h1 | Inter Display | 48px | 600 | 1.10 | -0.02em | — | Sub-page title | | h2 | Inter Display | 36px | 600 | 1.15 | -0.015em | — | Marketing section H2 | | h3 | Inter Display | 28px | 600 | 1.20 | -0.01em | — | Card heading, sub-section | | h4 | Inter Display | 22px | 500 | 1.30 | -0.005em | — | Sub-card heading — note weight drops to 500 | | h5 | Inter Display | 18px | 500 | 1.40 | 0 | — | Inline emphasis | | eyebrow | IBM Plex Mono | 13px | 500 | 1.40 | 0.02em | uppercase | Section pre-label | | section-label | IBM Plex Mono | 14px | 500 | 1.40 | 0.02em | uppercase | Marketing section eyebrow | | body-lg | Inter | 20px | 400 | 1.55 | 0 | — | Hero deck, lede paragraph | | body-md | Inter | 17px | 400 | 1.55 | 0 | — | Default body — note the bump from 16 | | body-sm | Inter | 14px | 400 | 1.50 | 0 | — | Card body, dense rows | | caption | Inter | 13px | 400 | 1.40 | 0 | — | Image caption, footer micro | | caption-mono | IBM Plex Mono | 13px | 500 | 1.40 | 0 | tnum | FX values, dashboard meta | | label | Inter | 13px | 500 | 1.30 | 0 | — | Form field label | | label-mono | IBM Plex Mono | 12px | 500 | 1.30 | 0.02em | uppercase | Mono caps label | | button-md | Inter | 16px | 600 | 1.20 | 0 | — | Default CTA copy | | button-sm | Inter | 14px | 600 | 1.20 | 0 | — | Compact button | | fx-display | IBM Plex Mono | 56px | 500 | 1.0 | -0.02em | tnum, zero | FX rate hero display | | fx-display-sm | IBM Plex Mono | 32px | 500 | 1.0 | -0.015em | tnum, zero | FX rate inside card | | quote-pull | Inter Display | 28px | 500 | 1.30 | -0.01em | — | Pull quote inside forest band | | code-inline | IBM Plex Mono | 14px | 500 | 1.40 | 0 | — | Inline `code` reference | ### Principles - **Weight 600 + `-0.025em` tracking is the brand voice.** Inter Display at 600 with mild negative tracking is the canonical Wise display. Drop to 500 and the page reads as Vercel-restraint; push to 700 and it reads as Linear-density. The 600/`-0.025em` pair is the precise sweet spot. - **Single-family system with mono companion.** Inter Display + Inter (body) + IBM Plex Mono cover everything. Adding a serif (Mercury territory) breaks the brand's humanist-sans commitment. - **Body holds at weight 400.** Body never goes 500 except for nav links and labels. The 400-vs-600 split is the brand's hierarchy logic. - **17px body, 1.55 line-height.** Slightly larger than the typical 16px and optimised for reading dense financial copy. The body-bump is a discipline detail. - **Negative tracking compresses with size.** `-0.03em` at 88px, `-0.025em` at 72px, `-0.02em` at 48–56px, `-0.015em` at 36px, `-0.01em` at 28px, near-zero below 22px. - **Mono caps for eyebrows, currency codes, FX values.** IBM Plex Mono at 12–14px / 0.02em tracking is the brand's secondary-identity tell. The slight mono tracking (0.02em vs. Brex's 0.06em) reads as approachable rather than industrial. - **`tnum` enabled in FX displays.** Tabular numerals make FX rate columns align column-wise — a polish detail that signals corporate-grade attention. The slashed `zero` adds clarity in code references. - **Forest text, not black.** Display headlines are `#163300` forest-green, not pure black. The forest tone harmonises with the brand lime; pure black would feel out of family. - **Inter (not Söhne) is the discipline.** Inter Display + Inter is the system Vercel and Linear made standard; Wise inherits it. Söhne (Brex / Ramp signal) would shift the brand toward neo-grotesque coldness. ## Layout ### Spacing System - Base unit: **4px** (with 8px rhythm enforced for major spacing) - Scale: `4 · 8 · 12 · 16 · 24 · 32 · 40 · 48 · 64 · 96 · 128 · 160 · 192` - Section padding (vertical): **96px** for major marketing bands; 64px between minor sections; 24–32px between content blocks - Card internal padding: **32px** on default cards; 40px on featured pricing cards; 24px on compact tiles - Inter-card gutters: 24px between cards in 3-up; 16px in dense 4-up - Forest band padding: **96px vertical** — generous breathing on the chromatic inversion ### Grid & Container - Max content width: **1200px** with 24px gutters — slightly tighter than Brex's 1280 - 12-column grid; hero blocks span full width inside the container; feature grids span 4-3-2-1 columns by breakpoint - Reading column caps at **720px** for prose-heavy content (case studies, blog posts) - Hero treatment: cream canvas with 72–88px / 600 H1 left-aligned, deck below at 20px / 400, dual CTA pair (lime primary + outlined secondary), product imagery (often a phone mockup) on the right ### Whitespace Philosophy The page breathes — 96px section padding is generous by SaaS standards but slightly tighter than Ramp's 128px. The whitespace is part of the brand's "everyday object" pitch — Wise wants to feel approachable-and-considered, not crowded-and-busy nor distant-and-institutional. The cream canvas amplifies the breathing room: the warmth of the cream makes the negative space feel comfortable rather than clinical. A pure-white canvas with the same 96px padding would read as colder. ### Section Cadence A typical Wise page runs: 1. **Hero** — `#fffbf5` cream canvas with mono-caps eyebrow, 72–88px / 600 forest H1 left-aligned, 20px / 400 body deck, dual CTA pair (lime pill primary + outlined secondary), Send Money widget or product imagery on the right 2. **Feature Grid** — `#fffbf5` cream band with white feature cards in 3-up, hairline borders, quiet shadows, 28px / 600 card titles + 17px / 400 body 3. **Forest Band (Inversion)** — `#163300` full-bleed dark-forest band with cream type, customer testimonial in Inter Display 28px / 500, lime pill CTA inside 4. **FX Comparison Table** — `#fffbf5` cream canvas with comparison table card (20px radius, hairline border), mono numerals, lime checkmarks 5. **Tan Panel (FAQ)** — `#f4f1eb` tan-grey panel with FAQ accordion, soft and approachable 6. **Customer Logo Grid** — `#fffbf5` cream band with monochrome customer logos (12 logos, 4-up at desktop) 7. **Pricing Cards** — 3-up white cards on cream canvas; featured tier highlighted with lime-soft tint 8. **Closing CTA** — Centered lime pill on cream canvas, single dominant action 9. **Footer** — `#163300` forest inversion, multi-column link grid in 14px / 400 cream-soft on forest The "alternation" is *cream + cream + forest moment + cream + tan + cream + forest footer*. The cream is the dominant ground; the forest provides chromatic inversion at strategic moments; the tan provides a third quieter ground. ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Top nav collapses to logo + Get Started + hamburger; hero H1 drops 88→44px; cards 1-up; Send Money widget stacks vertically; comparison table scrolls horizontally | | Tablet | 640–1024px | Top nav keeps inline links; hero H1 at 56–64px; cards 2-up; Send Money widget remains horizontal | | Desktop | 1024–1200px | Full nav with mega-menu; hero H1 at 72–88px; cards 3-up; pricing tiers 3-up | | Wide | 1200–1440px | Content width caps at 1200; gutters absorb the rest | | Ultra | >1440px | Page locks to 1200; gutters expand to 64px | ### Touch Targets - Buttons: **48px minimum height** across all sizes — taller than Apple HIG's 44px, signals approachable-and-confident - Top-nav links: 44×44px tap area even at 16px text - Currency code chips: 32px visual but 12px vertical padding for 44px effective - FAQ accordion headers: 48px height - Pricing tier toggle: 48×48px segmented-control thumb ### Collapsing Strategy - **Top nav** at <1024px: primary nav links collapse into hamburger sheet; lime *Get started* CTA stays visible - **Hero CTA pair** at <640px: stacks vertically (lime primary above, outlined secondary below) - **Send Money widget** at <640px: from-row + to-row stack vertically; FX rate display moves below - **Card grids**: 4 → 3 → 2 → 1 columns - **Pricing cards** at <1024px: stack vertically; featured tier remains prominent - **Comparison table** at <1024px: horizontal scroll with sticky first column - **Customer logo grid**: 4 → 3 → 2 columns; logos render monochrome at all sizes ### Image Behavior Customer logos use SVG with `currentColor` (forest tint). Product imagery (phone mockups, dashboard previews) uses `aspect-ratio` to prevent layout shift. Marketing illustrations use `srcset` with 1x/2x/3x. Country flags inside currency selectors use SVG flags rendered at 24×16 with rounded 2px corners. ### Container Queries Used inside the Send Money widget: when widget width crosses 480px, from-currency and to-currency rows render side-by-side; below that, they stack vertically. Used in pricing cards: when card width crosses 320px, feature list moves below the CTA; at narrower widths, content stacks. ## Elevation & Depth | Level | Treatment | Use | |-------|-----------|-----| | 0 — Flat | no shadow, hairline only | Page canvas, body sections, dense data | | 1 — Hairline | 1px `rgba(22, 51, 0, 0.10)` border | Pricing cards, dense data tiles | | 2 — Quiet Card | hairline + `rgba(22, 51, 0, 0.06) 0 2px 8px` | Default feature cards (the signature) | | 3 — Card Hover | hairline + `rgba(22, 51, 0, 0.10) 0 8px 24px -4px` + 2px translate-up | Hover state on cards | | 4 — Brand Glow | `rgba(159, 232, 112, 0.32) 0 8px 24px -8px` | Under primary lime CTAs | | 5 — Elevated | `rgba(22, 51, 0, 0.10) 0 12px 32px -8px` | Dropdowns, popover menus | | 6 — Modal | scrim `rgba(22, 51, 0, 0.50)` + `rgba(22, 51, 0, 0.20) 0 24px 64px -16px` | Transfer dialogs, confirmation modals | ### Shadow Philosophy Wise uses **two distinct shadow languages**: the *forest-tinted neutral* shadow (`rgba(22, 51, 0, 0.06) 0 2px 8px`) for content cards, and the *lime brand-glow* (`rgba(159, 232, 112, 0.32) 0 8px 24px -8px`) for primary CTAs. The neutral shadow is intentionally quiet — low opacity, modest spread, no aggressive multi-layer lift. It gives cards a sense of *floating slightly* without the consumer-app heavy lift. The lime brand-glow is the ambitious move. By tinting the shadow under the primary CTA with the brand lime, Wise extends the chroma into the negative space below the button. The effect is subtle but compounding: the CTA doesn't just sit on the page; it *radiates* lime into its surroundings. Most fintech brands use neutral shadows under CTAs; Wise's lime-tinted glow is one of its most distinctive micro-moves. The shadow philosophy also reinforces the warm-and-cohesive palette. The forest-tinted neutral shadow harmonises with the cream canvas (rather than introducing a cold grey-tinted shadow that would clash chromatically). Every shadow tone belongs to the green family — the lime glow for action, the forest-tint for content, the deeper forest for modal scrim. ## Shapes | Tier | Value | Use | |------|-------|-----| | Micro | 4px | Decorative dividers, focus indicators inside chips | | XS | 6px | Status badges, tag chips | | SM | 8px | Small chips, code blocks | | MD | 12px | Inputs, secondary cards | | LG | 16px | Primary cards — the brand default | | XL | 20px | FX rate cards, comparison cards | | Hero | 24px | Major hero panels, send-money widgets | | Pill | 9999px | All buttons, currency chips — non-negotiable | Wise's signature pairing is **16px primary cards + 12px inputs + 9999px buttons**. The radius differential (cards rounder than inputs) is a deliberate signal: cards are *content surfaces* (rounder for warmth); inputs are *interactive surfaces* (slightly tighter for precision); buttons are *call-to-action moments* (full pill for friendliness). The full-pill button is non-negotiable — square or 8px-radius CTAs would shift Wise into Plaid (cool enterprise) territory. The radius ladder is friendlier than Brex's (which lands at 8/16) and slightly tighter than Mercury's (which lands at 18/24). Wise occupies the *humanist-modern* middle: rounded enough to read approachable, tight enough to read structured. The 24px hero radius is reserved for the largest hero panels and send-money widgets — major sectional shells. ## Components ### Buttons **Primary Lime Pill** — The signature button. Background: `#9fe870` brand lime. Text: forest `#163300` at 16px / 600 in Inter, **9999px radius (full pill)**, 14×24px padding, **48px height** (taller than the 44px SaaS consensus — the brand reads as approachable-and-confident). Brand-glow shadow optional: `rgba(159, 232, 112, 0.32) 0 8px 24px -8px`. On hover: background shifts to `#92e066` and button translates 1px upward over 200ms standard. Use case: *Send money*, *Get started*, *Open account*, *Sign up* — the brand-defining element. **Secondary Outlined Pill** — `transparent` fill, forest text at 16px / 600, 1px solid `#163300` border (full forest, not a soft grey), 9999px radius, 48px height, 14×24px padding. Hover: background fills `rgba(22, 51, 0, 0.04)` cream-tint, border colour unchanged. Use case: *Sign in*, *Watch demo*, *See pricing* — paired adjacently with the primary. **Ghost Pill** — Transparent background, forest text at 16px / 500, 9999px radius, 10×16px padding. Hover fills `rgba(22, 51, 0, 0.04)`. Use case: nav links, footer secondaries, in-card secondary actions. **Pill on Forest Band** — Same `#9fe870` fill / `#163300` text as primary, used inside the dark-forest inverted band. The chroma carries through inversion — the lime stands out *more* on the dark ground than on the cream canvas. ### Cards **Default Feature Card** — `#ffffff` pure white fill on the cream canvas, 1px hairline border at `rgba(22, 51, 0, 0.10)` (10% forest), **16px radius**, 32px padding, signature quiet shadow `rgba(22, 51, 0, 0.06) 0 2px 8px`. The dominant card across feature grids, customer logos, partner directories. Hover: shadow lifts to `0 8px 24px -4px` and translates 2px upward over 200ms. **Tan Inset Card** — `#f4f1eb` tan-grey fill, no border, 16px radius, 32px padding. Used for FAQ blocks, comparison tables, code-tour callouts. The tan-grey fill provides separation from the cream canvas without needing a border. **Forest Card (Dark)** — `#163300` dark-forest fill, cream `#fffbf5` text, 1px border at `rgba(255, 251, 245, 0.10)`, 16px radius, 32px padding. Used on inverted "money mode" hero band for testimonials and featured stats. The forest card is a *moment*, not a pattern. **FX Rate Card** — `#ffffff` fill, 1px hairline border, **20px radius** (slightly relaxed for emphasis), 32px padding. Inside: currency code chips (USD, GBP, EUR) in IBM Plex Mono with `tnum`, FX rate in 32px Plex Mono `tnum`, real-time tick animation when rate updates. ### Pricing Cards **Default Tier** — Default card geometry (white fill, hairline border, soft shadow, 16px radius, 32px padding). Tier name in Inter Display 22px / 500. Pricing display in IBM Plex Mono 32px / 500 with `tnum`. Feature list with lime checkmarks. Outlined secondary CTA at the bottom. **Featured Tier** — Replaces default with a thicker lime-soft `#dcf3c7` background tint and a `#9fe870` 1px border at half opacity. "MOST POPULAR" mono-caps eyebrow at the top in IBM Plex Mono 12px / 500 / 0.02em / uppercase in forest text. Lime pill CTA at the bottom. ### Badges, Tags, Pills **Status Pill (Lime Soft)** — `#dcf3c7` brand-soft fill, forest text at 12px / 500 in IBM Plex Mono uppercase with `0.02em` tracking, 6px radius, 4×10px padding. Use case: `NEW`, `FEATURED`, `BETA`. **Currency Code Chip** — `#ffffff` white fill, forest text at 13px / 500 in IBM Plex Mono, 1px `rgba(22, 51, 0, 0.10)` hairline border, **9999px radius (full pill)**, 4×12px padding. Use case: USD, GBP, EUR, AUD, JPY currency code labels. The full-pill chip + mono caps is the FX-product-page signature. **Mono Caps Eyebrow** — No chrome, just type. IBM Plex Mono 13px / 500 / uppercase / `0.02em` in `#37513e` muted forest. Sits above section headlines. ### Inputs / Forms **Text Input** — `#ffffff` fill, near-black text at 16px / 400 in Inter, 1px border at `rgba(22, 51, 0, 0.18)`, **12px radius** (slightly softer than the 16px card to signal *interactive surface*), 48px height, 14×16px padding. Placeholder colour at `#677378` warm-muted. On focus: border shifts to `#9fe870` brand lime and a 3px translucent lime ring appears (`rgba(159, 232, 112, 0.32) 0 0 0 3px`). **Currency Select** — Same shape as text-input with a chevron icon at right and the currency code chip embedded inside (`USD ▾`). **Amount Input** — Larger variant: 64px height, 24px / 600 Inter mono-aligned (`tnum` enabled) for currency amount entry, 16px radius. Used in the hero send-money widget. ### Navigation **Top Nav** — `rgba(255, 251, 245, 0.92)` translucent cream fill with `backdrop-filter: blur(12px)`, **64px height**, 1px bottom hairline at `rgba(22, 51, 0, 0.10)` that appears after scroll > 8px. Wise wordmark left in Inter Display 20px / 600 forest. Center: nav links (Personal, Business, About, Help) at 16px / 500 ghost-button style. Right: ghost `Sign in` + primary lime `Get started` button. **Footer** — `#163300` forest inversion band — the brand commits to forest as the closing-emphasis colour. 96px top padding, multi-column link grid in Inter 14px / 400 in `#a3b39a` soft-on-forest. Wordmark + social icons + legal links at the bottom. ### Optional / Decorative **Send Money Widget** — Hero feature: cream canvas with white card, 16px radius, 32px padding. Inside: from-currency input (large 64px amount field + currency chip select), to-currency input, FX rate display in Plex Mono 32px / 500 `tnum`, lime pill *Send money* CTA at the bottom. **Comparison Table** — White cream-stripe-cream alternating rows. Headers in IBM Plex Mono 12px / 500 / 0.02em / uppercase forest. Pricing values in IBM Plex Mono 16px / 500 with `tnum` enabled. Lime checkmarks for available features, muted dashes for unavailable. **Pull Quote (Forest Band)** — `#163300` background, cream text in Inter Display 28px / 500 / `-0.01em`, max-width 920px, centred. The chromatic inversion moment. **Modal** — `#ffffff` fill, 16px radius, 32px padding, modal shadow stack. Backdrop scrim at `rgba(22, 51, 0, 0.50)` (forest-tinted). Max-width 520px for confirmations, 720px for transfer dialogs. **Toast** — `#ffffff` fill, hairline border, 12px radius, 12×16px padding. Icon + message in Inter 14px / 400 + dismiss button. Brand-lime accent for info, success-forest for confirmations, danger-red for errors. ### Easing Curves - **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, color transitions - **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; modal entry, hero reveal - **Out-Soft**: `cubic-bezier(0.0, 0, 0.2, 1)` — gentle settle; dropdown reveal, FX rate tick ### Duration Buckets | Bucket | Value | Use | |--------|-------|-----| | Fast | 100ms | Link colour swaps, focus ring fade-in | | Standard | 200ms | Button hover (background shift + 1px translate), card hover | | Slow | 300ms | Modal entry, dropdown reveal, scroll-reveal | | Page | 400ms | Route transitions | | FX Tick | 800ms | Currency rate digits roll over when rate updates (mono-aligned, tnum) | ### Per-Component Recipes - **Link hover**: colour `#163300` → `#0c1d00` over 100ms standard; underline appears in 100ms (or thickens if already present). - **Primary lime CTA hover**: background `#9fe870` → `#92e066` and button translates 1px upward over 200ms standard. Brand-glow shadow intensifies from `0.32` to `0.48` opacity. The lime stays the lime — the *light around it* changes. - **Secondary outlined button hover**: background fills `rgba(22, 51, 0, 0.04)` cream-tint over 200ms; border colour unchanged. - **Card hover**: shadow lifts from `0 2px 8px` to `0 8px 24px -4px` and card translates 2px upward over 200ms standard. - **FX rate tick**: when the FX rate updates from a backend feed, individual digits roll over 800ms ease-out-soft using `font-variant-numeric: tabular-nums` for column-perfect alignment. The rolling digit animation is a brand-signature interaction — it makes FX rates feel *live* and *real-time*. - **Scroll-reveal**: marketing-page sections fade in over 300ms ease-out-soft when entering viewport at 80% threshold. - **Modal entry**: backdrop scrim fades in over 200ms; modal content fades + scales from 0.96 to 1.0 over 300ms ease-emphasized. - **Dropdown reveal**: fades in over 200ms ease-out-soft from `translateY(-4px)` to `translateY(0)`. ### Page Transitions Page-to-page navigation uses a 400ms cross-fade with the sticky header staying static. Anchor smooth-scroll uses 600ms ease-emphasized. ### Reduced Motion Respects `prefers-reduced-motion: reduce`. The FX rate tick freezes — digits update instantly without rolling. All `translate` and `scale` transforms suppress entirely — replaced with instant render or opacity-only fades. Durations halve where they remain. Card hover loses the 2px lift; only the shadow change remains. Button hover loses the 1px translate. Modal scale-in becomes instant render. Scroll-reveal becomes static on-mount. ### Contrast Pairs | Pair | Ratio | Level | |------|-------|-------| | `#0e0f0c` text on `#fffbf5` cream | 18.2 | AAA at all sizes | | `#163300` forest text on `#fffbf5` cream | 14.6 | AAA at all sizes | | `#0e0f0c` text on `#f4f1eb` tan | 16.4 | AAA at all sizes | | `#37513e` muted forest on `#fffbf5` | 7.8 | AAA at body sizes | | `#677378` muted-warm on `#fffbf5` | 4.9 | AA at body sizes | | `#163300` forest on `#9fe870` lime (the brand pair) | 11.2 | AAA at all sizes | | `#fffbf5` cream on `#163300` forest | 14.6 | AAA at all sizes | | `#163300` link underlined on `#fffbf5` | 14.6 | AAA at all sizes | | `#1a7f3a` success on `#fffbf5` | 5.6 | AA at body sizes | | `#9a1f1f` danger on `#fffbf5` | 6.5 | AA at body sizes | The contrast pairs are uniformly excellent. The brand's signature pair — forest `#163300` text on lime `#9fe870` — lands at 11.2:1 AAA, which is exceptional for a fintech CTA. Most fintech brands have CTA text-on-fill contrast in the 4.5–5.0 range (just passing AA); Wise's forest-on-lime exceeds that by a wide margin and reads as deeply legible at all sizes. This is a deliberate accessibility win. ### Focus Indicators Focus ring is `3px solid rgba(159, 232, 112, 0.32)` brand-lime translucent ring with 2px outline-offset. The ring colour ports the brand identity into every focus interaction — it's the same lime as the primary button, so users see the brand chroma at every keyboard event. On the dark-forest band, the ring intensifies to `3px solid rgba(159, 232, 112, 0.50)` for visibility against the deep ground. ### ARIA Patterns - **Top nav**: `