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.
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.
Lava Dental
flagshipOther
A dental clinic that turns the most anxiety-inducing service into calm and reassurance - a deep forest-green canvas, a rounded geometric display, and a circular arc-timeline that carries you through "peace and safety during every appointment".
Mintlify
strongMarketing Platform
The reference for AI-documentation platform - cloud-gradient sky hero, mint-green CTA, modern lab()/oklab() colour science, real docs mockup with AI assistant chat.