Skip to content
DesignMunkDesignMunk Submit a site

Betterment

betterment.com
Build your wealth in the background with tax-smart automation.
Finance Fintech Homepage GT America Season Mix
Share Visit site
betterment.com DESKTOP · 1440
Betterment

AI Breakdown

Design export

---
version: alpha
name: Betterment
description: Build your wealth in the background with tax-smart automation.
colors:
  primary: "#212121"
  secondary: "#f8c22c"
  tertiary: "#1d6ae5"
  neutral: "#f5f5f5"
  border: "#000b50"
  brand-twig-basket: "#78643c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Season Mix
    fontSize: 61px
    fontWeight: 500
    lineHeight: 1.01
  headline-md:
    fontFamily: Season Mix
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.1
  headline-sm:
    fontFamily: GT America
    fontSize: 31px
    fontWeight: 400
    lineHeight: 1.19
  headline-xs:
    fontFamily: GT America
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.18
  body-md:
    fontFamily: GT America
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 37px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#ffffff"
    rounded: "{rounded.sm}"
    padding: 11px 24px
    height: 44px
  button-secondary:
    textColor: "{colors.border}"
    rounded: 0px
    padding: 11px 24px
    height: 44px
  button-link:
    textColor: "{colors.border}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.border}"
    rounded: "{rounded.md}"
    padding: 38px 34px
---

# Betterment: Big Editorial Serif Meets Blue Product UI

## Overview

Betterment targets retail investors and savers across experience levels. The interface aims for trustworthy and approachable: editorial headlines, concise body copy, and bright actions. Density is moderate—information-rich but buffered by generous vertical spacing (80px sections) and soft pill shapes to keep scanning light.

## Colors

