---
version: alpha
name: Wealthsimple
description: "Colossal Tiempos serif over warm linen — photography carries all the color."
colors:
  on-surface-variant: "#686664"
  on-surface: "#1C1B1B"
  surface: "#eeece7"
  error: "#f2dedb"
  primary: "#32302F"
  off-white: "#FCFCFC"
  slate-70: "#afaaa7"
  slate-90: "#e4e2e1"
  slate-95: "#f1f0f0"
  linen-light: "#faf8f5"
  warm-linen: "#F5F3EF"
  midnight: "#09090a"
  terracotta-40: "#a43d12"
  terracotta-70: "#ff8a71"
  celery-40: "#486635"
  celery-70: "#99b383"
  dusk-purple: "#5F5974"
  umber: "#564C47"
  forest: "#0C330D"
  butter: "#EEE3B1"
typography:
  display:
    fontFamily: Tiempos
    fontSize: 128px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: 0em
  h1:
    fontFamily: The Future
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0em
  h2:
    fontFamily: The Future
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
  lead:
    fontFamily: The Future
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  subhead:
    fontFamily: The Future
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-large:
    fontFamily: The Future
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: The Future
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  label:
    fontFamily: The Future
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  caption:
    fontFamily: The Future
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
rounded:
  small: 4px
  normal: 12px
  large: 24px
  xlarge: 32px
  pill-button: 1000px
spacing:
  "1": 0.25rem
  "2": 0.5rem
  "3": 0.75rem
  "4": 1rem
  "6": 1.5rem
  "8": 2rem
  "12": 3rem
  "16": 4rem
  "24": 6rem
  "32": 8rem
---
# Wealthsimple — Style Reference
> Colossal Tiempos serif over warm linen — photography carries all the color.

**Theme:** mixed

Wealthsimple runs an almost monochrome design system: near-black ink (`#1C1B1B`) and off-white (`#FCFCFC`) do nearly all the work, separated by a long, cool "slate" ramp of warm greys and two whisper-soft "linen" neutrals. The one signature move is scale — a Tiempos serif set as large as **128px** at weight 400, the kind of confident editorial display type you expect from a magazine, not a bank. Color is deliberately withheld from the chrome and handed to the imagery instead: the hero is a bruised slate-to-mauve gradient with floating rounded photo tiles and a single hand-drawn white line chart. Functional accents are the only saturated tokens — a burnt `terracotta` for errors and links, a muted `celery` green for success — and they never touch a primary button. Buttons are fully rounded pills (a comical `1600px` radius that just means "capsule"), outlined in 1.5px hairlines; everything else sits on generous 8rem section rhythm inside a 1264px column.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#1C1B1B` | `--color-text` | Primary text, hairline borders, secondary-button ink; the darkest slate step (slate-10). |
| Off-White | `#FCFCFC` | `--ws-color-off-white` | Default canvas, nav background, and text on dark fills — not pure white. |
| Slate-20 (Graphite) | `#32302F` | `--color-button-primary` | Primary button fill and structural borders; the "black" you actually see on CTAs. |
| Slate-40 (Text Light) | `#686664` | `--color-text-light` | Secondary and muted body text, placeholders. |
| Slate-70 | `#afaaa7` | `--color-outlines-active` | Active outlines, scrollbar thumb, disabled track. |
| Slate-90 (Outlines) | `#e4e2e1` | `--color-outlines` | Default hairline outlines and the nav border. |
| Slate-95 | `#f1f0f0` | `--ws-color-slate-95` | Hover fills, table highlight, context-menu surface. |
| Linen | `#eeece7` | `--ws-color-linen` | Warm neutral section background — the "paper" mode. |
| Linen Light | `#faf8f5` | `--ws-color-linen-light` | Lightest warm surface, one step off canvas. |
| Warm Linen | `#F5F3EF` | *(measured section bg)* | Alternate warm section fill observed on marketing blocks. |
| Midnight | `#09090a` | `--ws-color-midnight` | Near-black full-bleed dark-section background. |
| Terracotta-40 | `#a43d12` | `--ws-color-terracotta-40` | Error text and editorial link accent — never on a primary CTA. |
| Terracotta-70 | `#ff8a71` | `--ws-color-terracotta-70` | Soft coral, decorative/illustrative use only. |
| Celery-40 | `#486635` | `--ws-color-celery-40` | Success text; the only green in the UI chrome. |
| Celery-70 | `#99b383` | `--ws-color-celery-70` | Muted sage, decorative pair to celery-40. |
| Dusk Purple | `#5F5974` | *(editorial/photo)* | Hero gradient + floating-tile ground; color lives in imagery, not UI. |
| Umber | `#564C47` | *(editorial/photo)* | Warm content-tile background in the hero cluster. |
| Forest | `#0C330D` | *(editorial/photo)* | Deep green content-tile background (the grass video). |
| Butter | `#EEE3B1` | *(editorial/photo)* | Pale-yellow content-tile background in the hero cluster. |
| Error Wash | `#f2dedb` | `--ws-color-background-error` | Tinted background behind inline error messages. |

