---
version: alpha
name: "E*TRADE"
website: "https://us.etrade.com"
description: >-
  The Morgan Stanley-owned online brokerage runs a deep electric violet (hex 5627d8) as its single brand voltage, paired with a deep indigo near-black hero canvas at hex 241056 — the chromatic move almost no other broker makes. GraphikETRADE carries every tier from 64px weight-600 display down to 12px weight-400 footnote, with all small surfaces typeset at -0.21px tracking that flattens at 64px display to a near-zero. The radius scale is 16px-dominant with a small 2px tier reserved for primary CTAs and a 30px pill tier for pricing emphasis. The above-fold composition stacks a photographic hero ("Meet the IPO moment") on the indigo canvas with a tight white CTA, then drops into a sequence of dark-then-light-then-dark editorial bands that read as broker-statement chrome rather than fintech-startup gradient.

seo:
  title: "E*TRADE Design System for React — electric violet, GraphikETRADE, 18 components"
  metaDescription: "E*TRADE's marketing system as a DESIGN.md file — electric violet voltage on deep indigo, GraphikETRADE display at weight 600, and a 16px-dominant radius scale. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Electric violet voltage — hex 5627d8 carries the primary CTA, info-status badges, and accent borders across the page, with deep indigo near-black at hex 241056 doing the hero-canvas work"
    - "GraphikETRADE proprietary sans — display sits at 48-64px in weight 600 with -1px tracking, body at 12-16px in weight 400 with -0.21px tracking"
    - "Tight 2px CTA radius — the primary button breaks the system's 16px-dominant rounding with a deliberately small-step corner that reads as broker-form chrome"
    - "Banded editorial rhythm — dark indigo hero, white pricing strip, dark testimonial band, white awards row, alternating chromatic statements rather than gradient atmosphere"
    - "Categorical chart palette — 36 declared categorical color tokens cover the dashboard chart family but never bleed into marketing chrome"
  tags:
    - "Fintech & Crypto"
    - "Banking & Payments"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    E*TRADE's marketing site sits in an unusual chromatic neighborhood for a broker. The brand voltage is electric violet — hex 5627d8 — wired into CSS as `--color-interactive-primary-default`, `--color-status-info-branded`, and `--color-border-window-active`, appearing 71 times in the captured page across the primary CTA, info-status badges, and accent borders. The above-fold hero canvas is a deep indigo near-black (hex 241056, wired as `--color-background-hero` and `--color-background-primary-navigation`), with a photographic hero ("Meet the IPO moment") showing a trader's silhouette at a multi-monitor setup. Where Vanguard fills its hero with a saturated crimson, Schwab leans on corporate navy, and Robinhood goes matte black with a green-orange split, E*TRADE picks a chromatic position that reads as "broker-fintech with a violet edge" — closer to the Morgan Stanley parent brand than to a discount-broker peer.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 18 color tokens drawn from a Campfire design-system token set, organized into a brand-voltage tier (violet primary, violet hover, secondary cyan), a structural near-black indigo for hero surfaces, a structural ink-and-grayscale tier for editorial chrome, plus a separate categorical chart palette that ships 36 declared accents but renders zero of them on the marketing surface. 11 typography tokens span GraphikETRADE in display, heading, body, and button tiers, with a Material Icons mono companion for iconography labels. 18 components cover the violet primary CTA, the dark-band testimonial card, the white pricing strip with weight-600 numerals, the awards-and-recognition footer row, and the indigo top-nav with white wordmark.

    Feed this file to Claude or Cursor and it will reproduce E*TRADE's specific moves: electric violet voltage on a deep indigo hero canvas, GraphikETRADE display at weight 600 with -1px tracking, the 2px tight CTA radius against a 16px-dominant body radius, and the alternating dark-light editorial banding. The one thing worth borrowing carefully: the proprietary Campfire token set ships an enormous categorical chart palette wired to CSS custom properties, but the marketing chrome only renders the four brand-tier values. If you fork the tokens, prune the categorical accents — they belong to the dashboard product, not the marketing surface.
  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://us.etrade.com"
      title: "E*TRADE — official site"
      description: "E*TRADE'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 E*TRADE's primary brand color?"
      answer: "E*TRADE's brand voltage is electric violet — hex 5627d8 — wired into CSS as the variable family --color-interactive-primary-default, --color-status-info-branded, --color-border-window-active, and --temp-legacy-snackbar-btn-border. The voltage appears 71 times in the captured page (33 as text, 31 as border, 7 as background) and carries the primary CTA, the info-status badges, the active-window border ring, and the accent strokes on dark-band cards. The deep indigo near-black hex 241056 carries the hero canvas, the top-nav background, and the testimonial band — wired as --color-background-hero and --color-background-primary-navigation. A lighter violet hex 6e3df5 appears 74 times but only as secondary border and accent text."
    - id: "typography"
      title: "What typeface does E*TRADE use, and what should I use as a substitute?"
      answer: "E*TRADE's marketing site runs GraphikETRADE — a licensed cut of Commercial Type's Graphik, customized for the brand. Fallbacks walk Helvetica Neue, Helvetica, Arial, sans-serif. Display sits at 48-64px in weight 600 with -1px tracking on the hero h1; section h2 at 36px / 600 with -0.4px; body at 12-16px in weight 400 with -0.21px tracking, with weight 500 reserved for nav and button labels. The closest open-source substitute is Inter at the same weights, though Graphik's slightly narrower x-height and tighter aperture make Inter feel marginally wider at 13-14px body. For the 64px display tier, General Sans is closer in proportion."
    - id: "violet-and-indigo"
      title: "Why does E*TRADE pair violet with indigo instead of standard fintech navy?"
      answer: "The violet-indigo pairing is the Morgan Stanley-era brand evolution. After Morgan Stanley acquired E*TRADE in 2020, the brand identity shifted from the legacy green-and-purple to a violet-forward palette that signals continuity with Morgan Stanley's purple-blue heritage while keeping E*TRADE's distinctive chromatic position. The deep indigo hex 241056 reads as luxury-finance rather than discount-broker, and the electric violet hex 5627d8 holds the brand's tech-forward voice. Schwab and Fidelity both anchor on corporate navy; Robinhood anchors on matte black. The violet-indigo pairing is unique among major US brokerages and reads as deliberate category positioning."
    - id: "radii"
      title: "What corner-radius scale does E*TRADE use?"
      answer: "The radius scale is multi-tier: 16px dominates the system with 20 occurrences on cards and editorial tiles; 2px is reserved for the primary CTA pill (with 8 occurrences elsewhere on small chips and inputs); 30px appears 5 times on pricing-emphasis pills; 8px on icon buttons; 40px on the rare large rounded card; and 9999px on a single status badge. The tight 2px CTA radius is the unusual move — most fintech systems use 8-16px rounding on primary buttons. The 2px reads as broker-statement chrome, closer to a Bloomberg terminal than to a SaaS marketing page."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own broker 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 E*TRADE's specific moves: electric violet voltage on a deep indigo hero canvas, GraphikETRADE display at weight 600 with -1px tracking, the 2px tight CTA radius against 16px-dominant body radius, and the alternating dark-light editorial banding. You can also reference the tokens directly — every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the Campfire design-system token set ships 36 categorical chart accents that the marketing surface never renders. If you fork the tokens, prune them — those accents belong to the trading dashboard."

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

