# Design System Inspiration of Wise (iOS)

## 1. Visual Theme & Atmosphere

Wise's iOS app (formerly TransferWise) is a bright, confident money app whose entire personality is *transparency*. The canvas is clean white (`#FFFFFF`) with neutral surfaces (`#F7F7F7`), and the brand's signature deep forest green (`#163300`) anchors headings, the navigation, and dark hero panels. Where money moves, a vivid Bright Green (`#9FE870`) does the work — it's the CTA, the active state, the highlight on a balance. The combination — almost-black forest paired with a near-fluorescent green — reads as serious *and* optimistic, the visual equivalent of "we'll show you exactly what this costs."

The accent system is a forest/bright-green duet. Bright Green (`#9FE870`) is the primary action and highlight; it always carries dark forest text (`#163300`), never white — that contrast is the brand. Forest (`#163300`) is the structural color: large titles, the dark account hero, key numbers. Everything else is neutral. There is no blue, no gradient, no second accent — the discipline is what makes the bright green feel like *Wise*.

Typography is Wise Sans, a friendly, slightly quirky humanist sans with a distinctive lowercase character (Inter is the closest free substitute). It runs heavy where it matters — balances and titles at weight 800 — and the most expressive moment is the multi-currency balance: a stack of rows, each with a circular flag chip, a currency code, and a precisely-aligned tabular figure, topped by a total in forest at 32–40pt weight 800.

**Key Characteristics:**
- Bright white canvas (`#FFFFFF`) with neutral surfaces (`#F7F7F7`)
- Deep forest green (`#163300`) for structure: titles, nav, dark hero panels
- Bright Green (`#9FE870`) for action/highlight — always with forest text, never white
- Multi-currency balance rows — flag chip + code + tabular figure, decimal-aligned
- Transparent fee-breakdown card — the signature "here's exactly the cost" device
- Mid-market rate ticker — the live exchange rate, stated plainly
- Send-money flow stepper — a clear, numbered multi-step money journey
- Wise Sans (proprietary humanist sans), weights 400 / 600 / 800
- Bottom tabs: Home, Card, Recipients, Payments, Account
- Number roll-up on balances and the total — figures animate into place

## 2. Color Palette & Roles

### Primary
- **Bright Green** (`#9FE870`): Primary CTA ("Send money", "Continue"), active tab, highlight chip, selected state. Always paired with forest text.
- **Bright Green Pressed** (`#8AD45C`): Pressed/active state for the bright-green CTA.
- **Bright Green Tint** (`#EAF9DC`): Selected-row wash, success banner background, subtle highlight fill.
- **Forest** (`#163300`): Structural — large titles, dark account hero, primary numbers, the dark nav.
- **Forest Hover** (`#0E2200`): Pressed state on forest surfaces and dark buttons.

### Canvas & Surfaces
- **Canvas White** (`#FFFFFF`): Primary page background, card fill.
- **Surface Neutral** (`#F7F7F7`): Section wells, input fill, grouped containers.
- **Surface Sunken** (`#EFEFEF`): Pressed neutral surface, skeleton placeholders.
- **Divider** (`#E5E5E5`): Hairline rules between rows and around cards.
- **Border Strong** (`#D2D2D2`): Input outline at rest, segmented-control border.
- **Forest Surface** (`#0E2200`): The dark account-hero panel background (forest, deepened).

### Text
- **Text Primary** (`#0E0F0C`): Body text, primary amounts, row titles (a near-black with a faint warm cast).
- **Text on Forest** (`#FFFFFF`): Text/numbers on the dark forest hero.
- **Text Secondary** (`#6B6F66`): Metadata, currency names, helper text, "you send" labels.
- **Text Tertiary** (`#9A9D95`): Disabled labels, placeholders, low-emphasis captions.

### Semantic
- **Success Green** (`#2F8F4E`): "Money arrived", completed transfer (a readable green, distinct from the fluorescent brand green).
- **Pending Amber** (`#B5781E`): "In progress", estimated-arrival warnings.
- **Error Red** (`#D4332B`): Form errors, failed payment, declined card.
- **Info Forest** (`#163300`): Informational emphasis inside fee breakdowns and statements.
- **Rate Blue-Grey** (`#5B6670`): The neutral mid-market rate ticker text when not highlighted.