## Tokens — Typography
### Tiempos — the display serif, headlines and hero at 400/500 · `--font-serif`
- **Substitute:** 'Tiempos Headline', Georgia, 'Times New Roman', serif
- **Weights:** 400 (regular), 500 (medium) — plus matching italics
- **Sizes:** 128px, 64px, 48px (display + headings)
- **Line height:** tight, ~0.95–1.05 at display sizes
- **Letter spacing:** none to slightly negative; the serif carries the elegance unaided
- **Role:** Every hero line and section heading ("More is more"). Set enormous and low-weight — restraint through scale, not boldness.

### The Future — the sans for body, UI and labels · `--font-sans`
- **Substitute:** 'Helvetica Neue', system-ui, Arial, sans-serif
- **Weights:** 400 (regular), 500 (medium)
- **Sizes:** 24px, 20px, 18px, 16px, 14px, 12px
- **Line height:** ~1.4–1.5 for body and subheads
- **Letter spacing:** neutral; 500 used for buttons, nav, and small labels
- **Role:** Subheads ("Being better than a bank means more of everything."), buttons, nav, and all running copy. Also loads `wealthsimple-sans` and `wealthsimple-display-sans` as brand-native cousins.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display (Tiempos) | 128px | ~0.95 | none | `--text-display` |
| H1 (Tiempos) | 64px | ~1.0 | none | `--text-h1` |
| H2 (Tiempos) | 48px | ~1.05 | none | `--text-h2` |
| Lead (The Future) | 24px | ~1.4 | neutral | `--text-lead` |
| Subhead | 20px | ~1.4 | neutral | `--text-subhead` |
| Body Large | 18px | ~1.5 | neutral | `--text-body-lg` |
| Body | 16px | ~1.5 | neutral | `--text-body` |
| Label | 14px | ~1.4 | neutral | `--text-label` |
| Caption | 12px | ~1.4 | neutral | `--text-caption` |

## Tokens — Spacing & Shapes
**Base unit:** 4px (0.25rem)   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 1 | 0.25rem | `--ws-spacing-1` |
| 2 | 0.5rem | `--ws-spacing-2` |
| 3 | 0.75rem | `--ws-spacing-3` |
| 4 | 1rem | `--ws-spacing-4` |
| 6 | 1.5rem | `--ws-spacing-6` |
| 8 | 2rem | `--ws-spacing-8` |
| 12 | 3rem | `--ws-spacing-12` |
| 16 | 4rem | `--ws-spacing-16` |
| 24 | 6rem | `--ws-spacing-24` |
| 32 | 8rem | `--ws-spacing-32` |

### Border Radius
| Element | Value |
|---------|-------|
| Small (inputs, chips) | 4px (`--ws-border-radius-small`) |
| Normal (cards, tiles) | 12px (`--ws-border-radius-normal`) |
| Large | 24px (`--ws-border-radius-large`) |
| XLarge | 32px (`--ws-border-radius-xlarge`) |
| Pill / Button | 1000px–1600px (fully rounded capsule) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Floating | `0 1px 4px 0 rgb(16 24 40/10%), 0 1px 2px 0 rgb(16 24 40/6%)` | `--ws-shadow-floating` |

### Layout
- **Page max-width:** 1264px content (`--ws-container-max-width`); 1440px nav (`--ws-nav-container-max-width`)
- **Section gap:** 8rem top/bottom (`--ws-section-padding-top/bottom`)
- **Card padding:** 12–24px inside rounded tiles
- **Element gap:** 1.5rem inline container padding (`--ws-spacing-6`)

## Components
### Primary Button
**Role:** The single dominant CTA ("Get started" in the dark nav pill).
Fill `#32302F` (near-black), text `#FCFCFC`, fully rounded pill, padding `12px 16px`, The Future 14px/500, no shadow. Hover lightens via a 20% off-white overlay. Border-width token is 1.5px for the outlined variants.

