---
title: "Wealthsimple design system"
variant: extended
source: https://www.wealthsimple.com/en-ca
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/wealthsimple-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Wealthsimple · Design System

> Calm financial confidence with a bold editorial edge

**Theme:** light · **Industry:** fintech · **Source:** https://www.wealthsimple.com/en-ca · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Wealthsimple pairs a quiet warm-neutral foundation with immersive, cinematic product sections. Oversized typography, pill-shaped controls, and vivid campaign imagery give the financial homepage an editorial, approachable feel.

## North star

Let warm editorial calm frame bold, full-bleed campaign moments, with unmistakable contrast around every action.

## Overview

The page balances a soft, warm canvas (#f5f3ef) with strong shifts into full-bleed dark and saturated section bands. In the first viewport, a deep blue-black campaign image fills the background; the oversized Canadian coin is campaign artwork, not a core interface colour. The pale navigation and announcement bars sit above it as rounded, high-contrast strips. Near-black text and restrained muted tones keep utility content legible, while white pill buttons provide clear actions. Typography pairs the bespoke geometric sans-serif the-future with the more literary tiempos display face; headings are large and open, with compact sans-serif utility text. The layout uses wide single-column sections, generous vertical breathing room, and occasional centered content blocks. Full-bleed image and video sections interrupt quieter editorial areas, using dark green, slate, and brown bands. Borders are subtle, surfaces mostly flat, and rounded controls soften the otherwise confident, spacious composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#1c1b1b` | `--color-soft-ink` | neutral | Primary headings, body copy, navigation text, and dark primary button text contrast. |
| Paper White | `#fcfcfc` | `--color-paper-white` | surface | Navigation and light surfaces, white hero controls, and text on dark backgrounds. |
| Warm Canvas | `#f5f3ef` | `--color-warm-canvas` | surface | Main page canvas and the broad quiet editorial sections. |
| Stone Line | `#94908d` | `--color-stone-line` | neutral | Measured input outline; use as a restrained boundary rather than a prominent divider. |
| Quiet Taupe | `#c9c6c4` | `--color-quiet-taupe` | neutral | Muted supporting text and secondary legal or terms links. |
| Ash Text | `#686664` | `--color-ash-text` | neutral | Subdued supporting copy, especially secondary text in the footer. |
| Forest Band | `#0c330d` | `--color-forest-band` | brand | Full-bleed green feature section background. |
| Midnight Band | `#080f16` | `--color-midnight-band` | brand | Dark full-bleed hero and feature background; the screenshot campaign artwork adds blue tones. |
| Slate Violet | `#5f5974` | `--color-slate-violet` | brand | Full-bleed muted violet feature section background. |
| Earth Umber | `#564c47` | `--color-earth-umber` | brand | Full-bleed brown feature section background. |
| Soft Marigold | `#eee3b1` | `--color-soft-marigold` | accent | Warm accent detail; keep limited, rather than treating it as a page-wide surface. |
| Haze Lilac | `#9894a3` | `--color-haze-lilac` | accent | Opening tone in a section gradient, not a dominant interface colour. |
| Misted Mauve | `#b3abbc` | `--color-misted-mauve` | accent | Early middle tone in a section gradient. |
| Pale Orchid | `#d6c9dc` | `--color-pale-orchid` | accent | Soft transition tone within a measured section gradient. |
| Blush Lilac | `#f0dcef` | `--color-blush-lilac` | accent | Light pink-lilac gradient transition, used as atmospheric section colour. |
| Rose Mist | `#f4dce4` | `--color-rose-mist` | accent | Pale gradient finish tone; treat as a gradient detail, not a core solid surface. |

### Semantic aliases

`--color-canvas` → `#f5f3ef` (Warm Canvas) · `--color-surface` → `#fcfcfc` (Paper White) · `--color-surface-2` → `#0c330d` (Forest Band) · `--color-surface-3` → `#080f16` (Midnight Band) · `--color-surface-4` → `#5f5974` (Slate Violet) · `--color-text` → `#1c1b1b` (Soft Ink) · `--color-text-muted` → `#fcfcfc` (Paper White) · `--color-text-subtle` → `#c9c6c4` (Quiet Taupe) · `--color-border` → `#94908d` (Stone Line) · `--color-accent` → `#eee3b1` (Soft Marigold)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1b1b` | `#f5f3ef` | 15.51:1 | AAA |
| `#1c1b1b` | `#fcfcfc` | 16.75:1 | AAA |
| `#1c1b1b` | `#0c330d` | 1.22:1 | fail |
| `#1c1b1b` | `#080f16` | 1.12:1 | fail |
| `#fcfcfc` | `#f5f3ef` | 1.08:1 | fail |
| `#fcfcfc` | `#0c330d` | 13.69:1 | AAA |
| `#fcfcfc` | `#080f16` | 18.77:1 | AAA |
| `#c9c6c4` | `#f5f3ef` | 1.53:1 | fail |
| `#c9c6c4` | `#fcfcfc` | 1.66:1 | fail |
| `#c9c6c4` | `#0c330d` | 8.27:1 | AAA |

### Gradients

- `linear-gradient(rgb(152, 148, 163) 0%, rgb(179, 171, 188) 9.48%, rgb(214, 201, 220) 23.03%, rgb(240, 220, 239) 32.44%, rgb(244, 220, 228) 50%, rgb(251, 220, 209) 76.78%, rgb(255, 220, 196) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| the-future | `--font-body` | webfont | 400, 500 | Primary interface sans for headings, body, buttons, navigation, and links. | DM Sans |
| tiempos | `--font-display` | webfont | 400 | Expressive display serif for occasional campaign or editorial display moments. | Bodoni Moda |

- **the-future:** Use measured regular and medium weights; keep copy in sentence case, with subtly open tracking and generous heading scale.
- **tiempos:** Measured regular weight; reserve for a distinctive, literary accent against the dominant sans-serif system.

### Type scale — Perfect Fifth (ratio ≈ 1.557, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 128px | 400 | 1.16 | -0.01em | — | tiempos | Oversized editorial or campaign statements. |
| h1 | 64px | 500 | 1.16 | 0.005em | — | the-future | Primary page headline or hero message. |
| h2 | 58px | 400 | 1 | 0 | — | the-future | Large feature-section headings. |
| h3 | 56px | 400 | 1.16 | 0.005em | — | the-future | Secondary feature and editorial headings. |
| h4 | 48px | 500 | 1.16 | 0.005em | — | the-future | Smaller section titles and content headings. |
| body | 14px | 400 | 1.4 | 0.005em | — | the-future | Supporting paragraphs and explanatory copy. |
| caption | 12px | 400 | 1.4 | 0.005em | — | the-future | Fine print, labels, and compact annotations. |
| button | 14px | 500 | 1.4 | 0.005em | — | the-future | Primary and secondary action labels. |
| nav | 18px | 400 | 1.4 | 0.005em | — | the-future | Top-level product navigation labels. |
| link | 14px | 400 | 1.4 | 0.005em | — | the-future | Inline and secondary navigation links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 12, 14, 16, 20, 24, 32, 40, 64, 160 px.
- Section rhythm 160px · element gap 8px · card padding — · max content width 1184px.

Use a spacious, predominantly single-column section flow with a measured page max width of 1184px for contained content. The opening viewport layers announcement and navigation bars over a full-bleed campaign hero. Alternate broad image-led bands with quieter warm-canvas editorial sections; reserve centered alignment for newsletter and trust prompts. Keep content density low, use generous section separation, and let full-bleed media provide visual rhythm rather than adding many cards.

## Shape & elevation

- Radius: button `12px` · input `9999px` · nav `12px` · link `9999px` · xs `12px` · pill `9999px`
- Shadow `sm` (button, other): `rgba(16, 24, 40, 0.1) 0px 1px 4px 0px, rgba(16, 24, 40, 0.06) 0px 1px 2px 0px`
- Motion: standard transition `0.35s cubic-bezier(0.241, 0.969, 0.635, 0.997)` on interactive elements.

The interface is largely flat, with contrast created by section colour and media rather than stacked cards. Use subtle outlines for fields and only restrained button shadow where needed. Rounded announcement and navigation strips sit visibly above the hero; avoid heavy borders or layered dashboard-style surfaces.

## Imagery

Use cinematic, full-bleed campaign imagery and video as the major visual punctuation. The first hero shows a large dimensional gold Canadian coin against a moody blue-black scene; it is campaign-specific artwork, not a recurring brand palette. Other feature bands pair media with solid colour fields. Keep subjects large and legible, with generous breathing room around overlaid copy and controls.

## Components

### Announcement bar

Pale rounded strip above navigation with centered compact event copy, an inline registration link, and a dismiss control.

### Primary navigation

Light rounded bar with wordmark, product links, search and login controls, plus a dark Get started pill.

### Campaign hero

Full-bleed dark media field with large white headline, small serif kicker, outlined email input, and white Enter now action.

### Pill CTA

High-contrast rounded action using near-black with white text, or white with near-black text on dark imagery.

### Feature bands

Full-bleed media-led sections on forest, slate-violet, brown, or light surfaces; keep copy and controls clearly contrasted.

### Newsletter CTA

Centered TLDR content on the warm canvas, paired with a pale warm pill link to read the latest newsletter.

### Footer

Wide, multi-column warm-canvas footer with grouped company and legal links, compact text, and supporting brand marks.

### Measured component styles

- **Primary button** (“Get started”): background #1c1b1b · text #fcfcfc · radius 1600px · padding 12px 16px · 500 14px the-future
- **Secondary button** (“Enter now”): background #fcfcfc · text #1c1b1b · radius 1600px · padding 20px 32px · 500 16px the-future
- **Link** (“T&Cs apply”): transparent background · text #c9c6c4 · radius 0px · padding 0px · 400 14px the-future
- **Input**: transparent background · text #fcfcfc · border 1px solid #94908d · radius 100px · padding 20px 52px 1px 24px · 400 18px the-future
- **Navigation item** (“Our company”): transparent background · text #1c1b1b · radius 12px · padding 6px 12px · 400 18px the-future

## Do

- Use Warm Canvas (#f5f3ef) for broad calm content areas.
- Set campaign media edge-to-edge when it leads a section.
- Keep primary actions high contrast and pill-shaped.
- Pair large sans-serif statements with compact utility copy.
- Alternate media-led bands with quieter editorial sections.
- Treat gradient colours as atmospheric accents, not default UI fills.

## Don't

- Do not make every section dark or image-led.
- Do not reuse campaign coin artwork as a generic brand motif.
- Do not introduce unmeasured palette colours.
- Do not crowd the generous single-column section flow.
- Do not rely on heavy card shadows or thick outlines.
- Do not make muted text compete with primary headings.

## Agent prompt

Build a new Wealthsimple-style page with a calm, spacious editorial structure. Use Warm Canvas (#f5f3ef) for broad content areas, Soft Ink (#1c1b1b) for primary text, and Paper White (#fcfcfc) for light surfaces and reversed text. Use Midnight Band (#080f16), Forest Band (#0c330d), Slate Violet (#5f5974), or Earth Umber (#564c47) selectively for full-bleed feature moments. Set headlines in a large, clean geometric sans, with a restrained serif accent for editorial display. Place a pale rounded announcement strip and compact rounded navigation above a cinematic hero. Keep the hero headline legible over media, with a clear pill CTA and understated outlined input. Alternate immersive media sections with quiet copy-led areas; use generous vertical breathing room, subtle borders, and minimal elevation. Avoid copying the campaign coin literally.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark media hero with headline and email action aligned left. | email entry, primary action, playback controls | dark campaign background, white headline, outlined input, white pill button |
| 2 | category-nav | Warm-canvas product-category section with a single-column flow and image-led links. | product discovery, category links | light background, image tiles, compact labels |
| 3 | feature-split | Full-bleed slate-violet feature band with media and action elements. | feature exploration, primary action | slate-violet field, video or image, high-contrast controls |
| 4 | product-showcase | Full-bleed brown band with immersive product imagery. | visual product storytelling | earth-toned backdrop, large media |
| 5 | other | Warm-canvas editorial content, left aligned with a single prominent heading. | brand introduction, long-form reading | quiet neutral surface, large heading, supporting copy |
| 6 | feature-split | Full-bleed forest-green feature section with media and actions. | feature exploration, primary action | green band, video or image, contrasting controls |
| 7 | feature-split | Full-bleed light section with media and action elements. | feature exploration, primary action | white surface, video or image, simple controls |
| 8 | feature-split | Warm-canvas full-bleed media section with paired actions. | feature exploration, primary action | warm neutral surface, video or image, contrasting controls |
| 9 | newsletter | Centered newsletter content and action on the warm canvas. | newsletter discovery, read-more action | centered heading, short description, warm pill link |
| 10 | stats | Centered social-proof statement and compact signup link. | trust building, signup action | centered heading, warm neutral background |
| 11 | other | Full-bleed media section across the warm canvas. | brand storytelling | large image, open composition |
| 12 | footer | Warm-canvas footer arranged into six link columns. | company navigation, legal navigation | grouped link lists, compact headings, brand marks |

## Source CSS custom properties (selected)

```css
--nav-background-color: #fcfcfc;
--nav-border-color: #e4e2e1;
--color-text: #1c1b1b;
--color-text-light: #686664;
--color-text-muted: #1c1b1b;
--color-text-success: #486635;
--color-text-success-secondary: #486635;
--color-text-error: #a43d12;
--color-text-error-secondary: #a43d12;
--color-outlines: #e4e2e1;
--color-outlines-active: #afaaa7;
--color-outlines-secondary: #1c1b1b;
--color-borders: #32302f;
--color-button-primary: #32302f;
--color-text-button-primary: #fff;
--color-hover-button-primary: rgba(252,252,252,0.2);
--color-button-secondary: #fcfcfc;
--color-text-button-secondary: #32302f;
--color-hover-button-secondary: rgba(50,48,47,0.2);
--color-border-button-secondary: #32302f;
--color-focus-ring-button-secondary: #e4e2e1;
--color-input: #fff;
--color-text-input: #1c1b1b;
--color-text-input-secondary: #1c1b1b;
--color-text-placeholder: #686664;
--color-text-placeholder-secondary: #686664;
--color-input-gradient-mask: #fff;
--color-scrollbar-track: #f1f0f0;
--color-scrollbar-thumb: #afaaa7;
--color-table-border: #e4e2e1;
--color-table-background: #fcfcfc;
--color-table-highlight: #f1f0f0;
--color-table-highlight-border: #686664;
--color-nav-context-menu: #f1f0f0;
--color-nav-context-menu-focus: #e4e2e1;
--color-pagination-item-hover: #f1f0f0;
--color-pagination-item-active: #e4e2e1;
--ws-spacing-1: 0.25rem;
--ws-spacing-2: 0.5rem;
--ws-spacing-3: 0.75rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/wealthsimple-com