Wealthsimple

About Wealthsimple

A consumer investing, banking, and wealth platform. Fits personal finance apps, investment products, digital banks, and modern fintech landing pages.

Request a DESIGN.md analysisCustom, made for Wealthsimple Website Starter KitBuild your site from a starter template

Design tokens

19 colors · 13 type styles

Graphite (#32302f) primary on a pure white (#ffffff) canvas, set in Tiempos for headlines and The Future for body text. The highlights below are read from the Wealthsimple DESIGN.md in the Pass bundle, which carries all 19 color tokens, 13 type styles and the full component rules.

Colors

Primarygraphite#32302f
Secondarymuted sage#99b383
Canvaspure white#ffffff
Surfaceoff-white#f1f0f0
Inkgraphite#32302f

Type

TiemposDisplayweight 400, 58 to 128px
The FutureBodyweight 500, 14 to 20px

Radius

none 0px
xs 2px
sm 12px
md 24px
pill 100px

Spacing

xxs 4px
xs 8px
sm 12px
md 16px
lg 24px
xl 32px
xxl 48px
section 80px

Components

Primary buttonbutton-primary
Primary buttons fill with graphite (#32302f) and carry pure white (#ffffff) text, set in The Future 16px at weight 500, with pill corners (100px) and 12px 16px padding.
Cardfeature-card
Cards sit on off-white (#f1f0f0), with 12px corners and 24px padding.
Navigationnav-bar
The top navigation runs on pure white (#ffffff) with graphite (#32302f) links, set in The Future 14px at weight 500.

Three ways to ship a Wealthsimple-style UI.

Use in your AI builder, no-code tool, or CMS

Lovablev0BoltFramerWebflowWordPressWixSquarespace CanvaGoDaddy

Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.