---
version: alpha
name: Wealthfront
description: A deep navy-indigo canvas where Calibre's tightly tracked sans commands the headlines with compressed 0.90 line-heights, GT Alpina's extralight serif glides in for editorial counterpoint, and a single saturated indigo-violet is the only chromatic force — a robo-advisor that looks and feels like an investment-grade design system.

colors:
  # Surface / canvas
  background: "#f0f0f2"          # cool off-white page canvas
  surface: "#ffffff"             # cards, panels, pure-white raised tiles
  surface-dark: "#18172b"        # deep navy-indigo dark sections and footer

  # Ink / text
  ink: "#18172b"                 # near-black navy, all headlines and body
  ink-secondary: "#424158"       # mid-navy supporting copy
  ink-muted: "#b7b7c0"           # captions, placeholder, muted metadata
  on-dark: "#ffffff"             # text on dark sections
  on-primary: "#ffffff"          # text on the indigo CTA

  # Brand accent — the singular Wealthfront indigo-violet
  primary: "#4840bb"             # indigo-violet primary CTA and accent
  primary-hover: "#564de0"       # CTA hover — dembrandt hover value
  primary-deep: "#230b59"        # deep navy-violet — dark accent tint, pressed states

  # Interaction / state
  focus-tint: "#dadef1"          # was rgba(218,222,241,0.1) — Google format requires hex
  focus-ring: "#3b82f6"          # was rgba(59,130,246,0.5) — Tailwind ring, Google format requires hex

  # Borders
  border: "#e5e7eb"              # Tailwind gray-200 — card edges, dividers, input outlines
  border-inner: "#f0f0f2"        # inner panel dividers matching canvas tone

  # Shadow tints (opaque stand-ins for the elevation table)
  shadow-soft: "#18172b"         # was rgba(24,23,43,0.06) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 156px
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: -4.68px
  display:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 62px
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: -1.86px
  display-serif:
    fontFamily: "GT Alpina, ui-serif, Georgia, 'Times New Roman', serif"
    fontSize: 59px
    fontWeight: 200
    lineHeight: 0.95
    letterSpacing: -2.95px
  heading:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: -1.44px
  heading-sub:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 0.9
    letterSpacing: -0.96px
  title:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: -0.48px
  body-large:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  body-small:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  button-ui:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.8px
  caption:
    fontFamily: "Calibre, ui-sans-serif, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px
  5xl: 128px

rounded:
  sm: 4px
  md: 6px
  lg: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"

  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 24px
  button-secondary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-outline:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 24px
  button-outline-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-dark}"

  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 14px 24px
  button-ghost-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary-deep}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.lg}"
    padding: 32px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label}"
    padding: 16px 32px

  nav-link:
    textColor: "{colors.on-dark}"
    typography: "{typography.label}"
    padding: 8px 12px
  nav-link-hover:
    textColor: "{colors.focus-tint}"

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.primary-deep}"

  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 4px 10px

  eyebrow:
    textColor: "{colors.ink-muted}"
    typography: "{typography.label}"
    padding: 0px
---

# Wealthfront Design System

## Overview

Wealthfront opens on a deep, midnight-navy header — `{colors.surface-dark}` — that fills the full viewport and immediately signals that this is not a casual money app. It is a service that takes your portfolio seriously. The wordmark and navigation float on this near-black field in white, and the first CTA is a white-fill button with deep navy text rather than a bright colored pill, a deliberately muted gesture that says "we are already trusted; we don't need to shout." Below the dark hero the page transitions to a cool off-white canvas (`{colors.background}`) — a Tailwind `gray-100`-class tone that reads as clean paper without the clinical harshness of pure white. The tonal contrast between that dark header and the bright canvas below is the main architectural device on the page.

The type system is a two-voice arrangement built for compression and impact. **Calibre** (`{typography.display-hero}`), a bold custom grotesque with tight negative tracking that plunges to -4.68px at 156px and a compressed 0.90 line-height, handles every headline — the effect is tightly-stacked, almost monolithic type that reads like the front of a financial newspaper. **GT Alpina** (`{typography.display-serif}`) appears at extralight weight (200–100) for editorial counter-moments: testimonials, pull-quotes, section transitions. Where Calibre is dense and confident, GT Alpina is airy and refined — the serif's wide-open -2.95px tracking at a near-featherweight gives it an almost whispered quality against the bold grotesque. The combination signals precision and taste in equal measure.

