---
version: alpha
name: Wealthsimple
description: A warm off-white editorial canvas where a generous Tiempos serif sets near-cinematic headlines, a clean grotesque carries the numbers, and a muted celery-green and terracotta palette keeps the money feeling calm and human — finance designed like a print magazine, not a banking app.

colors:
  # Surface / canvas
  background: "#f9f8f7"          # warm off-white page canvas
  surface: "#fcfcfc"             # near-white raised cards
  surface-warm: "#ffffff"        # pure-white panels and form fields
  background-midnight: "#09090a" # near-black dark sections and the primary button fill

  # Ink / text
  ink: "#32302f"                 # warm near-black body and headline ink
  ink-soft: "#4d4a46"            # warm taupe supporting copy
  ink-muted: "#686664"           # captions, metadata
  ink-faint: "#94908d"           # slate-60 disclosures, faint helper text
  on-dark: "#fcfcfc"             # text on midnight sections and the dark button

  # Brand accent — Wealthsimple's calm naturals
  primary: "#486635"             # celery / forest green — links, success, accent CTAs
  primary-soft: "#99b383"        # celery-70 light green tint for fills and illustration
  on-primary: "#fcfcfc"          # near-white text on green
  accent-warm: "#ff8a71"         # terracotta-70 — secondary accent, illustration warmth

  # Borders
  border: "#c9c6c4"              # slate-80 hairline dividers and card edges
  border-active: "#afaaa7"       # outlines-active — focused / active input outline

  # Shadow tint (opaque stand-in for the elevation table)
  shadow-soft: "#d9d6d3"         # was rgba(50,48,47,0.08) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Tiempos, Georgia, 'Times New Roman', serif"
    fontSize: 128px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: -1.28px
  display:
    fontFamily: "Tiempos, Georgia, 'Times New Roman', serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: -0.64px
  heading:
    fontFamily: "The Future, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.16
    letterSpacing: 0.24px
  heading-sub:
    fontFamily: "The Future, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.16px
  body-large:
    fontFamily: "The Future, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.09px
  body:
    fontFamily: "The Future, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.08px
  body-emphasis:
    fontFamily: "The Future, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.08px
  button-ui:
    fontFamily: "Wealthsimple Sans, The Future, Helvetica, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.4px
  caption:
    fontFamily: "The Future, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.07px
  label:
    fontFamily: "Wealthsimple Sans, The Future, Helvetica, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.3px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px
  6xl: 128px

rounded:
  sm: 4px
  md: 12px
  lg: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.background-midnight}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"

  button-secondary:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-accent-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-warm:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px

  input:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px

  badge:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.background-midnight}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  badge-warm:
    backgroundColor: "{colors.accent-warm}"
    textColor: "{colors.background-midnight}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Wealthsimple Design System

## Overview

Wealthsimple's site refuses to look like a financial product. The canvas is a warm, paper-like off-white (`{colors.background}`) — never clinical pure white — and the whole page is paced like the opening spread of a design magazine: a single enormous serif statement, a slow scroll, generous air, and photography that feels candid rather than stock. The headline "More is more" is set in **Tiempos**, a refined book serif (`{typography.display-hero}`), at sizes that climb past 64px toward a near-cinematic 128px. Choosing a literary serif for a brokerage is the brand's entire argument: money here is calm, considered, and human, not a flashing ticker.

The typographic system is a deliberate two-voice arrangement. **Tiempos** serif carries the emotional, editorial headlines — the claims, the manifestos, the big numbers framed as ideas. A clean grotesque sans, **The Future** (`{typography.body}`), with **Wealthsimple Sans** (`{typography.button-ui}`) for buttons and labels, handles everything functional: paragraphs, navigation, form fields, fine print. The serif gives the brand its warmth and confidence; the sans gives it precision and trust. Crucially, the sans uses *positive* letter-spacing (a slight tracking of +0.08px to +0.4px) and relaxed 1.4 line-heights, which keeps the running text feeling open and unhurried rather than dense.

The color story is restraint in service of calm. Against the warm off-white, Wealthsimple reaches for **muted naturals** — a forest-celery green (`{colors.primary}`) for links, success, and accent actions, a soft sage (`{colors.primary-soft}`) for fills, and a warm terracotta (`{colors.accent-warm}`) for illustration and secondary accents. Nothing is saturated or alarming; the greens read like plants, not gain/loss indicators. The primary CTA is a quiet near-black **pill** (`{colors.background-midnight}`) with off-white text — understated, grown-up, never shouting. Dark sections invert to a deep midnight (`{colors.background-midnight}`) for moments of contrast, but the resting state is always warm and light. The overall impression is editorial trust: a bank that reads like a well-set book.

