Graphite Ink
#32302fSupporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Wealthsimple
wealthsimple.comWebsite preview
The design language
Wealthsimple operates as an editorial boutique masquerading as a fintech: a warm, near-monochrome canvas of paper-cream and graphite, where large Tiempos serif display type shares the page with a quiet geometric sans for body and UI. The signature is the juxtaposition — a fashion-magazine serif headline sitting beside pill-shaped dark buttons, a hero that swaps to a warm bronze-dark field to stage a sculptural 3D form, and illustrations that read as gallery objects rather than product screenshots. Color is almost entirely suppressed in chrome; warmth comes from the off-white stack (#fcfcfc → #faf8f5 → #e4e2e1) rather than from accents. Components stay low and weightless: hairline dividers, 100px-soft-rounded cards, pill buttons, no drop shadows, no gradients. Density is comfortable with long reading lines and generous 48px section gaps — the design trusts typography and whitespace to do the persuading.
Color palette
neutral
Paper White
#fcfcfcDefault page canvas, card surfaces, button text on dark fills — the brightest neutral, used for main reading surfaces
Linen Cream
#faf8f5Warm alternate section background, hero warm-tones, subtle washes — gives the page its boutique warmth and distinguishes sections from flat white
Fog Veil
#f1f0f0Quiet elevated surfaces, subtle hover washes, soft surface tints for inset regions
Stone
#e4e2e1Hairline borders, input outlines, section dividers, nav-rule lines — the workhorse neutral for structural separation
Pebble
#686664Secondary/captive text, link body, helper copy — keeps muted text inside the warm-grey family instead of dipping into cool slate
Onyx
#000000Reserved for SVG icon fills and a few crisp borders where true black is needed for contrast on warm-cream surfaces
Charcoal
#09090aDark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Bronze Field
#3a3525Hero/feature-block full-bleed background — a warm dark khaki that stages sculptural 3D illustrations without going full-black, maintaining the boutique-warm axis even in dark sections
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
84px · 400 · 1.08 · -0.84px trackingThe quick brown fox jumps
text-72
72px · 400 · 1.16The quick brown fox jumps
text-64
64px · 400 · 1.16The quick brown fox jumps
text-58
58px · 400 · 1The quick brown fox jumps
heading-lg
56px · 400 · 1.1 · -0.56px trackingThe quick brown fox jumps
heading
36px · 400 · 1.2 · -0.36px trackingThe quick brown fox jumps
heading-sm
20px · 400 · 1.3The quick brown fox jumps
subheading
18px · 400 · 1.4The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Tiempos
- Weights
- 400, 500
- Sizes
- 14, 16, 18, 36, 56, 64, 72, 84
- Line height
- 1.08, 1.16, 1.24
- Letter spacing
- -0.01em (slightly negative on display; reads as composed and editorial, not loose)
- Fallback
- Source Serif 4, Lora, or PT Serif
Display and editorial heading serif — used at 56–84px for hero and section titles, 36px for sub-section heads, and 14–18px for emphasis lead-ins. Tiempos is the soul of the brand: a contemporary text serif with strong terminals that brings a Kinfolk-magazine / art-book quality to a fintech. The 500 weight is reserved for the largest display sizes where extra weight balances the tight tracking.
Additional typeface
The Future
- Weights
- 400, 500
- Sizes
- 14, 16, 18, 20, 56, 58
- Line height
- 1.00, 1.16, 1.40
- Letter spacing
- 0.0050em
- Fallback
- Inter, Söhne, or GT America
Primary UI and body sans — a clean geometric workhorse used for paragraph copy, nav links, card titles, input fields, and small UI labels at 14–20px. The 500 weight appears in nav and a few mid-size emphasis lines. The near-zero letter-spacing (0.005em) keeps running text tight and un-fussy. It is the calm counterpart to Tiempos's editorial display.
Additional typeface
Wealthsimple Sans
- Weights
- 400
- Sizes
- 16
- Line height
- 1.20
- Letter spacing
- 0.025em (wide-tracked, the brand's interactive-element signature)
- Fallback
- Inter with letter-spacing 0.025em, or Söhne Buch
Tracked-out utility face for buttons, nav controls, and selected UI labels — used at 16px with 0.025em letter-spacing so that interactive elements read as distinct, almost stamp-like marks. The wide tracking pushes these elements forward visually without needing weight, reinforcing the pill-button rhythm across the system.
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 32px
- Element gap
- 16px
Border radius
cards
100pxbadges
1600pxinputs
100pxbuttons
1600pxsmallElements
12pxSpacing scale
2px4px6px8px12px15px16px20px24px32px40px48px64px69px73px80px128px160pxGuidelines
Do
- Use Tiempos at 56–84px for all display and section titles with letter-spacing -0.01em — the serif is the brand's editorial signature
- Use 1600px border-radius on every button, tag, and pill-shaped control — the pill is non-negotiable
- Use warm neutrals (#fcfcfc, #faf8f5, #e4e2e1, #32302f) and reserve Bronze Field #3a3525 for full-bleed dark feature blocks
- Pair Tiempos serif headlines with The Future sans body — never set body copy in Tiempos, never set display in The Future
- Apply 0.025em letter-spacing to every Wealthsimple Sans label inside buttons and nav controls
- Maintain ~80px section gaps and 32px card padding; let whitespace carry hierarchy instead of borders or shadows
- Use sculptural 3D illustrations as the only imagery — never stock photography, never product UI screenshots, never flat icons as heroes
Don’t
- Don't use pure #000000 as primary text — use Graphite Ink #32302f so the dark tones stay warm
- Don't introduce accent colors, gradients, or brand hues — the system is monochrome by design; color only appears inside 3D illustrations
- Don't use square or moderately rounded buttons — every interactive element must be a 1600px pill
- Don't apply CSS drop shadows to cards, modals, or buttons — rely on the warm surface stack and hairlines instead
- Don't set display type in The Future or body in Tiempos — the serif/sans split is the system's core rhythm
- Don't use bright or cool grays, blues, or cool whites — the palette is warm and stays within the cream-graphite axis
- Don't crowd the page with cards, borders, or grid lines — the editorial feel depends on generous, un-divided whitespace
Components
Top Navigation Bar
Site header with segmented product switcher, primary nav, and auth CTAsSits on Paper White (#fcfcfc). A thin 12px-tall row at the very top carries small 12–14px The Future text reading 'Personal | Business' (segmented, left-aligned). Below it the main bar holds the Wealthsimple wordmark (Graphite Ink #32302f, The Future 500), a horizontal nav of links (What we offer, Benefits, Learn, Support — each in The Future 400, 16px), and on the right two pill buttons: 'Log in' as an outlined pill (Graphite border, transparent fill) and 'Get started' as a filled pill (Charcoal #09090a fill, Paper White text, 1600px radius). No drop shadow; a hairline Stone (#e4e2e1) rule may sit at the bottom of the bar.
Filled Dark Pill Button (Primary)
Primary CTA — 'Get started', 'Start my return', 'Start trading'Pill-shaped (1600px radius), Charcoal #09090a or Graphite #32302f fill, Paper White #fcfcfc text. Label set in Wealthsimple Sans 400, 16px, 0.025em letter-spacing. Vertical padding ~12px, horizontal padding 24–32px. No shadow. The dark pill is the dominant interactive mark across the system; it should always be the loudest button on its surface.
Outlined Pill Button (Secondary)
Secondary CTA — 'Learn more', 'Log in'Pill-shaped (1600px radius), transparent fill, 1px Graphite Ink #32302f border, Graphite text. Same Wealthsimple Sans 16px label and padding as the filled variant. Lives next to the filled button on dark heroes and in the nav bar; never the sole CTA on a section.
Ghost Pill Button
Low-emphasis CTA used on light surfaces, e.g. 'Start trading' in the trading sectionPill-shaped (1600px radius), no visible border, Linen Cream #faf8f5 fill, Graphite Ink #32302f text. Same label sizing. Used when the design wants a single quiet CTA on a light field without competing with the headline serif.
Editorial Section Heading (Tiempos Display)
Hero and section titlesSet in Tiempos 500 at 56–84px, line-height 1.08–1.16, letter-spacing -0.01em, color Graphite Ink #32302f on light surfaces or Paper White on the Bronze Field hero. Often paired with a small The Future eyebrow above (e.g. 'Self-directed Investing', 'Trusted by more than 2M Canadians') in 14–16px, 0.005em tracking, Pebble #686664.
Bronze Hero Panel
Full-bleed dark feature block hosting 3D sculptural artworkFull-viewport-width section, Bronze Field #3a3525 background, with the editorial heading and supporting paragraph aligned to the left at ~40% width, and a sculptural 3D illustration (twisted paper, draped forms, card stack) floating on the right with soft ambient shadow into a warm-cream floor. The transition from the dark field to a lighter warm wash is handled by a radial fade — no hard edge. Two CTAs sit beneath the headline: filled dark pill primary + outlined pill secondary.
Light Editorial Section
Standard content section below the heroPaper White #fcfcfc or Linen Cream #faf8f5 background, max-width 1200px centered. Two-column layout: Tiempos heading + The Future paragraph + single dark-pill CTA on the left (~45% width), 3D illustration or isometric scene on the right. Section vertical padding ~80px. No background, no card chrome — the whitespace and serif type do the work.
Feature Column with Top Divider
Three-column under-section describing product pillarsThree equal columns separated by ~48px gaps. Each column starts with a 1px Stone #e4e2e1 hairline rule at the top, followed by a The Future 500 18–20px headline, then a 14–16px The Future 400 paragraph in Graphite Ink. No background fill, no card — the hairline at the top is the only chrome.
Eyebrow Tag
Small label above display headings, e.g. 'Self-directed Investing'The Future 400, 14–16px, 0.005em letter-spacing, Pebble #686664 color. Sits 12–16px above the Tiempos heading. Never bold, never uppercase — the muted warmth of the color and tight tracking are the styling.
Sculptural 3D Illustration
Decorative hero and section imageryAbstract sculptural renders: twisted paper ribbons, draped fabric forms, geometric block compositions in sage green, cream, terracotta, and off-white. Always sit on a warm cream floor with a soft ambient shadow. Rounded, no hard cropping; the illustration reads as a single art object centered in the right half of the layout. Not product UI screenshots.
Soft Card Surface
Optional container for grouped content (e.g. pricing cards, dashboard panels)Linen Cream #faf8f5 or Paper White #fcfcfc fill, 100px corner radius, 32px padding on all sides, no border, no shadow. The extreme roundness (100px on a small card) is the design's signature softness — it makes even dense product UI feel boutique.
Text Input
Form fields for email, amount, etc.Transparent or Paper White fill, 1px Stone #e4e2e1 border, 100px radius, The Future 400 16px. Focus state: 1px Graphite Ink #32302f border, no glow. Placeholder text in Pebble #686664. 16px vertical padding.
Chat Bubble (Bottom-Round)
Floating support chat launcher in lower-right cornerA 48px circular Charcoal #09090a button with a Paper White chat-icon glyph inside. No label. Floats 24px from the bottom-right of the viewport. Sits outside the main content flow.
Surfaces & elevation
Level 1
Page Canvas
#fcfcfcDefault body background for all editorial content sections
Level 2
Warm Section
#faf8f5Alternate cream sections, hero right-side wash, and card backgrounds needing warmth
Level 3
Soft Surface
#f1f0f0Subtle elevated regions, hover states, divider fills
Level 4
Hero Bronze
#3a3525Full-bleed dark feature blocks for the taxes, investing, and 3D-led hero panels
Wealthsimple deliberately avoids UI drop shadows on cards, buttons, nav, and modals. Elevation is communicated by the warm surface stack (#fcfcfc → #faf8f5 → #f1f0f0), hairline Stone dividers, and 100px radius — the system reads as a flat, paper-like layout where depth comes from typography and whitespace, not from CSS shadows. Shadows appear only as the rendered ambient occlusion baked into the 3D illustrations.
Sculptural 3D illustrations
Soft ambient occlusion shadow on a warm-cream floor — no hard drop shadow, just a low-spread warm-grey falloff simulating gallery lighting
Layout & imagery
Layout
The page model is max-width 1200px centered with full-bleed dark feature bands breaking the rhythm. The header is a thin two-row top bar (segmented 'Personal | Business' switcher over a main bar with logo, horizontal nav, and two pill CTAs) that sits directly on the page background with no shadow. The first screen is a full-bleed Bronze Field hero with left-aligned Tiempos display headline (~40% width), supporting paragraph, two pill CTAs, and a large sculptural 3D form floating on the right. Below the hero, sections alternate Paper White and Linen Cream with 80px vertical padding, each in a 2-column 'text-left, illustration-right' composition. Feature lists use a 3-column grid where each column starts with a hairline Stone rule at the top, no card backgrounds. Section transitions are seamless — no dividers between sections, just whitespace and a possible background swap. The chat launcher is the only fixed-position element, floating 24px from the bottom-right.
Imagery
Wealthsimple uses sculptural 3D renders as its only imagery language: twisted paper ribbons, draped fabric forms, geometric block compositions, and isometric card stacks in muted sage, cream, terracotta, and off-white. The renders are treated as gallery objects — placed on the right half of a section on a warm cream floor with soft ambient-occlusion shadow, never cropped, never overlapped with text. There is no photography, no flat illustration, no product UI screenshots, no chart art. Icons are minimal outlined glyphs in Graphite Ink. The overall feel is closer to a Kinfolk spread or a Bottega Veneta product page than a typical fintech — imagery carries atmosphere, not information.
Design notes
Agent Guide
**Quick Color Reference** - text: #32302f (Graphite Ink) - background: #fcfcfc (Paper White) - secondary background: #faf8f5 (Linen Cream) - border: #e4e2e1 (Stone) - muted text: #686664 (Pebble) - filled button background: #09090a (Charcoal) - dark hero field: #3a3525 (Bronze Field) - primary action: no distinct CTA color **3 Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. *Build a light editorial section:* Paper White #fcfcfc background, max-width 1200px centered, 80px vertical padding. Left column (~45% width): a 14px The Future eyebrow in Pebble #686664, then a Tiempos 500 56px heading in Graphite Ink #32302f with -0.56px letter-spacing, then a 18px The Future 400 paragraph in Graphite, then a single Charcoal filled pill button. Right column: a sculptural 3D render of draped paper or geometric blocks on a warm cream floor with soft ambient shadow. 3. *Build a three-column feature row with hairline dividers:* three equal columns at max-width 1200px with 48px column gaps. Each column begins with a 1px Stone #e4e2e1 horizontal rule at the top, then a The Future 500 20px headline in Graphite Ink, then a 16px The Future 400 paragraph. No card backgrounds, no shadows — the hairline rule is the only chrome. 4. *Build a Bronze Field hero:* full-bleed background in Bronze Field #3a3525, 80–120px vertical padding. Left-aligned at ~40% width: a 14px The Future eyebrow in Paper White at 70% opacity, a Tiempos 500 84px headline in Paper White with -0.84px letter-spacing, a 18px The Future 400 paragraph in Paper White at 80% opacity, and two pill CTAs — a Charcoal filled pill primary next to an outlined pill secondary (1px Paper White border, transparent fill). Right side: a large sculptural 3D form (twisted paper or draped fabric) floating on the right with soft warm ambient shadow.
Similar brands
Apple (product pages)
Same editorial display-serif-over-clean-sans hierarchy with full-bleed image-led hero bands and pill-shaped CTAs
Bottega Veneta / Mr Porter
Same warm-paper palette, sculptural 3D-led imagery, and serif display type that reads as fashion/luxury rather than tech
Kinfolk Magazine online
Same generous whitespace, Tiempos-style serif at large sizes, warm off-white canvas, and restrained monochrome palette
Stripe (Press/brand sections)
Same pill-button system and serif+sans type pairing used in editorial features, though Stripe uses cooler neutrals
Notion
Same soft-rounded card surfaces (100px radius) and warm off-white canvas with hairline dividers in place of heavy borders
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