### Dark Mode (Limited Use)
Wise's iOS app is light-first; the forest hero already provides a "dark" moment within the bright layout. A full dark variant exists for system dark mode but the canonical experience is bright with forest accents.
- **Dark Canvas** (`#0E0F0C`)
- **Dark Surface** (`#1B1E18`)
- **Dark Text** (`#F4F5F2`)
- **Bright Green (unchanged)** (`#9FE870`) — reads well on dark, still with forest text on fills

## 3. Typography Rules

### Font Family
- **Primary**: `Wise Sans` (proprietary humanist sans, Regular / Semibold / Extrabold)
- **Fallback Stack**: `'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
- **Numerals**: Tabular figures mandatory in balances, the currency stack, and fee breakdowns
- **CJK/Non-Latin**: Falls to system stack — Wise ships globally with broad localization

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Balance (Hero) | Wise Sans | 40pt | 800 | 1.05 | -0.6pt | Total balance on the forest hero, tabular |
| Screen Title (Large) | Wise Sans | 32pt | 800 | 1.1 | -0.5pt | "Home", "Recipients" nav title |
| Section Header | Wise Sans | 22pt | 800 | 1.2 | -0.3pt | "Your accounts", "Recent" |
| Currency Figure | Wise Sans | 22pt | 800 | 1.1 | -0.2pt | Per-currency balance figure, tabular |
| Subsection | Wise Sans | 18pt | 600 | 1.3 | -0.1pt | "You send", group titles |
| Amount (Row) | Wise Sans | 16pt | 600 | 1.2 | 0pt | Transaction amount, tabular |
| Body / Title | Wise Sans | 16pt | 600 | 1.3 | 0pt | Recipient name, row title |
| Body | Wise Sans | 15pt | 400 | 1.45 | 0pt | Descriptions, fee explanations |
| Button (Primary) | Wise Sans | 16pt | 800 | 1.0 | 0pt | Bright-green CTA label |
| Meta / Subtitle | Wise Sans | 13pt | 400 | 1.3 | 0pt | "Sent 12 May · GBP → EUR", currency name |
| Label (UPPER) | Wise Sans | 11pt | 800 | 1.2 | 0.6pt | "YOU SEND", section labels |
| Tab Label | Wise Sans | 11pt | 600 | 1.0 | 0.1pt | Bottom tab bar labels |
| Caption | Wise Sans | 11pt | 400 | 1.3 | 0pt | Legal, "Rate guaranteed for 24h" |

### Principles
- **Heavy where it matters**: Balances and titles run weight 800 — Wise's type is confident, not delicate
- **Tabular figures everywhere money appears**: Total, currency rows, fee lines must align to the decimal
- **Forest is the structural ink**: Large titles and the hero use `#163300`, not pure black
- **Bright green is never type**: `#9FE870` is a fill/highlight; it always sits *behind* forest text
- **Negative tracking on big numbers**: -0.4 to -0.6pt on the hero balance and large titles; body at 0pt
- **Dynamic Type respected** on titles, body, amounts; tab labels and uppercase labels fixed

## 4. Component Stylings

### Buttons

**Primary CTA ("Send money" / "Continue")**
- Background: `#9FE870`
- Text: `#163300` (forest — never white on bright green)
- Height: 52pt, full-width; corner radius 16pt
- Pressed: background `#8AD45C`, scale 0.98, soft haptic
- Disabled: background `#EFEFEF`, text `#9A9D95`

**Forest Button (secondary primary, e.g. "Add money")**
- Background: `#163300`
- Text: `#FFFFFF`
- Height: 52pt, radius 16pt
- Pressed: `#0E2200`

**Outline Button ("Details")**
- Background: transparent
- Text: `#163300`, 1.5pt border `#163300`
- Height: 52pt, radius 16pt
- Pressed: background `#F7F7F7`

**Text Link**
- Wise Sans 15pt weight 600, color `#163300`, underline on press
- Pressed: `#0E2200`

**Icon Button (settings, share, statement)**
- 24pt glyph, 44pt hit area
- Default `#6B6F66`; active `#163300`

**Quick Action (Home: Send, Add, Request, Convert)**
- 52pt circle, background `#F7F7F7`, glyph 22pt `#163300`
- The primary "Send" circle uses `#9FE870` fill with a forest glyph
- Label below 13pt `#6B6F66`

### Cards & Containers

**Forest Account Hero (signature)**
- Full-width panel, background `#0E2200` (deep forest), corner radius 20pt, padding 24pt
- "Total balance" label 11pt `#9FE870` uppercase, total figure 40pt w800 white tabular
- A small currency-switch chip and a `#9FE870` "Add money" affordance
- This is the one "dark moment" inside the bright layout