**Key Characteristics:**
- Warm off-white canvas (`{colors.background}`) — never clinical pure white, always a touch of paper warmth
- **Tiempos** serif for all display headlines (`{typography.display-hero}`), scaling toward a cinematic 128px — the brand's editorial signature
- **The Future** grotesque sans for body and UI (`{typography.body}`), **Wealthsimple Sans** for buttons/labels (`{typography.button-ui}`)
- *Positive* letter-spacing and 1.4 line-heights on the sans — open, unhurried, magazine-like reading rhythm
- A muted naturals palette: forest-celery green (`{colors.primary}`), soft sage (`{colors.primary-soft}`), warm terracotta (`{colors.accent-warm}`)
- Primary CTA is a quiet near-black **pill** (`{colors.background-midnight}`) with off-white text — understated, never loud
- Warm near-black ink (`{colors.ink}`) instead of pure black — softens the whole page
- Candid, human photography over abstract fintech graphics
- 12px radius on cards and inputs, fully-rounded pills on buttons (`{rounded.pill}`)
- Generous whitespace and editorial pacing — sections breathe like print spreads

## Colors

### Surface & Canvas
- **Warm Off-White** (`{colors.background}`): The dominant canvas. A paper-warm white that defines the brand's calm.
- **Near-White** (`{colors.surface}`) / **Pure White** (`{colors.surface-warm}`): Raised cards and form fields, a hair brighter than the canvas.
- **Midnight** (`{colors.background-midnight}`): The deep near-black for inverted sections and the primary button fill.

### Ink / Text
- **Warm Near-Black** (`{colors.ink}`): Headlines and body — warm-tinted, never pure black.
- **Warm Taupe** (`{colors.ink-soft}`): Supporting paragraph copy.
- **Muted** (`{colors.ink-muted}`) / **Faint Slate** (`{colors.ink-faint}`): Captions, metadata, and the lowest-emphasis disclosures.
- **On-Dark** (`{colors.on-dark}`): Off-white text on midnight sections and the dark button.

### Brand Accent
- **Forest Celery** (`{colors.primary}`): The signature green. Links, success states, and accent CTAs — muted and natural, never a saturated alarm green.
- **Soft Sage** (`{colors.primary-soft}`): A light celery tint for fills, badges, and illustration.
- **Terracotta** (`{colors.accent-warm}`): A warm secondary accent for illustration and emphasis.
- **On-Primary** (`{colors.on-primary}`): Off-white text on green.

### Borders & Shadow Tint
- **Hairline** (`{colors.border}`): Card edges and dividers — soft slate, low contrast.
- **Active Outline** (`{colors.border-active}`): Focused / active input outlines.
- **Shadow** (`{colors.shadow-soft}`): Opaque stand-in for the faint warm ambient shadow under cards (the original was an rgba over the warm ink — flattened for the Google spec).

## Typography

### Font Family
- **Display**: `Tiempos`, a refined book serif, with fallbacks `Georgia, 'Times New Roman', serif`. Carries every emotional headline.
- **Body / UI**: `The Future`, a clean grotesque, with fallbacks `Helvetica, system-ui, -apple-system, Arial, sans-serif`. Carries paragraphs, navigation, and fine print.
- **Buttons / Labels**: `Wealthsimple Sans`, the proprietary UI sans, falling back to `The Future` and the system stack.
- **OpenType / tracking**: serif display uses gentle negative tracking (-0.64px to -1.28px); the sans uses *positive* tracking (+0.08px to +0.4px) with open 1.4 line-heights.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 128px / Tiempos serif / -1.28px — the cinematic marquee headline |
| `display` | 64px / Tiempos serif — major section headlines |
| `heading` | 48px / The Future 500 — large sans section titles |
| `heading-sub` | 32px / The Future — sub-section headings |
| `body-large` | 18px / The Future — lead paragraphs |
| `body` | 16px / The Future — standard body and inputs |
| `body-emphasis` | 16px / The Future 500 — emphasized inline copy |
| `button-ui` | 16px / Wealthsimple Sans / +0.4px — button and pill labels |
| `caption` | 14px / The Future — captions, helper text |
| `label` | 12px / Wealthsimple Sans / +0.3px — small UI labels, badges, disclosures |

