What is Betterment's primary brand color?

Betterment runs two load-bearing colors. The first is midnight navy #000b50 — wired in CSS as `--bt-navy` and `--btm-card-text` — which fills the above-fold hero canvas and carries the footer. The second is bright cobalt blue #1d6ae5 — wired as the primary button fill in the cookie-consent system and as gradient node colors — which appears 32 times (bg: 8, border: 13, text: 8, gradient: 3). The single warm accent is gold #ffc729, wired as `--bt-gold`, appearing 5 times as background fills only. In a navigation sense, the interactive primary is cobalt blue; in a brand canvas sense, the primary is midnight navy.

What typefaces does Betterment use, and what are good substitutes?

Betterment's display tier runs Season Mix — a proprietary serif-influenced sans that appears on h1 and h2 elements at 44–72px, weight 500. The body, nav, labels, and UI surfaces run GT America (by GrilliType), a licensed grotesque. Both faces are proprietary and not available as Google Fonts. The closest open-source substitute for Season Mix's editorial quality is Libre Baskerville at the display sizes, or Playfair Display for a more traditional serif feel; for a geometric sans alternative, DM Serif Display. For GT America, Inter or IBM Plex Sans transfer cleanly at the same weights and sizes.

Why does Betterment use midnight navy instead of a standard fintech blue?

The hero canvas is #000b50 — an extremely dark navy with visible OKLCH chroma (0.123, hue 264°). This is not the medium-saturation blue that Wells Fargo, Chase, or Fidelity use for their primary brand color. It reads closer to night sky than corporate blue, which signals exclusivity and calm rather than institutional authority. Below the fold, the page inverts to a warm cream (#f9f0e2) for product sections, and the mid-range cobalt blue (#1d6ae5) appears in product cards and gradients. The three-tone color story — night navy / warm cream / bright cobalt — maps to a day-cycle visual metaphor that financial marketing has used since Bloomberg's terminal aesthetic.

What is the distinctive shadow treatment on Betterment's product cards?

Betterment's product cards use a compound CSS shadow declared as `--btm-card-shadow` in the extraction: a large 10.244px offset drop shadow in rgba(0,11,80,0.20) — a transparent version of the midnight navy brand color — plus two opposing inset shadows that simulate physical beveling. This combines into the illusion of a thick, tangible card casting a navy-colored shadow that ties the card surface back to the hero canvas. No other fintech brand in the directory uses a compound shadow whose drop-shadow color is derived from the brand navy.

Why does the page shift from dark navy to warm cream below the fold?

The hero band uses midnight navy (#000b50) as the full-bleed canvas, establishing a serious, after-hours mood. Below the fold, the page shifts to a warm cream (#f9f0e2) that carries the product feature sections and account-type descriptions. The contrast serves both visual and psychological goals: after the dark hero commands attention, the cream sections feel open and approachable, as if the user has stepped into a well-lit space. The cobalt blue (#1d6ae5) product card fills and the gold (#ffc729) accent panels maintain chromatic continuity across the dark-to-light transition.

Betterment Design System

Betterment's fintech marketing system: midnight navy #000b50 hero, Season Mix display type, GT America body, gold #ffc729 sparingly.

About Betterment DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source betterment.com

Fintech & Crypto
Banking & Payments

Betterment's marketing site opens on midnight navy — a very dark blue with just enough chroma to read as sky rather than charcoal — and sets its hero headline ("Build your wealth in the background") in Season Mix, a proprietary serif-influenced display face that brings editorial gravity to what is otherwise a technology product. This pairing is unusual in the robo-advisor category. Wealthfront and Fidelity run mid-weight blue canvases and standard sans-serif headlines; Robinhood goes dark-mode with green accents. Betterment makes the opposite bet: deep navy that almost reads as night sky, editorial display type that reads closer to a financial magazine than a fintech dashboard.

The DESIGN.md file packages 14 color tokens drawn from the extraction, organized into a midnight navy floor, a bright cobalt blue (#1d6ae5) for interactive elements and gradient nodes, a single gold (#ffc729) warm accent used 5 times as illustration and highlight fills, and a cream canvas (#f9f0e2) below the fold. Typography runs 14 tokens across two families: Season Mix at 44–72px for display, and GT America (a proprietary grotesque licensed from GrilliType) for every body, label, nav, and UI surface. Components number 18, covering the navy hero, the physical-shadow product cards, the gold-highlight yield panels, the warm-cream section floor, and the dark-navy footer.

Feed this file to Claude or Cursor and it reproduces the fintech tension: the night-sky canvas signals safety and seriousness, the editorial display type signals authority without aggression, and the single gold accent delivers just enough warmth to feel aspirational. The physical-card shadow is the most distinctive implementation move — a CSS compound shadow with a deep-navy offset (matching `--btm-card-shadow` in the CSS) that no other fintech brand in the directory uses.

What makes it distinct

Midnight navy voltage#000b50 fills the above-fold hero canvas; not corporate blue but a near-black with chroma that distinguishes it from the gray-dark canvases at Linear or Vercel
Two-typeface hierarchySeason Mix (a proprietary serif-influenced sans) runs h1/h2 display at 44–72px; GT America handles all body, nav, and UI labels
Gold as the solitary warm accent#ffc729 appears exactly 5 times as background fills; in a cold-navy system, one gold element carries all the warmth in the page
Physical card illusionproduct cards use a compound shadow (drop + inset) that casts a deep navy offset shadow, making the cards read as tangible objects
Warm cream floor below the fold#f9f0e2 carries the below-fold sections, inverting the hero's dark gravity and making the system feel like day and night

Live at betterment.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

betterment.com

Explore Betterment

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Betterment design system FAQ

Common questions about Betterment's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Betterment — official site

Betterment's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.