The color story is architectural restraint with one punctuation mark. Everything structural lives in a navy-to-neutral grayscale ladder — from the deep `{colors.surface-dark}` header through the `{colors.ink}` near-black to the cool `{colors.background}` canvas. The brand accent, `{colors.primary}`, is a single indigo-violet applied to links, outline buttons on light sections, and the occasional active state. It appears rarely enough that its presence reads as a deliberate choice, not ambient decoration. The "Get started" CTA on the dark hero is a white button with dark text, while on light sections the indigo fills the secondary CTA button. The overall impression is of a well-managed portfolio: every color has an allocation, nothing is over-weighted.

**Key Characteristics:**
- Deep navy-indigo header and footer (`{colors.surface-dark}`) as the brand's architectural anchor
- Cool off-white canvas (`{colors.background}`) as the resting page tone — Tailwind gray-100, not pure white
- **Calibre** grotesque at weight 700 with a compressed 0.90 line-height and steeply-negative tracking (-4.68px at 156px) — monolithic, newspaper-front confidence
- **GT Alpina** extralight serif (`{typography.display-serif}`) for editorial moments — weight 200 with wide negative tracking, the refined counterpoint to Calibre's density
- A single indigo-violet accent (`{colors.primary}`) — spent on outline buttons and links on light sections, never a surface wash
- Primary CTA on dark backgrounds is a white-fill button with deep navy text — understated, never urgent
- `{rounded.md}` (6px) on all buttons — tight and precise, not pill-shaped; `{rounded.lg}` (12px) on cards
- Tailwind `gray-200` hairline borders (`{colors.border}`) do the structural work; shadows are minimal and dark-tinted
- Light tracking reversal: display type uses steep negative spacing; the 16px `{typography.label}` uses positive +0.8px tracking for all-caps or small UI labels
- Generous section spacing (`{spacing.4xl}`–`{spacing.5xl}`) keeps the page editorial and unhurried despite the compressed headline type

## Colors

### Surface & Canvas
- **Cool Off-White** (`{colors.background}`): The resting page canvas — Tailwind gray-100-adjacent, slightly cooler than warm off-whites used by lifestyle finance brands.
- **White** (`{colors.surface}`): Cards, panels, input fields — the full-brightness surface that separates from the canvas.
- **Deep Navy-Indigo** (`{colors.surface-dark}`): The header, footer, and dark statement sections. The brand's dominant canvas for chrome and navigation.

### Ink / Text
- **Near-Black Navy** (`{colors.ink}`): All headline and body ink on light sections — a very dark blue-black, not a neutral gray-black.
- **Mid-Navy** (`{colors.ink-secondary}`): Supporting copy and secondary labels on light surfaces.
- **Muted Lavender-Gray** (`{colors.ink-muted}`): Captions, placeholder text, disabled states — a desaturated lavender that harmonizes with the primary.
- **On-Dark** (`{colors.on-dark}`): Pure white text on the navy sections.

### Brand Accent
- **Indigo-Violet** (`{colors.primary}`): The singular chromatic accent. Outline buttons on light sections, inline links, focus states, and the secondary CTA fill.
- **Indigo Hover** (`{colors.primary-hover}`): The elevated hover state for indigo buttons.
- **Deep Navy-Violet** (`{colors.primary-deep}`): The pressed and deep tint — the darkest chromatic value, used for button text on white CTAs and pressed states.

### Interaction & Borders
- **Focus Tint** (`{colors.focus-tint}`): A pale lavender-blue derived from the primary palette for hover highlights on dark backgrounds (flattened from rgba).
- **Focus Ring** (`{colors.focus-ring}`): Tailwind's default ring blue for keyboard focus (flattened from rgba — opaque approximation).
- **Hairline** (`{colors.border}`): Tailwind gray-200 card edges and dividers.
- **Shadow** (`{colors.shadow-soft}`): Opaque stand-in for the faint navy ambient shadow under cards (original was rgba over the dark ink — flattened for the Google spec).

## Typography