### Principles
- **Serif for feeling, sans for facts**: Tiempos makes the emotional claims; The Future carries the data and the fine print.
- **Open, not dense**: positive tracking and 1.4 line-heights give the sans a relaxed, editorial reading rhythm.
- **Scale the serif boldly**: display headlines climb toward 128px — the serif is meant to feel like a printed cover, not a UI label.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step. Wealthsimple is generous — major sections are separated by `{spacing.5xl}`–`{spacing.6xl}`, giving the serif headlines and candid photography room to breathe like a magazine layout.

### Grid & Container
- Max content width: ~1280px, centered (the layout responds across breakpoints from 375px up to 1440px)
- Common pattern: a giant serif statement over warm off-white, paired with candid lifestyle photography
- Cards use a soft 12px radius and sit a hair brighter than the canvas

### Whitespace Philosophy
- **Air is the luxury**: generous negative space signals calm and confidence, the opposite of a busy trading dashboard
- **Editorial pacing**: sections unfold one statement at a time, paced like spreads in a print magazine
- **Warmth over sterility**: the off-white canvas and warm ink keep even data-heavy sections feeling human

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, warm off-white field | The dominant page canvas and most content |
| Card (Level 1) | Faint warm ambient (`{colors.shadow-soft}`), hairline `{colors.border}` | Resting cards lifted gently from the canvas |
| Raised (Level 2) | Slightly larger soft shadow (`{colors.shadow-soft}`) | Feature cards and floating panels |
| Midnight (Level 3) | Tonal inversion to `{colors.background-midnight}` | Dark statement sections — depth through tone, not shadow |
| Focus Ring | `{colors.border-active}` 2px outline | Keyboard focus on inputs and buttons |

**Shadow Philosophy**: Wealthsimple's shadows are barely-there and warm-tinted, never the cool gray drop shadows of a dashboard UI. Separation comes mostly from the gentle tone difference between the warm canvas (`{colors.background}`) and the brighter card surfaces (`{colors.surface-warm}`), plus hairline borders. Real depth is reserved for the tonal inversions — the midnight sections — which create contrast through color rather than elevation.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Tiny chips, inline tags |
| `md` | 12px | Cards, inputs, panels — the default container radius |
| `lg` | 24px | Large feature cards and media containers |
| `pill` | 9999px | Buttons and badges — the soft, friendly pill |

The system is gentle and rounded throughout — soft 12px corners on containers and fully-rounded pills on every button. Nothing is sharp; the radii reinforce the calm, approachable, human tone.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Midnight (`{colors.background-midnight}`) pill fill, off-white text, `{rounded.pill}`. The main CTA — quiet and grown-up. Hover lifts toward `{colors.ink}`.
- **`button-secondary`** — White (`{colors.surface-warm}`) pill fill, warm-black text. The ghost-style "Log in" pattern. Hover fills `{colors.background}`.
- **`button-accent`** — Forest celery (`{colors.primary}`) pill fill, off-white text. Used sparingly for accent actions. Hover deepens toward `{colors.ink}`.

### Cards
- **`card`** / **`card-warm`** — Near-white / pure-white surfaces, 12–24px radius. Lifted from the warm canvas by tone and a faint warm shadow.

### Inputs
- **`input`** — White (`{colors.surface-warm}`) fill, warm-black text, 12px radius. **`input-focus`** keeps the fill and adds a `{colors.border-active}` outline.

### Navigation
- **`nav-bar`** — Warm off-white (`{colors.background}`) bar with warm-black links and a midnight "Get started" pill at the right. Sits flush at the top.

### Links & Badges
- **`link`** — Forest celery text; **`link-hover`** shifts to warm-black.
- **`badge`** — Soft sage (`{colors.primary-soft}`) pill with midnight text; **`badge-warm`** uses terracotta (`{colors.accent-warm}`) for warmer emphasis.

## Do's and Don'ts

### Do
- Keep the canvas warm off-white (`{colors.background}`) — never clinical pure white
- Set every headline in **Tiempos** serif (`{typography.display-hero}`), scaling boldly toward 128px
- Use **The Future** (`{typography.body}`) for body and **Wealthsimple Sans** (`{typography.button-ui}`) for buttons and labels
- Give the sans open, positive tracking and 1.4 line-heights for a relaxed editorial rhythm
- Reach for muted naturals — celery green (`{colors.primary}`), sage (`{colors.primary-soft}`), terracotta (`{colors.accent-warm}`)
- Keep the primary CTA a quiet midnight **pill** (`{colors.background-midnight}`) with off-white text
- Use warm near-black ink (`{colors.ink}`) instead of pure black for all text
- Lead with candid, human photography over abstract fintech graphics
- Create dark contrast moments through tonal inversion to midnight, not heavy shadows

