---
version: alpha
name: "Wealthfront"
website: "https://www.wealthfront.com"
description: >-
  An automated investing platform whose marketing site runs on deep night-violet rather than the cool blue most US robo-advisors default to — the above-fold is a 32px-rounded card carrying a violet-to-night gradient (#230b59 to #4840bb), a 62px Calibre weight-700 headline "Earn up to 4.20% APY" in near-white, a phone mockup tilted at 12 degrees on the right, and a single saturated indigo CTA pill. Below the fold the page flips to a near-white floor with cards in #f4f3f7 holding 32px Calibre bold sub-headlines in indigo and rounded charcoal phone mockups beside them. Calibre runs every tier of the page from 11px uppercase eyebrow labels through to the 62px hero display. The radius scale terminates at 16px on cards and 9999px on pill avatars; the system avoids the green most fintechs default to and commits to a single violet voltage instead.

seo:
  title: "Wealthfront Design System for React — night-violet hero, Calibre type, 16 components"
  metaDescription: "Wealthfront's marketing system runs on deep night-violet rather than fintech green — a 62px Calibre hero in near-white sits on a violet gradient with a 12-degree phone mockup. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Night-violet over fintech-green — Wealthfront commits to a deep violet voltage (#4840bb) where Betterment, Robinhood, and SoFi reach for green or cool blue"
    - "Single-card hero — the above-fold is a 32px-rounded violet gradient card rather than a full-bleed surface, floating inside the page with cream visible at the edges"
    - "Calibre across every tier — display at 62px / 700 / -1.86px tracking, body at 18px / 400, eyebrow labels at 11px / 500 / 0.55px tracking, all from the same family"
    - "Hairline-everything chrome — 580 of the 1486 captured borders use a single #e5e7eb hairline; no border-color ladder, no contrast outlines"
    - "Phone mockups tilted 12 degrees — every product surface is shown inside a rounded charcoal handset frame, never as a flat browser screenshot"
  tags:
    - "Fintech & Crypto"
    - "Banking & Payments"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Wealthfront's marketing site does something most US robo-advisors avoid: it commits to a deep night-violet voltage instead of the fintech-green or cool-blue that Betterment, Robinhood, SoFi, and Chime all reach for. The above-fold is a 32px-rounded card carrying a violet-to-night gradient — deep night #230b59 at the lower-left through saturated indigo #4840bb in the upper-right — with a 62px Calibre weight-700 headline "Earn up to 4.20% APY" in near-white, three bullet rows beneath, a single indigo CTA pill labeled "Get started", and a phone mockup tilted at 12 degrees on the right showing the Wealthfront iOS dashboard. The card floats inside the page rather than running full-bleed; cream is visible at the edges, and the violet gradient reads as a panel rather than as the page canvas itself.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 12 color tokens drawn from a 200+ CSS custom-property system wired with `--tk-*` design-token prefixes, organized around the violet voltage `#4840bb` (`--tk-content-interactive-default`), the night-base `#230b59` (`--tk-night-start`), the near-black ink `#18172b` (`--tk-content-primary`), the soft hairline `#e5e7eb` (`--tk-content-divider`), and a small set of chart-categorical accents reserved for the financial diagrams. 14 typography tokens cover Calibre at 11px through 62px in weights 400–700; an uppercase eyebrow tier at 11px / 500 / 0.55px tracking sits above every section heading. A radius scale of 6 / 8 / 16 / 9999px. 16 components covering the gradient hero card, the saturated indigo CTA pill, the cream feature panels, the phone-mockup frame, the underlined nav-link cluster, and the data-table row.

    Feed this file to Claude or Cursor and it reproduces Wealthfront's specific moves: a 32px-rounded gradient hero card instead of a flat full-bleed surface, deep night-violet instead of fintech-green or cool-blue, Calibre across every tier from 11px eyebrow up to 62px hero, hairline-everything chrome with a single `#e5e7eb` border tone, and tilted-charcoal phone mockups for every product surface. The token references resolve cleanly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move worth borrowing only if your fintech wants to break category convention: the willingness to skip green entirely and commit to a violet voltage that signals trust through tonal depth rather than through the predictable financial-product chromatic vocabulary.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.wealthfront.com"
      title: "Wealthfront — official site"
      description: "Wealthfront's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Wealthfront's primary brand color?"
      answer: "Wealthfront's brand voltage is a saturated violet at #4840bb, wired in CSS as --tk-content-interactive-default, --tk-surface-interactive-primary, --tk-chart-quantitative-primary, --tk-chart-categorical1, and 23 other --tk-* token names. It appears 27 times on the captured page — 20 as text, 5 as background, 2 as border. The night-base #230b59 wired as --tk-night-start sits below it as the gradient lower-stop and the secondary heading color. Wealthfront does not use green or cool-blue anywhere on the captured marketing surface — every accent decision falls inside the violet hue family, which inverts the convention for US robo-advisors."
    - id: "typography"
      title: "What typeface does Wealthfront use, and what should I use as a substitute?"
      answer: "Wealthfront runs Calibre across every tier of the system. Display headlines sit at 62px / 700 / -1.86px tracking on the hero h1 and the h2 below the fold; section sub-headlines at 32px / 700 / -0.96px and 24px / 600 / -0.48px; body running text at 18px / 400 / 1.5 line-height; small chrome labels at 14px / 400; legal disclosure text at 12px / 400; and an uppercase eyebrow tier at 11px / 500 / 0.55px tracking sits above every section heading. The closest open-source substitute is Inter at the same weights with letter-spacing reduced by 0.03em on display sizes — Inter's slightly looser counters read close to Calibre's geometric humanist character at 18px body."
    - id: "violet-not-green"
      title: "Why does Wealthfront use violet instead of the green most fintech brands reach for?"
      answer: "Most US robo-advisor and consumer-fintech brands commit to green (Robinhood, Cash App, Chime), cool-blue (Betterment, SoFi, Schwab), or both. Wealthfront skips both: the brand voltage is a saturated violet #4840bb wired as --tk-content-interactive-default, sitting against a near-black ink #18172b body color and a deep night-violet #230b59 as the gradient lower-stop. The chromatic decision signals trust through tonal depth rather than through the predictable financial-product palette. Green appears in the system only as a single chart-positive accent (#288067 wired as --tk-content-positive) and as a chart-categorical6 swatch — never in the marketing chrome."
    - id: "rounded-style"
      title: "What is Wealthfront's corner-radius philosophy?"
      answer: "The radius scale is generous-soft on cards, tight on chips. 16px (20 occurrences) carries every major surface — the gradient hero card, the cream feature panels below the fold, the phone-mockup frame outer corners, the testimonial card. 6px (12 occurrences) handles smaller chips and the CTA pill. 8px (4 occurrences) handles the dropdown items. 9999px (6 occurrences) handles the pill-shaped avatar surrounds in the testimonial section. There is no 4px tier and no 12px tier. The 16px default keeps every major surface feeling panel-soft; the 6px tier keeps the CTA pill visually distinct as a chip rather than as a fully-rounded button."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own fintech or investing marketing site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Wealthfront's specific moves: a 32px-rounded gradient hero card instead of a flat full-bleed surface, deep night-violet voltage instead of fintech-green, Calibre across every tier from 11px eyebrow to 62px hero, hairline-everything chrome on a single #e5e7eb border tone, and tilted-charcoal phone-mockup framing for every product surface. The token references resolve cleanly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The violet-over-green move only works if you want to deliberately step outside the fintech category palette — pair it with conservative copywriting to avoid reading as a crypto brand."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#4840bb"
  primary-deep: "#230b59"
  primary-night: "#161338"
  primary-violet: "#3b2b7d"
  primary-saturated: "#4b18bf"
  ink: "#18172b"
  ink-soft: "#424158"
  muted: "#b7b7c0"
  canvas: "#ffffff"
  surface-cool: "#f4f3f7"
  surface-violet: "#dadef1"
  hairline: "#e5e7eb"
  ink-black: "#000000"

typography:
  display-xl:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 62px
    fontWeight: 700
    lineHeight: 55.8px
    letterSpacing: "-1.86px"
  display-lg:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 43.2px
    letterSpacing: "-1.44px"
  display-md:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 28.8px
    letterSpacing: "-0.96px"
  heading-lg:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 35.2px
    letterSpacing: 0
  heading-md:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 24px
    letterSpacing: "-0.48px"
  heading-sm:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 33px
    letterSpacing: 0
  heading-xs:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 18px
    letterSpacing: "-0.6px"
  body-lg:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: 0
  body-md:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 21.6px
    letterSpacing: 0
  body-sm:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  button-md:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 21.6px
    letterSpacing: 0
  nav-link:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: 0
  caption:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0
  eyebrow:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 16.5px
    letterSpacing: "0.55px"

rounded:
  none: "0px"
  sm: "6px"
  md: "8px"
  lg: "16px"
  full: "9999px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "15px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"

components:
  hero-card:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.lg}"
    padding: "48px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.primary-violet}"
    typography: "{typography.display-xl}"
    padding: "0"
  sub-section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.primary-violet}"
    typography: "{typography.display-md}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    padding: "0"
  body-paragraph-on-violet:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    padding: "0"
  legal-disclosure:
    backgroundColor: "transparent"
    textColor: "{colors.muted}"
    typography: "{typography.caption}"
    padding: "0"
  eyebrow-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.eyebrow}"
    padding: "0"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12px 20px"
    height: "46px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12px 20px"
    height: "46px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "12px 48px"
    height: "64px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.lg}"
    padding: "0"
    height: "50px"
  card-cream:
    backgroundColor: "{colors.surface-cool}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.lg}"
    padding: "32px"
  card-white:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.lg}"
    padding: "32px"
    borderColor: "{colors.hairline}"
  data-row:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "12px 0"
    borderColor: "{colors.hairline}"
  phone-frame:
    backgroundColor: "{colors.ink-black}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: "0"
  avatar-pill:
    backgroundColor: "{colors.surface-violet}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.full}"
    padding: "0"
    height: "48px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.sm}"
    padding: "12px 16px"
    height: "44px"
    borderColor: "{colors.hairline}"