**Currency Balance Row**
- Background `#FFFFFF`, divider `#E5E5E5`, height ~64pt (or as a card with 1pt border, radius 16pt)
- Leading: 32pt circular flag chip
- Center: currency code (16pt w600 `#0E0F0C`) + name (13pt w400 `#6B6F66`)
- Trailing: balance 22pt w800 `#0E0F0C`, tabular, right-aligned
- Pressed: background `#F7F7F7`

**Fee-Transparency Card (signature)**
- Card `#FFFFFF`, 1pt `#E5E5E5`, radius 16pt, padding 20pt
- Vertically itemized breakdown, each line: label (15pt `#6B6F66`) ←→ value (16pt w600 `#0E0F0C`, tabular)
- Lines: "You send", "Our fee" (struck-through "hidden fees: £0" allowed), "Amount we convert", "Guaranteed rate", "Recipient gets"
- The "Recipient gets" line is emphasized: forest text, larger, with a `#EAF9DC` highlight band
- A connecting vertical guide line ties the steps; this is Wise's transparency centerpiece

**Mid-Market Rate Ticker**
- Slim row: "1 GBP = 1.1632 EUR" in 15pt w600 `#0E0F0C`, a tiny live dot, and "guaranteed for 24h" 11pt `#6B6F66`
- A small up/down delta in `#2F8F4E` / `#D4332B`

**Transaction Row**
- Height 64pt
- Leading: 40pt circular recipient/merchant avatar (or flag for conversions)
- Center: name 16pt w600 `#0E0F0C` + meta "Sent 12 May · GBP → EUR" 13pt `#6B6F66`
- Trailing: amount 16pt w600 — `#2F8F4E` if money in, `#0E0F0C` if out
- Pressed: `#F7F7F7`; divider `#E5E5E5`

**Send-Money Stepper (signature)**
- A numbered vertical/segmented progress for the transfer flow: Recipient → Amount → Review → Pay
- Active step: forest dot with white numeral; completed: `#9FE870` dot with a forest check; upcoming: `#E5E5E5`
- Connecting rail in `#E5E5E5`, filling forest as steps complete

### Navigation

**Bottom Tab Bar**
- Height: 56pt + safe area
- Background: `#FFFFFF`, 0.5pt top border `#E5E5E5` (opaque — clarity first)
- Tabs: Home, Card, Recipients, Payments, Account
- Icon size: 24pt
- Active: icon + label `#163300` (filled icon); a `#9FE870` underline/dot can mark the active tab
- Inactive: `#6B6F66`
- Labels: Wise Sans 11pt weight 600, always shown

**Top Bar (Home)**
- Profile avatar (32pt) top-left; right: notifications + settings (24pt)
- The forest account hero sits large directly below

**Segmented Control (Send / Request, account filters)**
- Track `#F7F7F7`, height 40pt, radius 20pt
- Selected segment: white pill with shadow, forest text weight 600 (or `#9FE870` fill for emphasis)
- Unselected: `#6B6F66`
- Sliding thumb 220ms ease

### Input Fields

**Amount Entry (Send / Convert)**
- Large field, value in Wise Sans 34pt w800 `#0E0F0C` tabular, currency selector chip trailing (flag + code + chevron)
- Below: live converted value 15pt `#6B6F66`, updating with the rate
- No box — the number is the field; a forest caret blinks

**Text Field (recipient / address)**
- Filled style, background `#F7F7F7`, height 56pt, radius 12pt
- Rest: 1pt `#D2D2D2`; focus: 2pt `#163300`, floating label tints forest
- Error: 2pt `#D4332B`, helper `#D4332B`

**Search Bar (recipients)**
- Background `#F7F7F7`, height 44pt, radius 22pt
- Leading `magnifyingglass` 18pt `#6B6F66`; placeholder 16pt `#6B6F66`
- Focus: 1.5pt `#163300` ring

### Distinctive Components

**Fee-Transparency Breakdown**
- The signature object: an itemized, connected list that shows *every* component of a transfer cost — your amount, the (low, explicit) fee, the amount converted, the guaranteed mid-market rate, and exactly what the recipient gets, with that final line highlighted in `#EAF9DC`. Wise's entire brand is "no hidden fees" made visible.

**Multi-Currency Balance Stack**
- A tight vertical list of currency rows, each with a circular flag chip and a decimal-aligned tabular figure, summing to a forest total on the hero. Tapping a row drills into that currency's activity.