### Secondary Button
**Role:** Lower-emphasis action ("Log in" pill, in-hero "Get started").
Fill `#FCFCFC`, text `#32302F`, 1.5px `#32302F` outline, same pill radius and 14px/500 type. Reads as an outlined capsule on the off-white nav.

### Ghost / Icon Button
**Role:** Nav utilities (search glyph, hamburger).
No fill, ink `#1C1B1B` glyph, circular 44px min touch target, subtle 10% slate hover wash. Padding as tight as 8px for icon-only.

### Navigation Bar
**Role:** Sticky top chrome, 5.75rem tall.
Off-white `#FCFCFC` background (90% opacity + `blur(16px)` when floating), 1px `#e4e2e1` bottom border, serif Wealthsimple wordmark left, pill controls right inside a rounded container.

### Content Tile / Media Card
**Role:** The floating photo/video squares clustered in the hero.
12px corner radius, full-bleed imagery (people, grass, interiors), varied editorial backgrounds (`#5F5974`, `#0C330D`, `#EEE3B1`, `#564C47`). Overlapping z-stack, no visible border — the image is the surface.

### Hero Display Heading
**Role:** The single load-bearing statement ("More is more").
Tiempos 64–128px at weight 400, `#FCFCFC` over the gradient (or `#1C1B1B` on light), centered, tight leading. One idea, enormous.

### Subhead
**Role:** One-line support under the display heading.
The Future 24px/400, `#FCFCFC` at ~90%, centered, generous space above the CTA.

### Text Link
**Role:** Inline and footer links.
Ink `#1C1B1B` at 18px/400, no underline by default; editorial accents may use terracotta `#a43d12`. A rounded 12px hover pad (`6px 12px`) appears on nav-style links.

### Input Field
**Role:** Forms and search.
White `#FFF` fill, ink text `#1C1B1B`, `#686664` placeholder, min-height 4rem, 1.5rem inline padding, 3px focus ring at 50% ink. Roomy and quiet.

### Section Surface
**Role:** Alternating marketing bands.
Off-white `#FCFCFC`, warm linen `#eeece7`/`#F5F3EF`, or midnight `#09090a` full-bleed, each with 8rem vertical padding. Color arrives through photography, not fills.

### Comparison Table
**Role:** Feature/plan comparisons.
1px `#e4e2e1` borders, `#f1f0f0` row highlight, `#686664` highlight border, off-white base. Quiet, hairline-ruled, no zebra saturation.

## Do's and Don'ts
### Do
- Set headlines in Tiempos at massive sizes (64–128px) and low weight (400) — scale is the emphasis.
- Keep chrome monochrome: ink `#1C1B1B` on off-white `#FCFCFC`, with the slate ramp for everything in between.
- Let photography and gradients carry all the saturation; frame media in 12px-radius tiles.
- Use fully-rounded pill buttons with 1.5px hairline outlines for secondary actions.
- Reserve terracotta `#a43d12` for links/errors and celery `#486635` for success — functional only.
- Give sections 8rem of breathing room inside a 1264px column.

### Don't
- Don't color a primary CTA — it is always near-black `#32302F` on off-white, never terracotta or celery.
- Don't set the display serif bold; the whole voice is confident-but-quiet at weight 400.
- Don't use pure white `#FFFFFF` for canvas — the system's white is `#FCFCFC`.
- Don't add drop shadows beyond the single subtle floating token; depth comes from borders and luminance.
- Don't tighten the section rhythm; the generosity of space is the premium signal.
- Don't introduce a second accent hue — the terracotta/celery functional pair is the entire saturated palette.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FCFCFC` | Default page and nav background. |
| 1 | Linen Light | `#faf8f5` | Faint warm lift, one step off canvas. |
| 2 | Linen | `#eeece7` | Warm neutral marketing band. |
| 2 | Warm Linen | `#F5F3EF` | Alternate warm section fill. |
| 3 | Slate-95 | `#f1f0f0` | Hover fills, table highlight, menus. |
| — | Midnight | `#09090a` | Full-bleed dark inversion section. |
| — | Gradient | `#5F5974` ground | Photographic hero (dusk-purple gradient). |