### Font Family
- **Primary**: `Calibre`, a bold custom grotesque, with fallbacks `ui-sans-serif, system-ui, -apple-system, Arial, sans-serif`. Carries every headline and all UI copy.
- **Editorial serif**: `GT Alpina` (with `ui-serif, Georgia, 'Times New Roman', serif` fallbacks). Set at extralight (200) or hairline (100) for testimonials, pull-quotes, and soft editorial transitions. `liga` feature enabled.
- **Tracking philosophy**: Display type uses aggressive negative spacing (-4.68px at 156px, -1.86px at 62px) for a compressed, stacked headline aesthetic; the 16px label token inverts this with +0.8px tracking for small-caps UI labels.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 156px / Calibre 700 / lh 0.90 / -4.68px — the full-viewport marquee claim |
| `display` | 62px / Calibre 700 / lh 0.90 / -1.86px — major section headlines |
| `display-serif` | 59px / GT Alpina 200 / lh 0.95 / -2.95px — editorial counterpoint, testimonials |
| `heading` | 48px / Calibre 700 / lh 0.90 / -1.44px — section headings |
| `heading-sub` | 32px / Calibre 600 / lh 0.90 / -0.96px — sub-section headings |
| `title` | 24px / Calibre 700 / -0.48px — card and feature titles |
| `body-large` | 18px / Calibre 400 / lh 1.50 — lead paragraphs |
| `body` | 18px / Calibre 500 / lh 1.20 — standard body and component copy |
| `body-small` | 14px / Calibre 400 — dense supporting copy |
| `button-ui` | 18px / Calibre 500 / lh 1.50 — button and interactive labels |
| `label` | 16px / Calibre 500 / +0.8px — small-caps UI labels, nav items |
| `caption` | 12px / Calibre 400 — metadata, badges, legal copy |

### Principles
- **Calibre for structure, GT Alpina for warmth**: the grotesque carries the data and the authority; the extralight serif arrives only when a moment wants a human, editorial beat.
- **Compress the big type, open the small type**: headlines live at 0.90 line-height for stacked density; body and button copy opens up to 1.20–1.50.
- **Tracking inverts by scale**: steep negative at display sizes; a gentle positive at label sizes — the system treats tracking as a rhythm instrument.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The rhythm is generous — `{spacing.4xl}` (96px) and `{spacing.5xl}` (128px) separate major page sections, creating breathing room that lets the dense compressed headlines land without crowding. Card interiors are tighter at `{spacing.lg}` (24px) to `{spacing.xl}` (32px).

### Grid & Container
- Max content width: ~1200px, centered across breakpoints from 375px to 1536px+
- The dark hero runs full-bleed to the viewport edges; the content area beneath is a constrained column
- Feature rows commonly use a 2-up or 3-up grid with equal-weight cards on the off-white canvas
- A calculator / rate widget occupies a dedicated full-width section

### Whitespace Philosophy
- **Architecture through air**: generous vertical spacing between sections makes each content block feel like a distinct chapter
- **Dark anchor, light body**: the deep navy header provides visual mass at the top; the light canvas below feels expansive by contrast
- **Numbers need room**: Calibre's compressed headlines at 156px need clear vertical separation from the copy below — `{spacing.3xl}` minimum

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; canvas or white fill | Dark header sections and most off-white page bands |
| Card (Level 1) | Faint navy shadow + `{colors.border}` hairline | Resting cards on the light canvas |
| Raised (Level 2) | Slightly deeper shadow, same tone | Feature tiles and rate calculators |
| Dark Section | Tonal inversion to `{colors.surface-dark}` | Depth through color, not shadow — the header, footer, and dark mid-page bands |
| Focus Ring | `{colors.focus-ring}` 3px ring | Keyboard focus on interactive elements |

**Shadow Philosophy**: Wealthfront keeps its elevation almost entirely implicit. On the light canvas, cards are defined by their white surface against the off-white background and a hairline border; the shadow is a whisper of dark tint that you feel as "this card is raised" rather than see as a cast. The dominant depth strategy is not shadows but tonal architecture — the shift between the deep navy sections and the bright canvas creates more perceived depth than any drop shadow could.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Small chips, inner sub-elements |
| `md` | 6px | Buttons — precise and compact |
| `lg` | 12px | Cards, panels, the primary container radius |
| `pill` | 9999px | Circular avatars, status indicators |