colors:
  primary: "#5627d8"
  primary-hover: "#7852e0"
  primary-active: "#451fad"
  accent-light: "#6e3df5"
  accent-soft: "#cdb3ff"
  accent-muted: "#ab80ff"
  hero-canvas: "#241056"
  ink: "#242424"
  ink-deep: "#121213"
  ink-soft: "#2c2931"
  canvas: "#ffffff"
  muted: "#666666"
  hairline: "#e2e2e2"
  shadow: "#000000"
  positive: "#107a1b"
  warning: "#bb831b"
  highlight-tint: "#f3f0ff"
  status-info: "#0065e3"

typography:
  display-xl:
    fontFamily: "GraphikETRADE, \"Helvetica Neue\", Helvetica, arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 64px
    letterSpacing: "-0.8px"
  display-lg:
    fontFamily: "GraphikETRADE, \"Helvetica Neue\", Helvetica, arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 52px
    letterSpacing: "-1px"
  display-md:
    fontFamily: "GraphikETRADE, \"Helvetica Neue\", Helvetica, arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 40px
    letterSpacing: "-0.4px"
  heading-lg:
    fontFamily: "GraphikETRADE, \"Helvetica Neue\", Helvetica, arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 28px
    letterSpacing: "-0.21px"
  heading-md:
    fontFamily: "GraphikETRADE, \"Helvetica Neue\", Helvetica, arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 28px
    letterSpacing: "-0.21px"
  heading-sm:
    fontFamily: "GraphikETRADE, \"Helvetica Neue\", Helvetica, arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 24px
    letterSpacing: 0
  body-md:
    fontFamily: "GraphikETRADE, \"Helvetica Neue\", Helvetica, arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "-0.21px"
  body-sm:
    fontFamily: "GraphikETRADE, \"Helvetica Neue\", Helvetica, arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: "-0.21px"
  body-xs:
    fontFamily: "GraphikETRADE, \"Helvetica Neue\", Helvetica, arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: "-0.21px"
  button-md:
    fontFamily: "GraphikETRADE, \"Helvetica Neue\", Helvetica, arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 15px
    letterSpacing: 0
  nav-link:
    fontFamily: "GraphikETRADE, \"Helvetica Neue\", Helvetica, arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 18px
    letterSpacing: "-0.21px"