**Mid-Market Rate Ticker**
- The live exchange rate stated plainly with a "guaranteed for 24h" reassurance and a tiny live pulse — rate honesty as a UI element.

**Send-Money Flow Stepper**
- A clearly numbered, connected multi-step journey (Recipient → Amount → Review → Pay) so moving money never feels opaque; completed steps flip to a `#9FE870` check.

**Number Roll-Up**
- Balances and the hero total animate by rolling digits into place (~500ms ease-out) on load and after a transfer — money "lands" visibly.

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 52, 64
- Standard screen margin: 16pt horizontal
- Card internal padding: 20–24pt; section vertical gap: 24pt
- Transaction rows: 0pt gap, separated by `#E5E5E5` hairlines

### Grid & Container
- Content width: full device width, 16pt side margins
- Quick-action bar: 4 circular actions, evenly distributed
- Currency rows: full-width stacked
- Fee card: full-width, single column, connected guide line

### Whitespace Philosophy
- **Bright and open**: Generous whitespace around the forest hero and the fee card — transparency needs room to breathe
- **One dark anchor**: The forest hero is the single deep panel; everything else stays light
- **Numbers get air**: The total and "Recipient gets" line always have clear space — the figures are the point

### Border Radius Scale
- Soft (8pt): Small chips, flag containers, inline tags
- Standard (12pt): Inputs, small tiles
- Comfortable (16pt): Buttons, cards, fee card
- Roomy (20pt): The forest hero, feature modules
- Sheet (24pt): Bottom sheets (top corners)
- Pill (≥20pt half-height): Segmented control, filter chips
- Circle (50%): Quick-action circles, avatars, flag chips

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, 1pt `#E5E5E5` border | List rows, neutral wells, canvas |
| Card (Level 1) | `rgba(20,30,10,0.06) 0 1px 4px` | Currency cards, fee card at rest |
| Raised (Level 2) | `rgba(20,30,10,0.10) 0 6px 16px` | Pressed card, selected segment thumb |
| Hero (Level 2f) | `rgba(14,34,0,0.25) 0 12px 32px` | The forest account hero panel |
| Sheet (Level 3) | `rgba(20,30,10,0.16) 0 -10px 32px` | Bottom sheets, recipient picker |
| Sticky Bar | `rgba(20,30,10,0.08) 0 -2px 8px` | Sticky "Continue" bar above the tab bar in the send flow |

**Shadow Philosophy**: On the bright canvas, separation is border-first (1pt `#E5E5E5`) and shadows are soft, cool-green-tinted, and restrained — they appear mainly to lift the forest hero off the white field and to signal press/sticky. The system never uses heavy black shadows; the forest panel's own depth is its strongest elevation.

### Motion
- **Number roll-up**: digits roll vertically into place over ~500ms ease-out on load / after transfer
- **CTA press**: bright-green scale 0.98 + darken to `#8AD45C`, soft haptic, 150ms
- **Stepper advance**: completed dot flips to a `#9FE870` check (200ms), rail fills forest
- **Rate ticker pulse**: a tiny live dot pulses every refresh; delta arrow fades in
- **Segmented thumb**: white/green pill slides 220ms ease-in-out
- **Fee card reveal**: lines stagger-in 40ms apart as the breakdown expands

## 7. Do's and Don'ts

### Do
- Use `#FFFFFF` as the canvas; keep the layout bright with one forest anchor (the hero)
- Use forest `#163300` for structure — large titles, the dark hero, primary numbers
- Reserve Bright Green `#9FE870` for the primary action and key highlights
- Always put forest text (`#163300`) on bright green — never white
- Make the total/balance the heaviest element — 32–40pt weight 800, tabular
- Use tabular numerals for the total, every currency row, and fee lines
- Show the full fee breakdown with the "Recipient gets" line highlighted in `#EAF9DC`
- State the mid-market rate plainly with a "guaranteed for 24h" reassurance
- Roll numbers into place so money visibly "lands"