## Elevation
Depth is conveyed almost entirely through **1px hairline borders** (`#e4e2e1`) and **luminance steps** across the slate ramp — not shadows. Only one shadow token exists (`--ws-shadow-floating`, a whisper of 10%/6% at 1–4px) and it is reserved for floating chrome like the blurred nav. In the hero, elevation is illustrative: overlapping media tiles cast their own layering by z-stack and scale, not box-shadow. The system reads flat and editorial by intent.

## Imagery
Photography and short video are the entire color story. The hero clusters small **12px-radius media tiles** — candid people, a grass lawn, interiors, nightlife — floating over a slate-to-mauve gradient, threaded by a single hand-drawn **white line chart** that turns a market curve into a gesture. Imagery is warm, human, cinematic, and slightly nostalgic; it is never stocky or corporate. A thin hand-illustrated line motif (the chart) is the recurring graphic device. Icons are minimal, monoline, ink-colored.

## Layout
Full-bleed gradient/photographic hero, then contained editorial bands on a **1264px** column with **8rem** vertical rhythm. The nav is a sticky, blurred off-white bar (5.75rem tall, 1440px wide) with a serif wordmark left and a rounded pill-control cluster right. Content alternates off-white, warm-linen, and occasional midnight full-bleed sections. Everything is centered and generously spaced — a magazine cadence rather than a dense dashboard.

## Typography Voice
Two voices in deliberate tension. **Tiempos** (serif) is the star — set enormous (up to 128px) and never bold, it gives a fintech the gravitas of an editorial cover; the restraint is that it stays weight 400 and lets size alone command the page. **The Future** (geometric-humanist sans) handles everything functional at 12–24px, its medium (500) weight tightening buttons, nav, and labels so the serif never has to shout. The signature line is a giant serif headline paired with a single quiet sans subhead and a lone pill CTA — three elements, maximum space, zero clutter. It works because the color and energy are outsourced to imagery, leaving the type free to be calm and expensive.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FCFCFC` / text: `#1C1B1B` / surface: `#eeece7` / border: `#e4e2e1` / accent: `#a43d12` (terracotta, links/errors only) / primary action: `#32302F` (near-black pill, no distinct CTA hue)

## Example Component Prompts
1. **Hero**: Full-bleed dusk-purple-to-slate gradient (`#5F5974`). Centered Tiempos serif headline at 96–128px, weight 400, color `#FCFCFC`, tight leading. One-line The Future subhead at 24px `#FCFCFC` below. Cluster of overlapping 12px-radius photo/video tiles floating above, threaded by a thin hand-drawn white line chart. Single off-white pill "Get started" button (`#FCFCFC` fill, `#1C1B1B` text) centered below.
2. **Pill Nav**: Sticky 5.75rem bar, off-white `#FCFCFC` at 90% opacity with `blur(16px)`, 1px `#e4e2e1` bottom border. Serif wordmark left; right cluster of circular search + hamburger icon buttons, an outlined "Log in" pill (`#32302F` 1.5px border), and a filled near-black "Get started" pill (`#32302F` fill, `#FCFCFC` text), all 14px/500.
3. **Primary Button**: Fully-rounded pill, fill `#32302F`, text `#FCFCFC`, padding `12px 16px`, The Future 14px weight 500, no shadow, hover lightens 20%.
4. **Media Tile Cluster**: 5–7 overlapping squares at 12px radius, full-bleed warm cinematic photography, varied editorial grounds (`#0C330D`, `#EEE3B1`, `#564C47`), z-stacked at slight scale differences, no borders.
5. **Marketing Band**: Contained 1264px column on warm linen `#eeece7`, 8rem vertical padding, left-aligned Tiempos H2 at 48px `#1C1B1B`, The Future 18px body `#686664`, hairline `#e4e2e1` dividers.