rounded:
  none: "0px"
  xs: "2px"
  md: "8px"
  lg: "16px"
  pill: "30px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  base: "10px"
  md: "15px"
  lg: "16px"
  xl: "20px"
  2xl: "24px"
  3xl: "30px"
  4xl: "60px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: "8px 15px"
    height: "33px"
    borderColor: "{colors.primary}"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: "8px 15px"
    height: "33px"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: "8px 15px"
    height: "33px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: "8px 15px"
    height: "33px"
    borderColor: "{colors.ink}"
  button-on-dark:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.hero-canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xs}"
    padding: "8px 15px"
    height: "33px"
  top-nav:
    backgroundColor: "{colors.hero-canvas}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "10px 20px"
    height: "56px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    padding: "10px 15px"
  nav-link-muted:
    backgroundColor: "transparent"
    textColor: "{colors.accent-muted}"
    typography: "{typography.nav-link}"
    padding: "10px 15px"
  hero-section:
    backgroundColor: "{colors.hero-canvas}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.lg}"
    padding: "60px 24px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-lg}"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.muted}"
    typography: "{typography.body-sm}"
  card-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "24px"
    borderColor: "{colors.hairline}"
  card-dark:
    backgroundColor: "{colors.ink-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "24px"
  pricing-cell:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.none}"
    padding: "24px 20px"
    borderColor: "{colors.hairline}"
  info-badge:
    backgroundColor: "{colors.highlight-tint}"
    textColor: "{colors.primary}"
    typography: "{typography.body-xs}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
    height: "24px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xs}"
    padding: "10px 15px"
    height: "40px"
    borderColor: "{colors.muted}"
---

## Overview

E*TRADE's marketing site sits in a chromatic neighborhood no other major US broker occupies. **Violet-indigo pairing.** The brand voltage is electric violet (`{colors.primary}` — #5627d8) wired into the Campfire token set as `--color-interactive-primary-default`, `--color-status-info-branded`, and `--color-border-window-active`. The hero canvas is a deep indigo near-black (`{colors.hero-canvas}` — #241056) wired as `--color-background-hero` and `--color-background-primary-navigation`, with the photographic hero ("Meet the IPO moment") showing a silhouetted trader at a multi-monitor setup. Where Vanguard fills its hero with saturated crimson, Schwab leans on corporate navy, and Robinhood goes matte black with a green-orange split, the violet-indigo pairing reads as Morgan Stanley-era luxury fintech rather than discount-broker chrome.