### Don't
- Don't use pure white (`#ffffff`) as the page canvas — Wealthsimple's white is always warm
- Don't set headlines in the sans — the Tiempos serif headline is the brand's emotional core
- Don't reach for saturated or alarming greens/reds — the naturals are muted and calm by design
- Don't make the primary CTA loud or colorful — it stays a quiet midnight pill
- Don't crowd sections — generous whitespace and editorial pacing are the luxury signal
- Don't use pure black (`#000000`) ink — use warm near-black (`{colors.ink}`)
- Don't apply cool gray dashboard drop shadows — shadows are faint and warm-tinted
- Don't use abstract chart/graph hero art — the brand leads with people and warmth

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single column; serif hero scales from 128px down toward ~40px; nav collapses to a menu; CTA pill goes full-width |
| Mobile | 480–767px | Single column; tighter section padding; photography stacks above copy |
| Tablet | 768–1023px | Two-column feature rows begin; headline reduced; more horizontal pairing |
| Desktop | 1024–1249px | Full layout; large serif statements paired with candid imagery |
| Large | ≥1280px | Max ~1280px container, centered; generous section spacing (`{spacing.6xl}`) |

### Touch Targets
- Pill buttons run comfortably tall with `12px 24px` padding — easy thumb targets
- Open line-heights and generous spacing keep tap rows well separated on mobile

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle on mobile; the midnight "Get started" pill persists
- **Hero**: the giant Tiempos headline scales down dramatically while keeping its serif character; photography stacks below copy
- **Spacing**: section padding compresses from ~128px toward ~48–64px
- **Type**: display drops from 128px toward ~40px; sans body stays at a readable 16px

### Image Behavior
- Candid lifestyle photography reflows as full-bleed or grid children; media containers carry the `{rounded.md}`–`{rounded.lg}` radius and stack above copy on small screens

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Warm Off-White (`{colors.background}`)
- Text: Warm Near-Black (`{colors.ink}`)
- Brand accent: Forest Celery (`{colors.primary}`)
- Secondary text: Warm Taupe (`{colors.ink-soft}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: **Midnight pill** (`{colors.background-midnight}` fill, off-white text)

### Example Component Prompts

- "Create a hero on warm off-white (`{colors.background}`) with a huge Tiempos serif headline (`{typography.display-hero}`, up to 128px) in warm near-black (`{colors.ink}`), letter-spacing -1.28px, a relaxed body paragraph in The Future sans below it, and a midnight (`{colors.background-midnight}`) pill CTA with off-white text"
- "Build the primary button: midnight (`{colors.background-midnight}`) fill, off-white (`{colors.on-dark}`) text in Wealthsimple Sans (`{typography.button-ui}`), fully rounded pill (`{rounded.pill}`), `12px 24px` padding, hover lifts toward `{colors.ink}`"
- "Create a navigation bar: warm off-white (`{colors.background}`) background, warm-black (`{colors.ink}`) links, with a midnight 'Get started' pill at the right (`{components.nav-bar}`)"
- "Design a card: near-white (`{colors.surface}`) fill, warm-black text, `{rounded.md}` (12px) radius, 24px padding, faint warm shadow (`{colors.shadow-soft}`) and a hairline `{colors.border}` edge"
- "Build an input: white (`{colors.surface-warm}`) fill, warm-black text in The Future (`{typography.body}`), `{rounded.md}` radius; on focus keep the fill and add a 2px `{colors.border-active}` outline"
- "Render an accent badge: soft sage (`{colors.primary-soft}`) pill with midnight (`{colors.background-midnight}`) text in `{typography.label}`, `{rounded.pill}`, `4px 12px` padding"

### Iteration Guide

1. Start on warm off-white (`{colors.background}`). If you reached for pure white or a cool gray, warm it up — the canvas is paper, not screen.
2. Headlines must be Tiempos serif (`{typography.display-hero}`), scaled boldly. If your headline is in the sans, swap it.
3. Body and UI are The Future / Wealthsimple Sans with positive tracking and 1.4 line-heights — keep it open and unhurried.
4. Accents are muted naturals — celery green (`{colors.primary}`), sage, terracotta. If a color reads as a saturated alert, mute it.
5. The primary CTA is a quiet midnight pill (`{colors.background-midnight}`), never a loud colored button.
6. Use warm near-black ink (`{colors.ink}`), never pure black, for all text.
7. Create dark contrast through tonal inversion to midnight (`{colors.background-midnight}`), not heavy shadows — keep elevation faint and warm.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Wealthsimple. Brand names and trademarks belong to their respective owners.