- **primary (#212121):** Default text and icon color for maximum legibility on light surfaces.
- **secondary (#f8c22c):** Promotional and offer accents (APY, incentives); use sparingly for emphasis.
- **tertiary (#1d6ae5):** Action blue for primary buttons and links.
- **neutral (#f5f5f5):** Light surface for cards, chips, and content bands.
- **border (#000b50):** Navy stroke for outlines, text accents, and tag borders.
- **brand-twig-basket (#78643c):** Supportive brand hue reserved for illustration details or earthy accents.
- **surface ({colors.neutral}):** Alias of neutral; use for card and section backgrounds.
- **on-surface ({colors.primary}):** Alias of primary; use for text on neutral surfaces.

## Typography

- Season Mix (headline-lg 61px/1.01, headline-md 44px/1.1): Editorial serif for major promises and section leads. Source: custom/self-hosted (not agent-loadable). Suitable substitutes: Google Source Serif 4, Georgia, Libre Baskerville.
- GT America (headline-sm 31px/1.19, headline-xs 22px/1.18, body-md 16px/1.5): Workhorse grotesk for body, UI labels, and subheads. Source: custom/self-hosted (not agent-loadable). Substitutes: Inter (Google), IBM Plex Sans (Google), Helvetica Neue.
- Weight usage: headlines medium (500) to keep contrast crisp; body regular (400) for long-form disclosures.

## Layout

- Spacing scale is 8px-based: xs 8, sm 16, md 24, lg 32, xl 80.
- Section paddings use xl (80px) top/bottom for breathable bands. Inside sections, stack elements with md (24px) gaps; use lg (32px) for card grids.
- Build content on a responsive column grid; align hero copy and media in two columns on desktop, collapsing to a single column with md spacing on mobile.
- Buttons and chips align to the 44px control height to keep rows visually even.

## Elevation & Depth

- Shadows are intentionally minimal. A faint sm drop (rgba(0, 11, 80, 0.05) 3px 3px 0) can lift cards from neutral backgrounds.
- Inner uses subtle inset highlights to give pills and cards a tactile edge when needed.
- When shadows are absent, rely on border (#000b50), tonal contrast (neutral vs white), and whitespace to separate layers.

## Shapes

- Two corner languages: 4px (rounded.sm) for standard buttons and small controls, and 37px (rounded.md) for cards and selection chips.
- Use 37px to signal tappable, welcoming elements (pills, quick-start options). Reserve 4px for conventional buttons and inputs to keep them compact and fast to scan.

## Components

- Button primary: background #1d6ae5, text #ffffff, 4px radius, 44px height, padding 11px 24px. Use for the main task per section.
- Button secondary: text #000b50, 0px radius, 44px height; appears as text-only or outline depending on context.
- Button link: text #000b50, radius 0px; place adjacent to primary actions.
- Card: background #f5f5f5, text #000b50, radius 37px, padding 38px x 34px; optional sm shadow.

Distinctive page components:

### Hero band
- Two-column layout with large 61px serif headline, body at 16px, primary CTA and incentive link. Right column may host a rounded media frame; keep media inside a 37px-radius container.

### Quick-start pill list
- Row/stack of 37px-radius chips for account types and offers. Use neutral background, border #000b50, body text 16px; add small status tags (e.g., "Popular", "4.00% APY"). Spacing sm–md between pills.

### Investing modes grid
- Three cards: Self-directed, Automated, Custom. Each card uses headline-sm (31px) or xs (22px), short body, and a pair of CTAs. Labels like "Most popular" or "New" appear as small bordered pills.

### Offer ribbon
- Compact horizontal banner calling out APY boosts or promos using secondary (#f8c22c) sparingly with border text #000b50.

### Testimonials strip
- Quote snippets in cards on neutral background; author names as body-md with subdued styling. Maintain md gaps and optional sm shadow.

### FAQ accordion
- Question rows at headline-xs (22px) with body-md answers. Use border #000b50 for dividers and md vertical padding per item.

### Final CTA band
- Centered headline-md (44px) plus a primary 44px-high button and a lightweight link, with xl vertical padding.

## Do's and Don'ts

- Do reserve secondary (#f8c22c) for offers and key incentives; keep most CTAs in blue (#1d6ae5) to avoid mixed signals.
- Do keep section paddings at or near 80px to maintain the page's relaxed rhythm.
- Do use 37px-radius pills for quick actions and filters; avoid 4px corners for these chips.
- Don't stack more than two CTAs per block; pair one primary button with one link.
- Don't apply heavy shadows; prefer the sm shadow or simple borders (#000b50).
- Don't mix serif and sans within a single sentence; keep Season Mix to headings only.

## Agent Prompt Guide

Quick color reference
- Text: #212121
- Background: #f5f5f5
- Border: #000b50
- Accent/Primary Action: #1d6ae5
- Offer Accent: #f8c22c

1) Hero with editorial headline
- Container: light background #f5f5f5, vertical padding 80px.
- H1: Season Mix, 61px, weight 500, line-height 1.01, color #212121.
- Body: GT America substitute Inter, 16px/1.5, color #212121, max-width 640px.
- Primary CTA: button 44px high, background #1d6ae5, text #ffffff, radius 4px, padding 11px 24px.
- Secondary link: text #000b50.

2) Quick-start pills row
- Wrap: gap 16–24px, padding-top 24px.
- Each pill: background #f5f5f5, text #000b50, border 1px #000b50, radius 37px, height 44px, horizontal padding 24px, label in Inter 16px.
- Optional small status tag: Inter 12–14px, border #000b50.

3) Three-card "Invest the way you want"
- Grid: 3 columns, gap 32px, section padding 80px.
- Card: background #f5f5f5, radius 37px, padding 38px 34px, sm shadow rgba(0,11,80,0.05) 3px 3px 0.
- Heading: GT America/Inter 31px/1.19; body 16px/1.5.
- CTAs: primary button as above; link styled with #000b50.

4) FAQ accordion
- Section background #f5f5f5; container max 760px.
- Question: Inter 22px/1.18, color #212121, padding 16px 0, bottom border 1px #000b50.
- Answer: Inter 16px/1.5, color #212121, padding 8px 0 24px.

5) Final CTA band
- Padding 80px; centered.
- Headline: Season Mix 44px/1.1, color #212121.
- Primary button: 44px high, #1d6ae5 on #ffffff text, radius 4px; adjacent link in #000b50.

## Similar Brands

- Wealthfront: Similar blue-forward palette and calm editorial tone; Wealthfront leans flatter with fewer pills and more minimalist cards.
- Robinhood: Bold green accent and heavier motion; Betterment is quieter, with serif headlines and larger section padding.
- SoFi: Uses promotional yellow and blue like Betterment but with denser marketing copy; Betterment's typography is more restrained.
- Vanguard: Conservative serif headlines and trust-first layout; Betterment applies more modern pills and interactive offers.

More like this

Browse Finance →
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 2 days ago
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 4 days ago
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 6 days ago
quinngtl.com
Quinn Global Tax Law Finance
Quinn Global Tax Law
Protect what’s yours with integrated global tax and legal strategy
Homepage · 7 days ago