The radius personality is deliberate and restrained. A 6px button radius says "financial product" — it is not trying to be friendly through shape; that work is done by color and type. Cards at 12px have a soft but businesslike corner. There are no oversized pill buttons in the primary marketing hierarchy.

## Components

The complete component spec lives in the `components:` token block.

### Button variants

- **`button-primary`** — White (`{colors.surface}`) fill with deep navy-violet (`{colors.primary-deep}`) text, 6px radius. Used on the dark hero sections where the brand wants a confident, understated CTA that doesn't compete with the headline. Hover settles to the canvas tone.
- **`button-secondary`** — Indigo-violet (`{colors.primary}`) fill, white text. The CTA on light sections and the "Get started" variant in light contexts. Hover brightens to `{colors.primary-hover}`.
- **`button-outline`** — Dark navy fill (`{colors.surface-dark}`) with white text. Used as a paired secondary on dark backgrounds — "Log in" variants.
- **`button-ghost`** — White fill, indigo text. Tertiary low-emphasis actions on the light canvas.

### Cards
- **`card`** — White surface, `{colors.border}` hairline, 12px radius, whisper navy shadow. The feature-tile building block on the light canvas.
- **`card-dark`** — Deep navy (`{colors.surface-dark}`) fill, white text, 12px radius. Dark-section feature tiles and trust testimonial blocks.

### Inputs
- **`input`** — White fill, hairline border, 6px radius. **`input-focus`** keeps the fill and adds a `{colors.focus-ring}` ring.

### Navigation
- **`nav-bar`** — Deep navy (`{colors.surface-dark}`) bar, white links (`{typography.label}`). **`nav-link`** is white, shifting toward the focus tint on hover.

### Links, Badges & Eyebrows
- **`link`** — Indigo-violet (`{colors.primary}`) for inline links, weight 500. Hover deepens to `{colors.primary-deep}`.
- **`badge`** — Off-white fill, mid-navy text, 6px radius. Low-key tag elements.
- **`eyebrow`** — Muted lavender-gray (`{colors.ink-muted}`) labels above section headings.

## Do's and Don'ts

### Do
- Open with the deep navy (`{colors.surface-dark}`) header — it is the brand's first signal and architectural anchor
- Use the cool off-white canvas (`{colors.background}`) for all content bands between dark sections — not pure white
- Set every headline in **Calibre** at weight 700 with negative tracking; `{typography.display-hero}` should be at least 62px to feel like the brand
- Reserve **GT Alpina** (`{typography.display-serif}`) at weight 200 for editorial moments — testimonials, pull-quotes, soft section transitions
- Keep the primary CTA on dark backgrounds a white-fill button (`{components.button-primary}`) — confident understatement
- Spend indigo (`{colors.primary}`) on the secondary CTA fill on light sections and on inline links — never as a surface wash
- Use a 6px radius (`{rounded.md}`) on buttons and 12px (`{rounded.lg}`) on cards — keep the geometry precise
- Let the tonal contrast between navy sections and the light canvas do the depth work; keep shadows to a whisper (`{colors.shadow-soft}`)

### Don't
- Don't use pill-shaped buttons — the system is `{rounded.md}` for interactive elements; pills undermine the financial-grade geometry
- Don't introduce a second saturated color — `{colors.primary}` indigo-violet is the only chromatic accent; everything else is navy-to-white
- Don't set GT Alpina as body or paragraph copy — it is an editorial accent, not the working type
- Don't use Calibre's display sizes without steep negative tracking — at 156px with zero tracking the headline loses its compressed authority
- Don't make the hero CTA loud and colorful — white-on-navy is the correct hierarchy on dark backgrounds
- Don't use pure black (`#000000`) for text — ink is a deep navy-black (`{colors.ink}`)
- Don't apply heavy drop shadows — depth is architectural (tonal shifts), not elevated (cast shadows)
- Don't crowd headlines — `{typography.display-hero}` at 0.90 line-height needs `{spacing.3xl}` or more below it before the next element

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single column; display-hero scales from 156px toward ~40px; nav collapses to menu toggle; CTA buttons go full-width |
| Mobile | 480–767px | Single column with tighter padding; dark header stack narrows |
| Tablet | 768–959px | Two-column feature rows begin; Calibre headlines scale down proportionally |
| Desktop | 960–1200px | Full layout; 3-up card rows; centered ~1200px container |
| Large Desktop | ≥1380px | Wide container; generous `{spacing.5xl}` section padding; display-hero approaches full 156px |

