Wealthsimple
www.wealthsimple.com/a Canadian money app dressed as a warm editorial magazine, oversized Tiempos serif headlines over soft sand backgrounds, candid lifestyle photography that floats in on scroll, and a calm custom-eased motion system that makes a fintech feel human rather than clinical.
Design tokens
- display
- tiempos
- body
- wealthsimple-sans
- mono
- none
Do / Don't
Reference it for
- Warm-neutral fintech palette: sand and off-white grounds (#F5F3EF / #FCFCFC) with warm near-black ink (#32302F), no cold corporate blue.
- Editorial serif display (Tiempos) over a clean sans body, the move that makes finance feel premium and human.
- A single custom decelerating easing (cubic-bezier(0.241, 0.969, 0.635, 0.997)) applied consistently across every transition and reveal.
- Scroll-driven detectScroll section reveals: each block fades and settles on entry, calm rather than flashy.
- Floating lifestyle photo cards and a hand-drawn connector line as a soft, human hero device.
Do not copy
- The hashed component class system and 167 custom properties are a large in-house design system; map to a lean Tailwind token set instead.
- Tiempos and the-future are licensed faces; substitute a comparable editorial serif (Tiempos-like, or Source Serif) plus a clean grotesque.
- The product ticker and multi-portfolio comparison sections are scaled for a national bank; a local adviser needs far fewer sections.
Signature moves
warm-neutral editorial fintech
oversized Tiempos-class serif headlines sit over soft sand and off-white grounds (#F5F3EF / #FCFCFC) with warm near-black ink (#32302F), no cold corporate blue, making finance feel human.
one custom decelerating easing everywhere
a single custom decelerating curve (cubic-bezier(0.241,0.969,0.635,0.997)) is applied consistently across every transition and scroll-driven section reveal, calm rather than flashy.
floating photo cards plus connector line
candid lifestyle photo cards float in on scroll alongside a hand-drawn connector line as a soft, human hero device.
Related references
Cal Com
strongDeveloper Tool
The reference for open-source dev-tools brand at peak typographic confidence — Cal Sans 64px H1 on pure white, real booking widget in hero, prestige customer logos.
Clerk
strongDeveloper Tool
The reference for auth-platform / dev-tools at peak monochrome restraint — pure black on white, Suisse + Geist Numbers + Söhne Mono, letter-reveal hero animation.
Clickup
strongSaas Product
The reference for a saturated-purple SaaS AI agent platform: 76px Plus Jakarta Sans display, 60 CSS keyframes, rotating gradient borders, and elastic overshoot motion.
Halo Dental
flagshipOther
A dental-tech hardware brand (the Halo "digital mirror") that opens on a black stage with its glowing ring-lit device, a 100px "Halo" wordmark and "We All Shine", then proves capability with a calm bento grid - Apple-product confidence aimed at clinicians.