---

## Overview

Wealthfront's marketing site does something most US robo-advisors avoid. **Violet over green.** Where Betterment, Robinhood, SoFi, and Cash App all reach for green or cool-blue as the load-bearing brand voltage, Wealthfront commits to a deep night-violet instead — `{colors.primary}` (#4840bb) wired as `--tk-content-interactive-default` carries every CTA and link accent, with `{colors.primary-deep}` (#230b59) wired as `--tk-night-start` sitting beneath as the gradient lower-stop and the secondary heading color. Green appears in the system only as a single chart-positive accent and as a chart-categorical swatch reserved for the financial diagrams — never in the marketing chrome. The chromatic decision signals trust through tonal depth rather than through the predictable financial-product palette.

**Single-card hero** — the above-fold is not a full-bleed gradient like Cloudflare's orange or Spline's near-black. The hero is a 32px-rounded card carrying a violet-to-night gradient that floats inside the page with cream visible at the edges; the gradient reads as a panel rather than as the page canvas itself. Inside the card sit a 62px Calibre weight-700 headline ("Earn up to 4.20% APY") in near-white, three small bullet rows beneath, a saturated indigo `{colors.primary}` CTA pill labeled "Get started", and a phone mockup tilted at 12 degrees on the right showing the Wealthfront iOS dashboard. Below the fold, the page flips to a near-white canvas with cream feature panels (`{colors.surface-cool}` — #f4f3f7) holding 32px Calibre bold sub-headlines in violet `{colors.primary-violet}` (#3b2b7d) and tilted charcoal phone mockups beside them.

Typography is Calibre across every tier — a single humanist sans that does the work of display, heading, body, button, nav, and eyebrow. Display sits at 62px / 700 with -1.86px tracking; sub-section heads at 32px / 700 / -0.96px; body running text at 18px / 400 / 1.5 line-height; legal disclosure at 12px / 400; and an uppercase eyebrow tier at 11px / 500 / 0.55px tracking sits above every section heading as the small-caps signpost. There is no serif moment anywhere on the page; the entire typographic system is one variable-weight Calibre.

**Key Characteristics:**
- Deep night-violet voltage (`{colors.primary}` — #4840bb) wired into 27 `--tk-*` CSS token names; no green or cool-blue anywhere in the marketing chrome.
- Single-card hero — a 32px-rounded violet gradient card floats inside the page rather than running full-bleed; cream is visible at every edge.
- Calibre across every tier, from 11px uppercase eyebrow labels through to the 62px hero display — one family, no serif counterpart.
- Hairline-everything chrome — `{colors.hairline}` (#e5e7eb) carries 580 of the 1486 captured border occurrences; there is no second hairline tone in the system.
- Phone mockups tilted at 12 degrees — every product surface is shown inside a rounded charcoal handset frame, never as a flat browser screenshot.
- Eyebrow tier at 11px / 500 / 0.55px tracking, uppercase — the small-caps signpost that sits above every section heading.
- 16px radius dominates major surfaces (the gradient hero card, the cream feature panels, the phone-frame outer corners, the testimonial card) — 20 of 42 captured radii sit at 16px.
- 6px radius on the CTA pill — kept visually distinct as a chip rather than fully-rounded so it reads as a financial-product button rather than a casual consumer CTA.

## Colors

### Brand

- **Violet** (`{colors.primary}` — #4840bb): frequency 27 (20 text, 5 bg, 2 border). The load-bearing voltage — wired in CSS as `--tk-content-interactive-default`, `--tk-surface-interactive-primary`, `--tk-chart-quantitative-primary`, `--tk-chart-categorical1`, `--tk-night-end`, `--tk-vibrant-twilight-start`, and 21 other token names. Carries the CTA pill fill, every link accent, the active-tab underline, and the upper-stop on the hero gradient.
- **Deep Night** (`{colors.primary-deep}` — #230b59): frequency 43 (34 text, 1 bg, 6 border, 2 gradient). Wired as `--tk-night-start` and `--tk-chart-categorical0`. The hero gradient's lower-stop, the top-nav background fill, and the secondary heading color when the violet would feel too saturated for body-adjacent text.
- **Night** (`{colors.primary-night}` — #161338): frequency 3 (3 text). The darkest violet in the captured page — a near-black with a faint blue undertone used inside the hero card for one specific micro-label.
- **Violet Heading** (`{colors.primary-violet}` — #3b2b7d): frequency 2 (1 text, 1 bg). A mid-violet reserved for the below-the-fold section h2 headings, slightly desaturated from the primary so the display reads as a heading rather than as a link.
- **Saturated Violet** (`{colors.primary-saturated}` — #4b18bf): frequency 2, both inside gradients. The brightest violet on the page — used as the upper end-stop of the night gradient.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 168 (151 text, 14 bg, 1 border). Wired as `--tk-surface` and `--tk-surface-elevated`. The dominant surface — the below-fold body floor, every card inner fill, and the white text rendered on top of the violet hero card.
- **Surface Cool** (`{colors.surface-cool}` — #f4f3f7): frequency 5 (3 bg, 2 border). Wired as `--tk-surface-notice-info`. The off-white tone used for the cream feature panels below the fold — slightly cooler and more violet-undertoned than pure white.
- **Surface Violet** (`{colors.surface-violet}` — #dadef1): frequency 6. Wired as `--tk-chart-categorical3`. The palest violet in the system, used as the avatar-pill background in the testimonial section.

### Text

- **Ink** (`{colors.ink}` — #18172b): frequency 18 (17 text, 1 bg). Wired as `--tk-content-primary`, `--tk-surface-inverted`, `--tk-chart-neutral-primary`, `--tk-content-divider`. The dominant body text color and the inverted-surface fill. Never pure black.
- **Ink Soft** (`{colors.ink-soft}` — #424158): frequency 19 (18 text, 1 border). A secondary running-text tone used inside long-form copy where ink would feel too heavy.
- **Muted** (`{colors.muted}` — #b7b7c0): frequency 51 (51 text). The dominant secondary-text color — the legal disclosure rows, the data-table sub-labels, and the caption tiers. Slightly purple-tinted so it carries the violet undertone of the system.
- **Ink Black** (`{colors.ink-black}` — #000000): frequency 9 (3 text, 3 bg, 3 gradient). Used only inside the charcoal phone-mockup frame and as the gradient overlay ink on the hero card.

### Hairline

- **Hairline** (`{colors.hairline}` — #e5e7eb): frequency 881 (293 text, 4 bg, 580 border, 4 gradient). The single dominant border tone — 39% of all captured borders use this value. Wired as `--tk-soft-start`, `--tk-surface-notice-destructive`, `--tk-soft-end`. There is no second hairline tone; the system is mono-hairline.

## Typography

### Font Families

The system runs **Calibre** for every tier — a humanist sans by Klim Type Foundry that does the work of display, heading, body, button, nav, and eyebrow. Fallbacks walk `ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif`. There is no serif counterpart, no monospace counterpart, no second display family.

The single-family decision is the typographic signature. Where Stripe pairs Sohne with Sohne Mono and Cloudflare pairs FT Kunst Grotesk with Apercu Mono Pro, Wealthfront commits to Calibre alone and divides labor by weight (400 / 500 / 600 / 700) and by tracking (-1.86px to +0.55px). The eyebrow tier at 11px / 500 / 0.55px tracking uppercase is the small-caps device that fills the role a monospace label would play in a dev-tools system.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 62px | 700 | 55.8px | -1.86px | Hero h1 ("Earn up to 4.20% APY") and section h2 below the fold |
| `{typography.display-lg}` | 48px | 700 | 43.2px | -1.44px | Larger sub-section headings |
| `{typography.display-md}` | 32px | 700 | 28.8px | -0.96px | Bold sub-section heads ("Built and managed for you") |
| `{typography.heading-lg}` | 32px | 400 | 35.2px | 0 | Lighter h3 headings (data-section titles) |
| `{typography.heading-md}` | 24px | 600 | 24px | -0.48px | Card-title h3 / h4 |
| `{typography.heading-sm}` | 22px | 700 | 33px | 0 | h3 inside the feature panels |
| `{typography.heading-xs}` | 20px | 600 | 18px | -0.6px | Stat-display headlines inside data cards |
| `{typography.body-lg}` | 18px | 400 | 27px | 0 | Default running text — paragraph body |
| `{typography.body-md}` | 18px | 500 | 21.6px | 0 | Mid-emphasis body and the CTA pill label |
| `{typography.body-sm}` | 14px | 400 | 20px | 0 | Caption rows and small labels |
| `{typography.button-md}` | 18px | 500 | 21.6px | 0 | Primary button label |
| `{typography.nav-link}` | 18px | 400 | 27px | 0 | Top-nav link labels |
| `{typography.caption}` | 12px | 400 | 16px | 0 | Legal disclosure text and the smallest captions |
| `{typography.eyebrow}` | 11px | 500 | 16.5px | 0.55px (uppercase) | Uppercase section-header eyebrow |

### Principles

Display weight sits at 700 with tight negative tracking (-1.86px on the 62px hero, -0.96px on the 32px sub-heads). The confidence comes from weight and tracking together. The same 62px / 700 / -1.86px treatment carries both the hero h1 and the section h2 below the fold, anchoring the page on a single display step rather than a tiered ladder of decreasing sizes.

The eyebrow tier — 11px / 500 / 0.55px tracking uppercase — is the small-caps device that fills the role a monospace label would play in a dev-tools system. There is no all-caps tier in display; small-caps duty falls entirely to the eyebrow at the small end.

### Note on Font Substitutes

Calibre is a licensed family from Klim Type Foundry. The closest open-source substitute is **Inter** at the same weights with letter-spacing reduced by 0.03em on display sizes — Inter's slightly looser counters read close to Calibre's geometric humanist character at 18px body. **General Sans** is closer in feel but not free. For the eyebrow tier, any humanist sans (Inter, Geist) at weight 500 with positive tracking transfers cleanly.

## Layout

### Spacing System

- **Base unit:** 8px (with 4px and 2px as the sub-base tier).
- **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 15px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 48px · `{spacing.4xl}` 64px.
- **Section padding (vertical):** `{spacing.2xl}` (32px) on the hero card; `{spacing.3xl}` (48px) on the larger feature panels below the fold.
- **Card internal padding:** `{spacing.2xl}` (32px) on `{component.card-cream}` and `{component.card-white}`.
- **Top-nav padding:** `{spacing.md}` (12px) vertical, `{spacing.3xl}` (48px) horizontal.

### Grid & Container

- **Max content width:** ~1344px on the body floor below the fold (matches the captured `widthPx` on the body-paragraph extraction).
- **Hero card:** 32px-rounded inset card running ~1280px wide with cream visible at the edges, containing the headline + CTA + tilted phone mockup in a 55% / 45% horizontal split.
- **Below-fold sections:** centered 2-up grid pairing a cream feature panel with a phone mockup, repeated for each product domain ("Built and managed for you", "Build it yourself", "Make the most of your money").
- **Data table rows:** full-width with `{colors.hairline}` rules separating each row, 12px vertical padding.

### Rhythm

The page alternates between **gradient panel and cream editorial**. The hero is a single dense gradient panel with everything (headline, bullets, CTA, phone) packed inside. Below the fold the rhythm opens up — each section becomes a 2-up grid pairing a cream feature panel with a tilted phone mockup, with 64px vertical spacing between sections. The testimonial band returns to a dense single-panel composition; the disclosure footer flattens back to single-column. The rhythm is dense-then-open-then-dense rather than a steady tempo.

## Elevation

The system has essentially **no shadow tier** beyond a soft tonal lift on the hero card. The page renders depth through three devices:

- **Tonal lift:** the cream feature panels (`{colors.surface-cool}`) sit on the pure-white body floor with a one-step tonal contrast — no shadow drawn.
- **Hairline borders:** `{colors.hairline}` (#e5e7eb) carries 580 of the 1486 captured borders. Hairlines do the elevation work for cards, dropdowns, input fields, and data-table rows.
- **Phone-mockup frame:** the only element on the page with a visible shadow is the charcoal phone-mockup frame, which carries a soft `rgba(24, 23, 43, .17)` 16-pixel halo wired as `--tk-content-shadow`.

The shadow ink is wired as `rgba(24, 23, 43, *)` — the same hex as `{colors.ink}` at low opacity. Wealthfront ties shadow tone to ink color rather than to pure black, which keeps elevation feeling consistent with the violet-undertoned text.

## Shapes

The radius scale is **generous on cards, tight on chips**:

- `{rounded.none}` 0px — data-table rows and full-bleed sections.
- `{rounded.sm}` 6px — the primary CTA pill, the secondary button, and the text input (12 occurrences). Kept visually distinct as a chip rather than fully-rounded so the button reads as a financial-product affordance rather than a casual consumer CTA.
- `{rounded.md}` 8px — dropdown items and smaller chips (4 occurrences).
- `{rounded.lg}` 16px — the dominant major-surface rounding (20 occurrences). The gradient hero card, the cream feature panels, the phone-mockup outer corners, the testimonial card.
- `{rounded.full}` 9999px — the pill-shaped avatar surrounds in the testimonial section (6 occurrences).

There is no 4px tier, no 12px tier, no 24px tier. The 16px default carries every major surface; the 6px tier carries every CTA. The binary split keeps the chrome readable as financial-product UI rather than as a casual lifestyle brand.

## Components

**`hero-card`** — The 32px-rounded gradient card that carries the above-fold composition. `{colors.primary-deep}` gradient lower-stop, `{colors.primary}` upper-stop, 48px internal padding, ~1280px wide. Floats inside the page with cream visible at the edges.

**`hero-heading`** — Near-white text on the violet gradient, 62px Calibre weight 700 with -1.86px tracking. The largest typographic moment in the system.

**`section-heading`** — Same `{typography.display-xl}` token rendered in violet `{colors.primary-violet}` on the white canvas below the fold ("Turn your savings into wealth", "Make the most of your money, wherever you're at").

**`sub-section-heading`** — Violet `{colors.primary-violet}` text at `{typography.display-md}` (32px / 700) — the sub-headings inside feature panels ("Built and managed for you", "Build it yourself").

**`body-paragraph`** — Default ink running text at `{typography.body-lg}` (18px / 400) on the white canvas.

**`body-paragraph-on-violet`** — White text at `{typography.body-md}` on the violet hero card — the sub-headline and bullet rows beneath the 62px h1.

**`legal-disclosure`** — Muted `{colors.muted}` text at `{typography.caption}` (12px / 400) — the dense disclosure rows below the data sections and the full-width legal band above the footer.

**`eyebrow-label`** — Ink text at `{typography.eyebrow}` (11px / 500 / 0.55px tracking) uppercase. The small-caps section signpost that sits above every section heading.

**`button-primary`** — The signature CTA. Saturated violet `{colors.primary}` fill, white text, `{rounded.sm}` 6px radius, 12x20 padding, 46px height. "Get started" is the canonical instance.

**`button-secondary`** — White fill, violet text, 1px hairline border, same dimensions as primary. Used for "Learn more" / "Open an account" below the fold.

**`top-nav`** — Deep night-violet `{colors.primary-deep}` surface, 64px height, 12x48 padding. The Wealthfront wordmark sits flush left in white; product links (Cash / Investing / Borrowing / Pricing) center; "Log in" + "Get started" cluster flush right. The only navigation in the directory that runs on the brand voltage rather than a neutral surface.

**`nav-link`** — White text in `{typography.nav-link}` (18px / 400) on the violet top-nav, no hover background visible in the captured surface.

**`card-cream`** — `{colors.surface-cool}` fill, ink text, `{rounded.lg}` 16px radius, 32px internal padding. The default feature panel below the fold — holds a sub-section heading, an eyebrow label, a body paragraph, and an embedded phone-mockup pictogram.

**`card-white`** — White fill, ink text, 1px hairline border, `{rounded.lg}` 16px radius, 32px internal padding. Used for data-table containers and the testimonial card.

**`data-row`** — White surface with a 1px `{colors.hairline}` bottom border, 12px vertical padding. Used inside the data-section tables ("Cash" / "Bonds" / "Stocks" allocation rows).

**`phone-frame`** — Pure black `{colors.ink-black}` outer shell with a violet-product interior, `{rounded.lg}` 16px outer radius, 0 padding. Houses the tilted iOS dashboard mockups. Tilted at 12 degrees in the hero and at 0 degrees below the fold.

**`avatar-pill`** — Pale violet `{colors.surface-violet}` fill, deep night text in `{typography.heading-md}`, fully-rounded `{rounded.full}` pill, 48px height. Used as the testimonial-author avatar surrounds.

**`text-input`** — White fill, ink text, 1px hairline border, `{rounded.sm}` 6px radius, 12x16 padding, 44px height. Form field outline thickens to 2px on focus.

## Do's and Don'ts

**Do** treat the violet `{colors.primary}` as the load-bearing voltage and skip green entirely. The system has 27 captured violet occurrences and zero green occurrences in the marketing chrome; introducing a green accent for "positive" affordances (gains, success states) would dissolve the deliberate inversion of the fintech-category palette.

**Do** keep the hero as a 32px-rounded inset card rather than a full-bleed gradient surface. The card-with-edges treatment is what differentiates Wealthfront's hero from Cloudflare's full-bleed orange and Spline's near-black canvas; expanding the gradient to the page edges loses the panel-floating signature.

**Do** use Calibre across every tier from 11px eyebrow up to 62px hero. The single-family system is the typographic discipline; introducing a serif counterpart for "editorial" sections or a monospace for "data" sections would break the brand's tonal consistency.

**Do** render every product surface inside a tilted charcoal phone frame. The 12-degree tilt and the rounded `{rounded.lg}` corners are the brand's product-presentation device; showing a flat browser screenshot or an untilted phone would feel borrowed from a different system.

**Don't** swap `{colors.primary}` (the violet voltage) for `{colors.primary-deep}` on the CTA fill. The deep night `{colors.primary-deep}` is reserved for the top-nav surface and the gradient lower-stop; using it on the button would crush the chromatic step between background and affordance.

**Don't** use `{colors.hairline}` (#e5e7eb) as a background fill or a text color — it is a border-only token (580 of its 881 occurrences are borders). For a light surface, use `{colors.canvas}` or `{colors.surface-cool}` instead.

**Don't** introduce a 4px corner radius tier or a 12px radius tier. The system is binary on cards (16px) and chips (6px); adding a middle value softens the contrast between major surfaces and tappable affordances and makes the data tables feel less like financial UI.

**Don't** render the eyebrow tier in mixed case or in a larger size. The 11px / 500 / 0.55px tracking uppercase treatment is the system's only small-caps signpost; bumping to 14px or dropping the uppercase reads as a generic SaaS label rather than as Wealthfront's editorial section device.

## Known Gaps

- **Dark mode:** the captured marketing surface is light-only. A dark variant exists in the iOS app (rendered inside the phone mockups) but is not represented in the marketing tokens.
- **Hover and focus states:** the primary button, secondary button, and text input all have hover variants wired in the `--tk-surface-interactive-*` token family, but only the resting states are visible on the captured surface.
- **Form input error states:** the `--tk-invalid-box-shadow-border-default` token suggests a 1px destructive-red focus ring, but the rendering is not exposed on the marketing page; the destructive ink is wired as `--tk-content-interactive-destructive`.
- **Motion:** the phone mockups subtly tilt-animate on scroll-into-view and the hero gradient holds a slow rotation, but the spec captures end-state values only.
- **iOS product surfaces:** the dashboard screens shown inside the phone mockups carry their own surface tokens (chart-categorical accents, affordability tiers, day / night gradient pairs) that are referenced in CSS but not rendered on the marketing chrome.
- **Chart-categorical palette:** a 10-step chart-categorical ladder spanning deep night through violet, pale violet, mint, sage, leaf-green, ochre, sand, and butter is wired in CSS but not all swatches are rendered on the marketing surface; the palette is reserved for the product investment-allocation charts.
- **Footnote and legal-disclosure typography:** the regulatory disclosure tier uses a complex multi-column layout with `{typography.caption}` that is partially captured but not fully tokenized as a component.