### Touch Targets
- Buttons at `14px 24px` padding run approximately 50px tall — comfortable for thumbs
- Nav links and feature card tap areas carry generous surrounding space
- Rate calculator inputs are sized to the full input-field spec

### Collapsing Strategy
- **Navigation**: full horizontal dark nav → menu toggle on mobile; the "Get started" CTA persists in the header
- **Hero**: Calibre display-hero headline scales steeply down from 156px toward ~40px, maintaining negative tracking proportionally
- **Feature grid**: 3-up or 2-up → single column on mobile
- **Dark sections**: full-bleed navy bands remain full-bleed across all breakpoints — no rounding at narrow viewports
- **Spacing**: section vertical padding compresses from ~128px toward ~48px on mobile

### Image Behavior
- Product dashboard screenshots and illustration assets scale as contained images within the card grid
- The full-bleed dark header illustration / dashboard preview stacks above copy on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Cool Off-White (`{colors.background}`)
- Text: Near-Black Navy (`{colors.ink}`)
- Brand accent: Indigo-Violet (`{colors.primary}`) — the only saturated color
- Secondary text: Mid-Navy (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA on dark: White fill / deep navy text (`{components.button-primary}`)
- Primary CTA on light: Indigo fill / white text (`{components.button-secondary}`)

### Example Component Prompts

- "Create a full-bleed dark hero on deep navy-indigo (`{colors.surface-dark}`) with a white Wealthfront wordmark, a 156px Calibre weight-700 headline in white with -4.68px letter-spacing and 0.90 line-height, a supporting body paragraph in `{typography.body}` weight 500, and a white-fill CTA button (`{components.button-primary}`) with `{colors.primary-deep}` text and `{rounded.md}` (6px) radius at 14px 24px padding"
- "Build a feature card on white (`{colors.surface}`): 12px radius (`{rounded.lg}`), 1px `{colors.border}` edge, faint navy shadow (`{colors.shadow-soft}`), 24px padding, a 24px Calibre 700 title (`{typography.title}`) in `{colors.ink}`, body copy in `{typography.body-large}`, and a `{colors.primary}` inline link at the bottom"
- "Render the secondary CTA button: indigo-violet (`{colors.primary}`) fill, white text in Calibre 500 18px (`{typography.button-ui}`), 6px radius (`{rounded.md}`), 14px 24px padding; hover brightens to `{colors.primary-hover}`"
- "Design a navigation bar: deep navy (`{colors.surface-dark}`) background, white Calibre links at `{typography.label}` (+0.8px tracking), with a white-fill 'Get started' button at the right at `{components.button-primary}` specs"
- "Create a GT Alpina pull-quote: 59px extralight (weight 200), -2.95px letter-spacing, 0.95 line-height, `{colors.ink}` color on white (`{colors.surface}`) — the one editorial serif moment between Calibre headlines"
- "Build a stats row with three cards: each card uses `{components.card}` geometry; the number headline is `{typography.display}` (62px, Calibre 700, -1.86px tracking) in `{colors.ink}` or `{colors.primary}`; the label below is `{typography.caption}` in `{colors.ink-muted}`"

### Iteration Guide

1. Start with the deep navy header (`{colors.surface-dark}`), then drop to cool off-white (`{colors.background}`) for the content body. If you started on pure white, swap the canvas to the cooler off-white.
2. Headlines are **Calibre 700 with negative tracking** — at 62px use -1.86px; at 156px use -4.68px. If your headline has zero or positive tracking, it isn't Wealthfront.
3. GT Alpina at weight 200 is editorial-only — if it's in body copy, replace it with Calibre 400.
4. The only saturated color is indigo-violet (`{colors.primary}`). On dark backgrounds the CTA is a white button; on light backgrounds it is indigo-fill. Never both on the same surface.
5. Keep button radius at `{rounded.md}` (6px) and card radius at `{rounded.lg}` (12px). No pill buttons.
6. Depth comes from tonal architecture (navy ↔ off-white), not from shadows. Shadows should be barely perceptible.
7. Positive tracking (+0.8px) is reserved for `{typography.label}` — small UI labels only. Everything at display size and above uses negative tracking.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Wealthfront. Brand names and trademarks belong to their respective owners.