## Similar Brands
- **Monzo / N26** — challenger-bank confidence, but Wealthsimple trades their bright brand color for near-monochrome restraint.
- **Klim Type Foundry (Tiempos in the wild)** — the same editorial-serif-as-identity move, oversized and quiet.
- **Aesop** — warm neutral "linen" palette, generous space, product-serious calm, color left to imagery.
- **Kinfolk / Cereal magazine** — the muted, human, slightly nostalgic editorial photography direction.
- **Stripe (early docs era)** — hairline-ruled, monochrome-with-one-functional-accent discipline in the chrome.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Ink & Neutrals */
  --color-text: #1c1b1b;
  --color-text-light: #686664;
  --color-off-white: #fcfcfc;
  --color-white: #ffffff;
  --color-slate-20: #32302f;   /* borders, primary button */
  --color-slate-40: #686664;
  --color-slate-50: #7a7674;
  --color-slate-60: #94908d;
  --color-slate-70: #afaaa7;   /* outlines-active */
  --color-slate-80: #c9c6c4;
  --color-slate-90: #e4e2e1;   /* outlines */
  --color-slate-95: #f1f0f0;
  --color-slate-98: #f8f8f8;
  --color-greyscale-50: #868686;
  --color-greyscale-75: #c2c2c2;
  --color-greyscale-95: #f2f2f2;
  /* Colors — Warm surfaces */
  --color-linen: #eeece7;
  --color-linen-light: #faf8f5;
  --color-warm-linen: #f5f3ef;
  --color-midnight: #09090a;
  /* Colors — Functional accents */
  --color-terracotta-40: #a43d12;  /* error / link */
  --color-terracotta-70: #ff8a71;
  --color-celery-40: #486635;      /* success */
  --color-celery-70: #99b383;
  --color-background-error: #f2dedb;
  /* Colors — Editorial / photographic grounds */
  --color-dusk: #5f5974;
  --color-umber: #564c47;
  --color-forest: #0c330d;
  --color-butter: #eee3b1;
  /* Typography — Families */
  --font-serif: 'Tiempos Headline', Georgia, 'Times New Roman', serif;
  --font-sans: 'The Future', 'Helvetica Neue', system-ui, Arial, sans-serif;
  /* Typography — Scale */
  --text-display: 128px;
  --text-h1: 64px;
  --text-h2: 48px;
  --text-lead: 24px;
  --text-subhead: 20px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-label: 14px;
  --text-caption: 12px;
  --leading-display: 0.95;
  --leading-body: 1.5;
  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  /* Border Radius */
  --radius-small: 4px;
  --radius-normal: 12px;
  --radius-large: 24px;
  --radius-xlarge: 32px;
  --radius-pill: 1000px;
  /* Shadow */
  --shadow-floating: 0 1px 4px 0 rgb(16 24 40 / 10%), 0 1px 2px 0 rgb(16 24 40 / 6%);
  /* Layout */
  --container-max-width: 1264px;
  --nav-container-max-width: 1440px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Ink & Neutrals */
  --color-text: #1c1b1b;
  --color-text-light: #686664;
  --color-off-white: #fcfcfc;
  --color-white: #ffffff;
  --color-slate-20: #32302f;
  --color-slate-40: #686664;
  --color-slate-50: #7a7674;
  --color-slate-60: #94908d;
  --color-slate-70: #afaaa7;
  --color-slate-80: #c9c6c4;
  --color-slate-90: #e4e2e1;
  --color-slate-95: #f1f0f0;
  --color-slate-98: #f8f8f8;
  --color-greyscale-50: #868686;
  --color-greyscale-75: #c2c2c2;
  --color-greyscale-95: #f2f2f2;
  /* Colors — Warm surfaces */
  --color-linen: #eeece7;
  --color-linen-light: #faf8f5;
  --color-warm-linen: #f5f3ef;
  --color-midnight: #09090a;
  /* Colors — Functional accents */
  --color-terracotta-40: #a43d12;
  --color-terracotta-70: #ff8a71;
  --color-celery-40: #486635;
  --color-celery-70: #99b383;
  --color-background-error: #f2dedb;
  /* Colors — Editorial grounds */
  --color-dusk: #5f5974;
  --color-umber: #564c47;
  --color-forest: #0c330d;
  --color-butter: #eee3b1;
  /* Typography */
  --font-serif: 'Tiempos Headline', Georgia, 'Times New Roman', serif;
  --font-sans: 'The Future', 'Helvetica Neue', system-ui, Arial, sans-serif;
  --text-display: 128px;
  --text-h1: 64px;
  --text-h2: 48px;
  --text-lead: 24px;
  --text-subhead: 20px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-label: 14px;
  --text-caption: 12px;
  --leading-display: 0.95;
  --leading-body: 1.5;
  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  /* Border Radius */
  --radius-small: 4px;
  --radius-normal: 12px;
  --radius-large: 24px;
  --radius-xlarge: 32px;
  --radius-pill: 1000px;
  /* Shadow */
  --shadow-floating: 0 1px 4px 0 rgb(16 24 40 / 10%), 0 1px 2px 0 rgb(16 24 40 / 6%);
}
```