### Don't
- Don't put white text on bright green — it fails contrast and breaks the brand
- Don't introduce blue, gradients, or a second accent — forest + bright green is the whole story
- Don't use pure black for text — primary ink is `#0E0F0C`, structure is forest `#163300`
- Don't hide or summarize the fee — the itemized transparency card *is* the product
- Don't use proportional figures for money — always tabular, decimal-aligned
- Don't use light/thin font weights — Wise Sans titles run 800
- Don't make more than one panel dark — the forest hero is the single deep anchor
- Don't skip the rate guarantee/ticker — rate honesty is core to the brand
- Don't animate aggressively — roll-ups and transitions are smooth (200–500ms)

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Total caps ~34pt, 3 quick actions visible, tighter hero padding |
| iPhone 13/14/15 | 390pt | Standard hero, total ~40pt, 4 quick actions |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the top bar |
| iPhone 15/16 Pro Max | 430pt | Larger hero, more currency rows above the fold |
| iPad | 768pt+ | Two-pane (accounts list + activity), centered send flow, larger fee card |

### Dynamic Type
- Titles, body, names, amounts: full scale
- Hero total: scales but caps to protect the single-line layout
- Tab labels, uppercase labels: fixed
- Currency-row figures: fixed tabular size for column alignment

### Orientation
- All primary tabs and the send flow: **portrait-locked** on iPhone
- iPad: landscape supported with split layout

### Touch Targets
- Bright-green CTA: 52pt height — unmissable
- Quick-action circles: 52pt
- Transaction / currency rows: 64pt, full-row tappable
- Tab icons: 24pt glyph, 44pt effective hit
- Stepper dots: 44pt hit area each

### Safe Area Handling
- Top: top bar + hero respect safe area / Dynamic Island
- Bottom: tab bar opaque, respects home indicator; the send flow's sticky "Continue" floats above it
- Sides: 16pt content insets throughout

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas: `#FFFFFF`
- Surface neutral: `#F7F7F7`
- Divider: `#E5E5E5`
- Text primary: `#0E0F0C`
- Text secondary: `#6B6F66`
- Forest (structure): `#163300`
- Forest hero surface: `#0E2200`
- Bright Green (action): `#9FE870`
- Bright Green pressed: `#8AD45C`
- Bright Green tint: `#EAF9DC`
- Success green: `#2F8F4E`
- Error red: `#D4332B`

### Example Component Prompts
- "Create a SwiftUI Wise currency balance row: 64pt tall on white with a 1pt #E5E5E5 bottom divider. Leading 32pt circular flag chip, then 'EUR' in Inter 16pt weight 600 #0E0F0C with 'Euro' 13pt weight 400 #6B6F66 below. Trailing balance '€3,180.55' in Inter 22pt weight 800 #0E0F0C, tabular numerals, right-aligned. Pressed background #F7F7F7."
- "Build the Wise primary CTA: 52pt tall full-width button, 16pt radius, background #9FE870, 'Send money' in Inter 16pt weight 800 #163300 (forest — never white on bright green). Pressed: background #8AD45C, scale 0.98, soft haptic."
- "Design the Wise forest account hero: full-width panel, background #0E2200, 20pt radius, 24pt padding, shadow rgba(14,34,0,0.25) 0 12px 32px. 'TOTAL BALANCE' label 11pt #9FE870 uppercase, total '£12,480.65' in 40pt weight 800 white tabular (roll digits into place on load), and a #9FE870 'Add money' affordance."
- "Build the Wise fee-transparency card: white card, 1pt #E5E5E5, 16pt radius, 20pt padding. Itemized rows label↔value: 'You send £1,000.00', 'Our fee £4.31', 'Amount we convert £995.69', 'Guaranteed rate 1.1632', and an emphasized 'Recipient gets €1,158.10' line in forest with a #EAF9DC highlight band. A vertical guide line connects the steps. All values tabular."
- "Create the Wise send-money stepper: numbered steps Recipient → Amount → Review → Pay. Completed step is a #9FE870 dot with a forest check, active is a forest dot with white numeral, upcoming is #E5E5E5; connecting rail #E5E5E5 fills forest as steps complete."

### Iteration Guide
1. Canvas is bright `#FFFFFF`; keep one dark anchor — the forest `#0E2200` hero
2. Forest `#163300` is the structural ink (titles, hero, numbers); Bright Green `#9FE870` is action/highlight only
3. Forest text on bright green — `#163300`, never white on `#9FE870`
4. The total/balance is the heaviest element — 32–40pt weight 800, tabular numerals
5. Money columns (currency rows, fee lines, total) are always tabular and decimal-aligned
6. The fee-transparency card with the highlighted "Recipient gets" line is the signature object — never hide the cost
7. State the mid-market rate plainly with a 24h guarantee; pulse a tiny live dot
8. Roll numbers into place (~500ms) so money visibly lands; separate with 1pt borders, soft green-tinted shadow only for the hero/press