--- version: alpha name: Wise Inspired website: "https://wise.com" description: An inspired interpretation of Wise's design language — a global money-transfer brand whose surface combines an unusually heavy near-black display sans (weight 900 at 64–126 px) with a vivid lime-green brand accent, sage-tinted surface neutrals, and rounded white cards on a pale green-tinted canvas; the whole system reads more like a Scandinavian fintech magazine than a bank. seo: title: "Wise Design System for React — Lime #9fe870, Wise Sans 900, and 28 components" metaDescription: "Wise's design system as a DESIGN.md file. Lime #9fe870, Wise Sans weight 900, 18 colors, 28 components. For React, Next.js, and AI tools." highlights: - "Single lime-green CTA voltage — #9fe870 is the sole brand accent across every primary button, badge, and dark-card text fill" - "Hero type runs Wise Sans weight 900 at 126px — heaviest display weight of any fintech in the catalogue" - "Sage canvas #e8ebe6 carries the hero band, white #ffffff cards float on it; surface contrast IS the elevation" - "Cards and buttons share one canonical radius — 24px (rounded.xl) — never sharp corners on interactive surfaces" - "Two-face typography — proprietary Wise Sans 900 for brand moments, Inter 600 for everything else; strict role separation" tags: - "Fintech & Crypto" - "Banking & Payments" lastUpdated: "2026-05-12" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Wise is the rare fintech that reads more like a Scandinavian magazine than a bank. The brand pairs a vivid lime-green #9fe870 against a pale sage canvas #e8ebe6 and a near-black ink #0e0f0c that carries a faint olive warmth. The CTA pill is always the same lime green — never substituted, never paired with a secondary accent, never recolored as a status indicator. Hero headlines run Wise Sans, a proprietary geometric sans, at weight 900 in scales from 64px up to 126px. That display weight is unusually heavy for the category; most fintech systems sit at weight 700 or below. The shape language is generous: 24px rounded corners on every button and card, with cards floating as white plates on the sage band. This page packages the system into a single DESIGN.md file. Inside: 18 color tokens (4-stop lime ramp, 4 surface neutrals, a full positive/warning/negative semantic palette, plus orange and cyan illustration accents), 14 typography styles spanning Wise Sans weight 900 at 126px down to Inter 12px captions, 8 spacing values on a 4px base unit, 7 corner radii, and 28 components covering navigation, cards, the signature currency-converter card, buttons, badges, and 10 auto-derived example surfaces. The spec follows the Google Labs DESIGN.md format so it's parseable by both humans and machines. Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Wise's restraint — one lime-green CTA, weight-900 hero, sage canvas, 24px pill geometry — instead of a generic fintech theme. Reference the tokens directly in Tailwind config or CSS variables, or use the file as a design audit against your own work. The system is worth studying because it proves a fintech can feel editorial and warm without abandoning trust signals: the heavy display weight reads as confident, the sage canvas reads as calm, and the lime CTA reads as energetic — three personalities held in one disciplined token set. related: - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "/blocks" title: "React blocks for shadcn/ui" description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives." questions: - id: "primary-color" title: "What is Wise's primary brand color?" answer: "Wise's brand color is a vivid lime green — #9fe870 — used as the universal primary CTA across every page. The brand maintains a four-stop ramp around it: #cdffad for active state, #c5edab as a mid-saturation neutral, and #e2f6d5 as the lightest pale tint for badge backgrounds and soft surfaces. The lime green never appears as a background behind itself; it always sits on neutral sage, white, or ink ink surfaces. There is no secondary brand accent — the system is deliberately single-voltage." - id: "typography" title: "What typography does Wise use, and what should I substitute if Wise Sans isn't available?" answer: "Wise runs a proprietary geometric sans called Wise Sans at weight 900 for every hero display, in scales from 64px up to 126px. Sub-displays and body run Inter at weight 600 for headings and weight 400 for body. Strict role separation: Wise Sans for the brand moment, Inter for everything else. If Wise Sans isn't available, Inter at weight 900 or Manrope at weight 800/900 captures the geometric heaviness; Geist weight 800 is a passable second choice." - id: "shape-language" title: "What corner radius does Wise use on buttons and cards?" answer: "Wise uses 24px (rounded.xl) as the canonical radius for every button and card surface. Form inputs sit at 12px (rounded.md), small badges and inline pills at 8px (rounded.sm), and status pills plus circular icon buttons go fully rounded at 9999px. The brand never uses sharp corners on interactive elements — the soft 24px pill geometry is part of the friendly fintech voice and is non-negotiable per the brand do/don't rules." - id: "elevation" title: "How does Wise handle elevation and depth?" answer: "Wise has essentially no shadow tier. The system relies on surface contrast as the elevation cue: white #ffffff cards floating on the sage-tinted #e8ebe6 canvas IS the depth treatment. Tertiary outline buttons and the currency-converter card use a 1px solid ink border at #0e0f0c for definition. Depth comes from polarity-flipped surfaces — dark ink cards with lime-green text — and from the 24px rounded clipping, never from layered shadows." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React fintech app?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Wise's restraint (single lime accent, weight-900 hero, sage canvas, 24px pill geometry) rather than a generic fintech theme. You can also reference the tokens directly: every color hex, type style, radius, and spacing value is quoted and ready to paste into Tailwind config, CSS variables, or your own component library." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "A handful of things, documented in the Known Gaps section: precise hover-state colors beyond the documented active variants, loading skeletons and progress indicators, the dark-mode token set (the spec captures the light marketing surface), the full mobile app component library which extends beyond the marketing brand, and the country flag asset system used inside currency rows. The spec captures roughly 90% of the public marketing and web product surfaces." colors: primary: "#9fe870" on-primary: "#0e0f0c" primary-active: "#cdffad" primary-neutral: "#c5edab" primary-pale: "#e2f6d5" ink: "#0e0f0c" ink-deep: "#163300" body: "#454745" mute: "#868685" canvas: "#ffffff" canvas-soft: "#e8ebe6" positive: "#2ead4b" positive-deep: "#054d28" warning: "#ffd11a" warning-deep: "#b86700" warning-content: "#4a3b1c" negative: "#d03238" negative-deep: "#a72027" negative-darkest: "#a7000d" negative-bg: "#320707" accent-orange: "#ffc091" accent-cyan: "#38c8ff" typography: display-mega: fontFamily: Wise Sans, Inter, system-ui, -apple-system, sans-serif fontSize: 126px fontWeight: 900 lineHeight: 107.1px display-xxl: fontFamily: Wise Sans, Inter, system-ui, sans-serif fontSize: 96px fontWeight: 900 lineHeight: 81.6px display-xl: fontFamily: Wise Sans, Inter, system-ui, sans-serif fontSize: 64px fontWeight: 900 lineHeight: 54.4px display-lg: fontFamily: Wise Sans, Inter, system-ui, sans-serif fontSize: 47px fontWeight: 400 lineHeight: 70.5px letterSpacing: -0.108px display-md: fontFamily: Wise Sans, Inter, system-ui, sans-serif fontSize: 40px fontWeight: 900 lineHeight: 34px display-sm: fontFamily: Inter, system-ui, sans-serif fontSize: 32px fontWeight: 600 lineHeight: 38.4px letterSpacing: -0.96px display-xs: fontFamily: Inter, system-ui, sans-serif fontSize: 24px fontWeight: 600 lineHeight: 31.2px letterSpacing: -0.48px body-lg: fontFamily: Inter, system-ui, sans-serif fontSize: 20px fontWeight: 400 lineHeight: 30px body-md: fontFamily: Inter, system-ui, sans-serif fontSize: 16px fontWeight: 400 lineHeight: 24px body-md-strong: fontFamily: Inter, system-ui, sans-serif fontSize: 16px fontWeight: 600 lineHeight: 24px body-sm: fontFamily: Inter, system-ui, sans-serif fontSize: 14px fontWeight: 400 lineHeight: 20px body-sm-strong: fontFamily: Inter, system-ui, sans-serif fontSize: 14px fontWeight: 600 lineHeight: 20px caption: fontFamily: Inter, system-ui, sans-serif fontSize: 12px fontWeight: 400 lineHeight: 16px button-md: fontFamily: Inter, system-ui, sans-serif fontSize: 16px fontWeight: 600 lineHeight: 24px rounded: none: 0px sm: 8px md: 12px lg: 16px xl: 24px pill: 9999px full: 9999px spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px components: nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" padding: "{spacing.md} {spacing.xl}" nav-link: textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.xl}" padding: "{spacing.md} {spacing.xl}" button-secondary: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.xl}" padding: "{spacing.md} {spacing.xl}" button-tertiary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.xl}" padding: "{spacing.md} {spacing.xl}" button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "{spacing.sm}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.md} {spacing.lg}" card-content: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "{spacing.xl}" card-feature-sage: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "{spacing.xl}" card-feature-green: backgroundColor: "{colors.primary-pale}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "{spacing.xl}" card-feature-dark: backgroundColor: "{colors.ink}" textColor: "{colors.primary}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "{spacing.xl}" hero-band: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.display-mega}" padding: "{spacing.3xl} {spacing.xl}" hero-band-dark: backgroundColor: "{colors.ink}" textColor: "{colors.primary}" typography: "{typography.display-mega}" padding: "{spacing.3xl} {spacing.xl}" content-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "{spacing.3xl} {spacing.xl}" currency-converter-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: "{spacing.xl}" badge-positive: backgroundColor: "{colors.primary-pale}" textColor: "{colors.positive-deep}" typography: "{typography.body-sm-strong}" rounded: "{rounded.pill}" padding: "{spacing.xs} {spacing.md}" badge-negative: backgroundColor: "{colors.negative-bg}" textColor: "{colors.on-primary}" typography: "{typography.body-sm-strong}" rounded: "{rounded.pill}" padding: "{spacing.xs} {spacing.md}" footer: backgroundColor: "{colors.ink}" textColor: "{colors.canvas-soft}" typography: "{typography.body-sm}" padding: "{spacing.3xl} {spacing.xl}" # ─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ─── ex-pricing-tier: description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface." backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.mute}" rounded: "{rounded.xl}" padding: "{spacing.xl}" ex-pricing-tier-featured: description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.xl}" padding: "{spacing.xl}" ex-product-selector: description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.xl}" padding: "{spacing.xl}" ex-cart-drawer: description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)." backgroundColor: "{colors.canvas}" rounded: "{rounded.xl}" padding: "{spacing.xl}" item-divider: "{colors.canvas-soft}" ex-app-shell-row: description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" ex-data-table-cell: description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm." headerBackground: "{colors.canvas-soft}" headerTypography: "{typography.caption}" bodyTypography: "{typography.body-sm}" cellPadding: "{spacing.md} {spacing.lg}" rowBorder: "{colors.canvas-soft}" ex-auth-form-card: description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.xl}" padding: "{spacing.xl}" ex-modal-card: description: "Modal dialog surface — same chrome as feature-card with elevated shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.xl}" padding: "{spacing.xl}" ex-empty-state-card: description: "Empty-state illustration frame." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.xl}" padding: "{spacing.3xl}" captionTypography: "{typography.body-md}" ex-toast: description: "Toast notification surface — feature-card shape + medium shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.xl}" padding: "{spacing.md} {spacing.lg}" typography: "{typography.body-sm}" --- ## Overview Wise — the global money-transfer brand — wears its identity in a single signature pairing: a vivid lime-green `{colors.primary}` (`#9fe870`) used as the CTA pill and brand accent, set against a pale sage-tinted canvas `{colors.canvas-soft}` (`#e8ebe6`) that runs across the hero band, and a near-black ink `{colors.ink}` (`#0e0f0c`) with a hint of warmth from the brand's underlying olive cast. The brand reads more like a calm Scandinavian magazine than a bank — generous whitespace, large rounded cards, and an unusually heavy display sans set at weight 900 carrying every hero headline. Display typography is the second decisive voice. The proprietary `Wise Sans` family carries hero displays at weight 900 in scales from 64 px up to 126 px on the largest hero. The brand pairs Wise Sans 900 with Inter at weight 600 for sub-displays — the contrast between the chunky proprietary face and Inter's neutrality creates a particular hierarchy: Wise Sans for the brand moment, Inter for everything else. Cards are universally pill-rounded — `{rounded.xl}` 24 px is the brand's signature card radius. Buttons take the same 24 px pill-rectangle shape. The brand never uses sharp corners on UI elements; the visual softness is part of the friendly fintech voice. **Key Characteristics:** - A single lime-green CTA accent `{colors.primary}` (`#9fe870`) — the brand's universal primary action color. No second accent. - Two-face display typography — Wise Sans (proprietary, weight 900, hero scale) + Inter (weight 600, sub-display scale). The contrast is the brand's typographic story. - `{rounded.xl}` 24 px is the canonical card and button radius. Generous, friendly. - Sage-tinted canvas `{colors.canvas-soft}` (`#e8ebe6`) is the brand's hero surface; white `{colors.canvas}` is reserved for cards within the sage band. - A full semantic palette: positive green family, warning yellow family, negative red family — each documented with content / hover / active variants for in-product use. - Currency-converter card on the hero — the brand's signature interactive component, hosting from/to amount inputs. ## Colors ### Brand & Accent - **Wise Green** (`{colors.primary}` — `#9fe870`): The brand's universal CTA color. Every primary button, every "Send money" pill, the brand's logo accent. - **Wise Green Hover** (`{colors.primary-active}` — `#cdffad`): The lighter green for active state. - **Wise Green Neutral** (`{colors.primary-neutral}` — `#c5edab`): A mid-saturation green used as a neutral active fill. - **Wise Green Pale** (`{colors.primary-pale}` — `#e2f6d5`): The lightest green for soft surface tints / badge backgrounds. ### Surface - **Canvas** (`{colors.canvas}` — `#ffffff`): Pure white for card interiors. - **Canvas Soft** (`{colors.canvas-soft}` — `#e8ebe6`): The sage-tinted page background. Defining mood of the brand. ### Text - **Ink** (`{colors.ink}` — `#0e0f0c`): Near-black with a hint of olive warmth — the brand's default text and headings color. - **Ink Deep** (`{colors.ink-deep}` — `#163300`): A deep forest-green ink used on positive-state surfaces. - **Body** (`{colors.body}` — `#454745`): Secondary body text. - **Mute** (`{colors.mute}` — `#868685`): Lowest-priority text — captions, placeholder, fine print. ### Semantic - **Positive** (`{colors.positive}` — `#2ead4b`): Success indicator. - **Positive Deep** (`{colors.positive-deep}` — `#054d28`): Pressed positive state. - **Warning** (`{colors.warning}` — `#ffd11a`): Caution indicator. - **Warning Deep** (`{colors.warning-deep}` — `#b86700`): Pressed warning. - **Warning Content** (`{colors.warning-content}` — `#4a3b1c`): Text on warning surfaces. - **Negative** (`{colors.negative}` — `#d03238`): Destructive / error red. - **Negative Deep** (`{colors.negative-deep}` — `#a72027`): Pressed destructive. - **Negative Darkest** (`{colors.negative-darkest}` — `#a7000d`): Highest-emphasis destructive text. - **Negative Bg** (`{colors.negative-bg}` — `#320707`): Dark maroon for destructive callout backgrounds. ### Brand Accent — Tertiary - **Accent Orange** (`{colors.accent-orange}` — `#ffc091`): Bright peach used inside illustrative content / pricing cards. - **Accent Cyan** (`{colors.accent-cyan}` — `#38c8ff`): Bright sky-blue used as a tertiary illustration accent. ## Typography ### Font Family Two faces ladder the system: 1. **Wise Sans** — proprietary geometric sans with an unusually heavy weight 900 used for all hero displays. The face is the brand's typographic signature. Always at weight 900, never lighter on the marketing surface. 2. **Inter** — used for sub-displays (weight 600), all body, and form labels. Loaded with `font-feature-settings: "calt"` for contextual alternates. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-mega}` | 126px | 900 | 107.1px | 0 | Hero stencil at maximum scale. | | `{typography.display-xxl}` | 96px | 900 | 81.6px | 0 | Sub-hero scale. | | `{typography.display-xl}` | 64px | 900 | 54.4px | 0 | Standard hero headline. | | `{typography.display-lg}` | 47px | 400 | 70.5px | -0.108px | Lighter sub-display. | | `{typography.display-md}` | 40px | 900 | 34px | 0 | Section / card headlines. | | `{typography.display-sm}` | 32px | 600 | 38.4px | -0.96px | Inter-rendered section headings. | | `{typography.display-xs}` | 24px | 600 | 31.2px | -0.48px | Sub-section displays. | | `{typography.body-lg}` | 20px | 400 | 30px | 0 | Lead paragraphs. | | `{typography.body-md}` | 16px | 400 | 24px | 0 | Default body. | | `{typography.body-md-strong}` | 16px | 600 | 24px | 0 | Bold inline body. | | `{typography.body-sm}` | 14px | 400 | 20px | 0 | Secondary body. | | `{typography.body-sm-strong}` | 14px | 600 | 20px | 0 | Bold caption / nav-link. | | `{typography.caption}` | 12px | 400 | 16px | 0 | Fine print. | | `{typography.button-md}` | 16px | 600 | 24px | 0 | Button label. | ### Principles - **Weight 900 for hero, weight 600 for everything else.** The brand's display ceiling is full-black weight; everything below is semibold. - **Wise Sans for the brand voice, Inter for utility.** Strict role separation. ### Note on Font Substitutes Wise Sans is proprietary. Open-source substitutes: - **Display** — *Inter* at weight 900 or *Manrope* at weight 800 / 900 captures the geometric heaviness. *Geist* weight 800 is a passable second choice. - **Sub-display + body** — *Inter* is the brand's actual second face. ## Layout ### Spacing System - **Base unit**: 4 px. - **Tokens**: `{spacing.xxs}` 2 px · `{spacing.xs}` 4 px · `{spacing.sm}` 8 px · `{spacing.md}` 12 px · `{spacing.lg}` 16 px · `{spacing.xl}` 24 px · `{spacing.2xl}` 32 px · `{spacing.3xl}` 48 px. - **Section padding**: bands use `{spacing.3xl}` 48 px top/bottom on desktop. - **Card interior**: cards at `{spacing.xl}` 24 px. ### Grid & Container - Marketing container centres at ~1200 px. - Hero: split layout (headline left, currency-converter card right) at desktop; stacked at mobile. - Feature grids: 2-up / 3-up at desktop. ### Responsive Strategy #### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Hero stacks; converter card full-width below headline; grids 1-up. | | Tablet | 768–1023px | Grids 2-up. | | Desktop | ≥ 1024px | Hero split; full grids. | #### Touch Targets Buttons render ~48 px tall (12 vertical padding + 24 line). WCAG AAA at all widths. #### Image Behavior Photography is sparse; the brand prefers illustrative SVGs and product mockups inside cards. Country flag thumbnails appear inside currency rows. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Level 0 — Flat | No shadow, no border. | Default. | | Level 1 — Hairline on Dark | 1 px solid `{colors.ink}` border. | Tertiary outline buttons, form inputs. | | Level 2 — Soft Card | Implicit Level 0 white card sitting on sage canvas — the surface contrast IS the elevation. | Cards on the sage hero band. | The brand uses surface contrast (`{colors.canvas-soft}` background vs `{colors.canvas}` cards) as the primary elevation cue. ## Shapes ### Border Radius Scale | Token | Value | Use | |---|---|---| | `{rounded.none}` | 0px | Full-bleed bands. | | `{rounded.sm}` | 8px | Inline pills, small badges. | | `{rounded.md}` | 12px | Form inputs, smaller chrome. | | `{rounded.lg}` | 16px | Mid-size cards. | | `{rounded.xl}` | 24px | The brand's canonical button + card radius. | | `{rounded.pill}` | 9999px | Status pills and full-radius accents. | | `{rounded.full}` | 9999px | Circular icon containers. | ## Components ### Buttons **`button-primary`** — the lime-green CTA pill. - Background `{colors.primary}`, text `{colors.on-primary}`, label `{typography.button-md}`, padding `{spacing.md} {spacing.xl}`, shape `{rounded.xl}` 24 px. **`button-secondary`** — the sage-tinted secondary. - Background `{colors.canvas-soft}`, text `{colors.ink}`, same typography / padding / shape. **`button-tertiary`** — the white outline tertiary. - Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.ink}` border, same typography / padding / shape. **`button-icon-circular`** — the circular icon button. - Background `{colors.canvas}`, ink icon, shape `{rounded.full}`. ### Cards & Containers **`card-content`** — the default white card. - Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.xl}`, shape `{rounded.xl}`. No border, sits on sage canvas. **`card-feature-sage`** — the sage-tinted feature card. - Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.xl}`, shape `{rounded.xl}`. **`card-feature-green`** — the soft-green feature card. - Background `{colors.primary-pale}`, text `{colors.ink}`, padding `{spacing.xl}`, shape `{rounded.xl}`. **`card-feature-dark`** — the polarity-flipped dark card with green text. - Background `{colors.ink}`, text `{colors.primary}` (Wise green!), padding `{spacing.xl}`, shape `{rounded.xl}`. Used for promotional moments. **`currency-converter-card`** — the brand's signature interactive widget. - Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.ink}` border, padding `{spacing.xl}`, shape `{rounded.xl}`. Hosts from/to amount inputs + currency selectors. ### Inputs & Forms **`text-input`** — the canonical text input. - Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.ink}` border, body in `{typography.body-md}`, padding `{spacing.md} {spacing.lg}`, shape `{rounded.md}`. ### Navigation **`nav-bar`** — the sticky top nav. - Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.xl}`. **`nav-link`** — link items inside nav. - Text `{colors.ink}`, set in `{typography.body-sm-strong}`. **`footer`** — the dark footer band. - Background `{colors.ink}`, text `{colors.canvas-soft}`, padding `{spacing.3xl} {spacing.xl}`. Body in `{typography.body-sm}`. ### Signature Components **`hero-band`** — the sage-canvas hero band. - Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.3xl} {spacing.xl}`. Headline in `{typography.display-mega}` (Wise Sans weight 900). **`hero-band-dark`** — the polarity-flipped dark hero. - Background `{colors.ink}`, text `{colors.primary}` (Wise green headline on near-black!), same padding / scale. **`content-band`** — the white content band that follows hero. - Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.3xl} {spacing.xl}`. Section headline in `{typography.display-md}`. **`badge-positive`** — the positive status pill. - Background `{colors.primary-pale}`, text `{colors.positive-deep}`, body in `{typography.body-sm-strong}`, padding `{spacing.xs} {spacing.md}`, shape `{rounded.pill}`. **`badge-negative`** — the negative status pill. - Background `{colors.negative-bg}`, text white, body in `{typography.body-sm-strong}`, padding `{spacing.xs} {spacing.md}`, shape `{rounded.pill}`. ### Examples (illustrative) > Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass. **`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface. - Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding` **`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode). - Properties: `backgroundColor`, `textColor`, `rounded`, `padding` **`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery). - Properties: `backgroundColor`, `rounded`, `padding` **`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart). - Properties: `backgroundColor`, `rounded`, `padding`, `item-divider` **`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator. - Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding` **`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm. - Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder` **`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside. - Properties: `backgroundColor`, `rounded`, `padding` **`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow. - Properties: `backgroundColor`, `rounded`, `padding` **`ex-empty-state-card`** — Empty-state illustration frame. - Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography` **`ex-toast`** — Toast notification surface — feature-card shape + medium shadow. - Properties: `backgroundColor`, `rounded`, `padding`, `typography` ## Do's and Don'ts ### Do - Reserve `{colors.primary}` Wise green for every primary CTA. The lime-green pill IS the brand's conversion signature. - Set hero headlines in `{typography.display-mega}` / `{typography.display-xl}` Wise Sans weight 900. Never lighter. - Use `{rounded.xl}` 24 px for buttons and cards. The generous radius is the brand's friendliness signature. - Cycle page surfaces in `{colors.canvas-soft}` sage canvas → `{colors.canvas}` white cards. Surface contrast carries elevation. - Use the full semantic palette (positive / warning / negative) for in-product status — never repurpose Wise green as success indicator since it IS the brand CTA. ### Don't - Don't introduce a second brand accent. Wise green is the sole identity colour. - Don't render the hero in weight 700 or lighter. The brand's display weight is 900. - Don't render CTAs as sharp rectangles. The 24 px pill geometry is non-negotiable. - Don't pair the green CTA with a green background. The brand always sits Wise green on neutral surfaces (sage / white / ink). - Don't replace Wise Sans with a generic geometric sans for hero typography — the proprietary face IS the brand's voice. ## Known Gaps - **Hover state colors:** beyond the documented `{colors.primary-active}` lighter-green active variant, precise pointer-hover micro-states (e.g., subtle elevation lift on cards, button shadow pulse) are not fully captured. - **Loading states / skeleton screens:** progress indicators, skeleton placeholders, and inline spinners are not represented in the extracted surfaces. - **Dark mode tokens:** the spec captures the light marketing surface; a dedicated dark-mode token set (paired with `{colors.ink}` as canvas) is not documented here. - **Mobile app component library:** the iOS / Android app extends the marketing brand with native list rows, segmented controls, and gesture sheets that aren't captured in this web-focused spec. - **Country flag assets:** flag thumbnails appear inside currency converter rows, but the asset set, sizing rules, and rounded-corner treatment are not formally documented here.