The typographic system is **GraphikETRADE single-voice.** A licensed Commercial Type cut of Graphik does every tier — display, heading, body, button, label — with no second family on the marketing surface. Display sits at 48-64px in weight 600 with -0.8 to -1px tracking; body at 12-16px in weight 400 with -0.21px tracking; nav and button labels at 14-15px in weight 500. The -0.21px tracking on body is unusual; most systems hold body type at 0 tracking. The slight negative tightens the optical color and signals broker-statement chrome rather than SaaS-marketing body. A Material Icons stack carries icon labels at 14-20px.

The radius scale is **multi-tier with a tight CTA.** 16px (`{rounded.lg}`) dominates with 20 occurrences across cards and editorial tiles, but the primary CTA breaks down to a deliberately tight 2px (`{rounded.xs}`) — 8 occurrences across primary buttons and small chips. A 30px pill (`{rounded.pill}`) handles pricing-emphasis chips, 8px (`{rounded.md}`) handles icon buttons, and a single 40px and 9999px appear on rare large cards and status badges. The 2px CTA breaks the systemic 16px rhythm intentionally — it reads as terminal chrome, closer to a Bloomberg form than a SaaS hero.

**Key Characteristics:**
- Electric violet voltage (`{colors.primary}` — #5627d8) carries the primary CTA and accent borders at frequency 71 (33 as text, 31 as border, 7 as background); deep indigo (`{colors.hero-canvas}` — #241056) fills the hero canvas and top-nav.
- GraphikETRADE single-voice typography — proprietary Commercial Type cut with -0.21px tracking on body and -0.8 to -1px on display, no serif or monospace voice on the marketing surface.
- Tight 2px (`{rounded.xs}`) CTA radius breaks the 16px-dominant body scale — broker-statement chrome instead of fintech-marketing softness.
- Banded editorial rhythm — dark indigo hero → white pricing strip with weight-600 numerals at 64px → dark indigo testimonial band → white awards-and-recognition row. Alternating chromatic statements, no gradient transitions.
- Near-black ink (`{colors.ink}` — #242424) at frequency 1378 dominates editorial chrome; hairline at #e2e2e2 carries 9 of 9 captured border roles outside the violet voltage.
- Categorical chart palette (36 declared `--color-categorical-*` tokens) belongs to the dashboard product and never renders on the marketing chrome — included in extraction but omitted from the spec.
- 2:1 split between violet (`{colors.primary}`) and a softer violet accent (`{colors.accent-light}` — #6e3df5) — the lighter accent appears 74 times as secondary border and tertiary text, the saturated primary holds CTA and status duty.
- Info-status badge uses a soft lavender tint (`{colors.highlight-tint}` — #f3f0ff) with violet text — the only true tinted-surface moment on the marketing chrome.

## Colors

### Brand

- **Electric Violet** (`{colors.primary}` — #5627d8): frequency 71 — 33 as text, 31 as border, 7 as background. The brand voltage. Wired as `--color-interactive-primary-default`, `--color-status-info-branded`, `--color-border-window-active`, `--temp-legacy-snackbar-btn-border`. Carries the primary CTA, info-status badges, the active-window border ring, accent strokes on dark-band cards.
- **Violet Hover** (`{colors.primary-hover}` — #7852e0): the hover variant. Wired as `--color-interactive-primary-hover`, `--color-interactive-primary-focus`, `--temp-legacy-snackbar-btn-background-hover`. Declared but absent from the captured render (count 0); reserved for hover and focus states.
- **Violet Active** (`{colors.primary-active}` — #451fad): the pressed variant. Wired as `--color-interactive-primary-active` and `--temp-legacy-snackbar-btn-background-active`. Also reserved — captured render does not include the press state.
- **Violet Light** (`{colors.accent-light}` — #6e3df5): frequency 74 — 37 as text, 37 as border. Lighter violet, used as secondary border and tertiary accent text. Despite higher frequency than the primary, this is not the brand voltage — it sits a step lighter and slightly more chromatic.
- **Violet Soft** (`{colors.accent-soft}` — #cdb3ff): frequency 40 — 20 as text, 20 as border. The softest violet tier — used on focus rings and disabled-state borders.
- **Violet Muted** (`{colors.accent-muted}` — #ab80ff): frequency 18 — 10 as text, 8 as border. The on-dark nav-link tone, used for inactive product-nav labels against the indigo top-nav.

### Surface

- **Hero Canvas** (`{colors.hero-canvas}` — #241056): the deep indigo near-black used for the hero block, the top-nav, and the testimonial band. Wired as `--color-background-hero` and `--color-background-primary-navigation`. Distinct from a pure black — the violet-leaning hue ties the canvas to the brand voltage chromatically.
- **Canvas** (`{colors.canvas}` — #ffffff): frequency 343 — 158 as text, 37 as background, 148 as border. The dominant body surface below the fold. Wired as `--color-background-platform`, `--color-background-container`, `--color-background-header`.
- **Ink Deep** (`{colors.ink-deep}` — #121213): frequency 9 as background. The darker testimonial-card surface — close to black but shifted slightly toward the violet hue.
- **Ink Soft** (`{colors.ink-soft}` — #2c2931): frequency 5 — small charcoal accents on dark-band card edges.

### Text

- **Ink** (`{colors.ink}` — #242424): frequency 1378 — 698 as text, 680 as border. The dominant text and divider tone. Wired as `--color-text-default`, `--color-elevation-core-high`, `--color-interactive-secondary-default`. Near-black, slightly desaturated.
- **Muted** (`{colors.muted}` — #666666): frequency 34 — 17 as text, 17 as border. Secondary text. Wired as `--color-text-label`, `--color-text-secondary`, `--color-text-placeholder`, `--color-text-muted`, `--color-text-disabled`. Single token doing multiple semantic jobs.

### Hairline

- **Hairline** (`{colors.hairline}` — #e2e2e2): frequency 9 — 9 as border. The dominant hairline tone. Wired as `--color-border-divider`, `--color-border-window-default`, `--color-border-container`. Light gray; the system uses no second hairline tier.

### Semantic

- **Positive** (`{colors.positive}` — #107a1b): declared as `--color-interactive-positive-default`, `--color-status-positive`, `--color-text-positive`. Absent from captured render (count 0); reserved for portfolio gains and confirmation states in the dashboard.
- **Warning** (`{colors.warning}` — #bb831b): declared as `--color-status-warning`, `--color-text-warning`. Absent from captured render. Reserved for status flags.
- **Status Info** (`{colors.status-info}` — #0065e3): declared as `--color-status-info`. Saturated cobalt, distinct from the brand violet — used for informational banner accents inside the authenticated product.
- **Highlight Tint** (`{colors.highlight-tint}` — #f3f0ff): wired as `--color-background-highlight`, `--color-status-info-branded-background`. Soft lavender — the only true tinted-surface moment, used on info-status badges.

### Shadow

- **Shadow** (`{colors.shadow}` — #000000): frequency 2 as elevation ink. The system uses RGB shadows derived from the ink tone, not from a tinted shadow — `--color-elevation-cast-high` resolves to `rgba(36,36,36,.161)`.

## Typography

### Font Family

The system runs **GraphikETRADE** — a licensed customization of Commercial Type's Graphik. Fallbacks walk `"Helvetica Neue", Helvetica, arial, sans-serif`. There is no serif voice and no monospace tier on the marketing surface; a Material Icons stack handles iconography at 14-20px alongside the sans, sized to match the surrounding body line-height.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 600 | 64px | -0.8px | Pricing strip numerals ("$0", "0.65", "4.00% APY") |
| `{typography.display-lg}` | 48px | 600 | 52px | -1px | Hero h1 ("Meet the IPO moment") |
| `{typography.display-md}` | 36px | 600 | 40px | -0.4px | Section h2 ("Get up to $1,500 for a limited time") |
| `{typography.heading-lg}` | 24px | 600 | 28px | -0.21px | Card titles inside dark testimonial bands |
| `{typography.heading-md}` | 22px | 500 | 28px | -0.21px | Sub-section emphasis text |
| `{typography.heading-sm}` | 20px | 600 | 24px | 0 | h3 / feature-cell titles |
| `{typography.body-md}` | 16px | 400 | 20px | -0.21px | Default running text |
| `{typography.body-sm}` | 13px | 400 | 18px | -0.21px | Caption rows, secondary text |
| `{typography.body-xs}` | 12px | 400 | 16px | -0.21px | Footnote disclaimer text |
| `{typography.button-md}` | 15px | 500 | 15px | 0 | Primary CTA label, secondary CTA label |
| `{typography.nav-link}` | 14px | 500 | 18px | -0.21px | Top-nav link labels |

### Principles

Display weight holds at 600 across every size from 36px up. The 64px pricing-strip numerals are the largest typographic moment in the system — heavier optical weight than the 48px hero h1, because the pricing strip is the page's commercial argument and the numerals do the persuasion. The -0.8 to -1px display tracking is calibrated to keep the weight-600 from looking like an under-leaded weight-500.

Body tracking at -0.21px is unusual. Most systems hold body at 0 tracking; the slight negative on every size from 12px through 22px is a deliberate broker-statement signature — it tightens the optical color and gives the editorial bands a slightly more compressed reading rhythm than a standard SaaS marketing body. The Campfire token `--campfire-font-family-inter` is declared as a fallback for legal pages, but the marketing surface never renders Inter.

### Note on Font Substitutes

GraphikETRADE is a licensed Commercial Type family. The closest open-source substitute is **Inter** at the same weights, though Graphik's slightly narrower x-height and tighter aperture make Inter feel marginally wider at 13-14px body. For the 64px display tier, **General Sans** is closer in proportion but not free. The -0.21px body tracking transfers cleanly to Inter at the same value.

## Layout

### Spacing System

- **Base unit:** 10px (the dominant module — 33 occurrences) plus an 8px secondary module.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 10px · `{spacing.md}` 15px · `{spacing.lg}` 16px · `{spacing.xl}` 20px · `{spacing.2xl}` 24px · `{spacing.3xl}` 30px · `{spacing.4xl}` 60px.
- **Section padding (vertical):** ~60px between major bands; the hero block sits with 60x24 padding.
- **Card internal padding:** `{spacing.2xl}` (24px) on the `{component.card-light}` and `{component.card-dark}` cards; 24x20 on the pricing-strip cells.
- **Top-nav padding:** `{spacing.base}` (10px) vertical, `{spacing.xl}` (20px) horizontal. Nav band sits at 56px height.

### Grid & Container

- **Max content width:** `--site-max-width` declares 1200px; hero band extends edge-to-edge with content centered at 1180px.
- **Hero block:** full-bleed indigo canvas with the photographic trader silhouette occupying the right two-thirds and the headline + CTA stack at the left third.
- **Pricing strip:** 4-column grid showing "$0 commission" / "$0.65 per options contract" / "$1.50 per futures contract" / "$1.00 per bond" stat-emphasis cells, each ~280px wide with 24px gutter.
- **Testimonial band:** 50/50 split between a phone-mockup product card on the left and a quote block on the right.

### Rhythm

The page alternates between **chromatic statement bands** (indigo hero, dark testimonial, dark limited-offer band) and **white editorial bands** (pricing strip, awards-and-recognition row, footnote band). The rhythm is hard-edged — every section either commits to a saturated indigo or returns to pure white. No gradient transitions, no atmospheric fades; the surface either is indigo, or is not. This is the broker-statement editorial cadence, closer to a Morgan Stanley print spread than to a fintech-startup landing page.

## Elevation

The system has a **minimal shadow tier** anchored on tinted ink rather than neutral black:

- **Flat (no shadow):** hero, body bands, pricing strip, awards row, footer — 95% of surfaces.
- **Card elevation:** `--color-elevation-core-high` resolves to `rgba(36,36,36,.161)`, `--color-elevation-cast-low` to `rgba(36,36,36,.078)`. The system uses RGB shadows derived from the ink tone (`{colors.ink}` — #242424) rather than from pure black. Dark cards on the testimonial band carry a faint 4-6px shadow at 16% alpha.
- **Hairlines** (`{colors.hairline}` — #e2e2e2) carry the work that shadows would carry in a more elevation-heavy system; the pricing-strip cells are divided by 1px hairlines rather than shadow halos.

## Shapes

The radius scale is **multi-tier with a tight CTA**:

- `{rounded.none}` 0px — top-nav and pricing-strip cells.
- `{rounded.xs}` 2px — frequency 8. The primary CTA (`{component.button-primary}`), secondary buttons, small chips. The tight CTA radius is the systemic exception — most fintech systems use 8-16px on primary buttons; here the 2px reads as broker-statement chrome.
- `{rounded.md}` 8px — frequency 4. Icon buttons, secondary inputs.
- `{rounded.lg}` 16px — frequency 20. The dominant card and editorial-tile radius.
- `{rounded.pill}` 30px — frequency 5. The pricing-emphasis pill ("Up to $1,500 for a limited time") and similar inline accents.
- `{rounded.full}` 9999px — frequency 1. The single status badge.

The contrast between 2px CTAs and 16px cards is the radius signature. Vanguard goes the opposite direction (32px panels, 80px pills); E*TRADE inverts to tight buttons inside generous cards.

## Components

**`button-primary`** — The signature CTA. Violet `{colors.primary}` fill, white text, `{rounded.xs}` 2px radius, 8x15 padding, 33px height. "Open an account" is the canonical instance, appearing in the top-nav and the hero block.

**`button-primary-hover`** — Background flips to `{colors.primary-hover}` (#7852e0). The hover variant.

**`button-primary-active`** — Background flips to `{colors.primary-active}` (#451fad). The pressed variant.

**`button-secondary`** — White `{colors.canvas}` fill with near-black text and a 1px `{colors.ink}` border. Same 2px radius and 33px height as primary; used for "Learn more" and tertiary actions.

**`button-on-dark`** — White `{colors.canvas}` fill with indigo `{colors.hero-canvas}` text. Used for inverse CTAs on the indigo bands.

**`top-nav`** — Indigo `{colors.hero-canvas}` surface, 56px height, 10x20 padding. Holds the E*TRADE wordmark flush left, primary product nav center, and "Open an account" CTA flush right. The indigo carries seamlessly into the hero band — no transition between nav and hero canvas.

**`nav-link`** — Transparent background, white text in `{typography.nav-link}` (14px / 500), 10x15 padding. The active nav-link tone.

**`nav-link-muted`** — Transparent background, soft violet `{colors.accent-muted}` (#ab80ff) text. The inactive nav-link tone — readable against the indigo canvas but visibly de-emphasized.

**`hero-section`** — Indigo `{colors.hero-canvas}` fill, white text, `{rounded.lg}` 16px radius, 60x24 padding. The full-bleed-but-inset hero block holding the trader-silhouette photograph and the CTA stack.

**`hero-heading`** — White text on the indigo hero, GraphikETRADE 48px / 600 with -1px tracking.

**`section-heading`** — `{colors.ink}` text on white, `{typography.display-md}` (36px / 600 with -0.4px tracking). Used for "Get up to $1,500 for a limited time."

**`body-paragraph`** — Default ink running text at `{typography.body-md}`. The workhorse paragraph style.

**`body-paragraph-muted`** — `{colors.muted}` variant for secondary copy and footnote text.

**`card-light`** — White `{colors.canvas}` surface, 1px `{colors.hairline}` border, `{rounded.lg}` 16px radius, 24px internal padding. The default content card on the white editorial bands.

**`card-dark`** — Deep ink `{colors.ink-deep}` (#121213) fill, white text, `{rounded.lg}` 16px radius, 24px padding. The testimonial-band card.

**`pricing-cell`** — White surface, large `{typography.display-lg}` (48px / 600) numerals, 24x20 padding. Divided from siblings by 1px hairline vertical rules. The "$0 / $0.65 / $1.50 / $1.00" pricing-strip cells.

**`info-badge`** — Soft lavender `{colors.highlight-tint}` (#f3f0ff) fill, violet `{colors.primary}` text, `{rounded.pill}` 30px radius, 4x10 padding, 24px height. The "Limited-time offer" and "New" status badges.

**`text-input`** — White surface, ink text, 1px muted-gray border, `{rounded.xs}` 2px radius, 10x15 padding, 40px height. Form input style.

## Do's and Don'ts

**Do** pair the electric violet `{colors.primary}` with the deep indigo `{colors.hero-canvas}` (#241056). The violet-indigo pairing is the system's chromatic signature; using the violet alone on a white canvas drops the Morgan Stanley-era luxury-fintech signal that the indigo carries.

**Do** keep the primary CTA at the tight 2px `{rounded.xs}` radius, even though every surrounding card sits at 16px. The contrast is the broker-statement signature — softening the CTA to 8px makes it read as a generic SaaS button and undercuts the "broker terminal" voice.

**Do** use `{typography.display-xl}` (64px / 600) for pricing-strip numerals — not the 48px hero tier. The pricing numerals are the page's commercial argument; rendering them smaller than the hero h1 weakens the persuasion structure.

**Do** keep body tracking at -0.21px across every body size. The slight negative is calibrated for GraphikETRADE's tighter aperture; resetting to 0 makes the editorial bands read as generic Inter chrome.

**Don't** introduce the categorical chart palette (`--color-categorical-*` tokens — 36 declared accents) onto the marketing chrome. These tokens belong to the dashboard trading product; using them on marketing surfaces would shatter the brand voltage discipline.

**Don't** swap the hero canvas from `{colors.hero-canvas}` (#241056) to a pure black or to a corporate navy. The slight violet hue ties the canvas to the brand voltage chromatically — pure black breaks that tie and the page loses its position in the broker chromatic neighborhood.

**Don't** render the primary CTA at the 16px or 30px radius. The 2px is intentional and structural; the only acceptable alternatives are increasing the height (to a 48-56px CTA) while holding the 2px radius, never softening the corner.

**Don't** use `{colors.muted}` (#666666) for primary running text — it's calibrated for labels, placeholders, and disabled states. Body running text should use `{colors.ink}` (#242424) at the full ink weight.

## Known Gaps

- **Hover and focus states beyond `{component.button-primary-hover}`:** the full state matrix (focus rings, active press, disabled tints) is declared in the token set but absent from the captured marketing render.
- **Form input error states:** `{component.text-input}` carries the resting state; error / validation styling lives in the authenticated dashboard and onboarding flows.
- **Dark mode:** the marketing surface alternates between indigo and white bands but does not expose a true dark-mode variant; a dark theme exists in the trading dashboard for after-hours views.
- **Motion:** the hero photograph carries a subtle parallax on scroll, the pricing strip count-ups on intersection — the spec captures end-state values only.
- **Categorical chart palette:** 36 declared `--color-categorical-*` tokens belong to the dashboard product. They're listed in the extraction but omitted from the spec because they do not render on the marketing surface; reproduce the dashboard separately if you need the chart family.
- **Authenticated surfaces:** this DESIGN.md captures the public marketing site only. The E*TRADE trading dashboard, the Morgan Stanley Wealth Management surface, and the Power E*TRADE platform carry richer token systems with table chrome, chart palettes, and inline alerts not represented here.
- **Sub-brand surfaces:** Morgan Stanley Online, Power E*TRADE, and Morgan Stanley Smith Barney each carry sub-brand chrome variations not exposed on this consumer marketing surface.