<!--
ROLE: You are a senior product designer + frontend engineer pair.
TASK: Treat the DESIGN.md below as the SINGLE SOURCE OF TRUTH for visual style.
Every component you produce in this codebase must:
  • Reuse the color tokens declared in YAML frontmatter (no ad-hoc hex values)
  • Use the typography scale (display / h1 / h2 / body / label / mono) verbatim
  • Match the radius scale (button / card / pill) to the named tier
  • Honor the elevation table for shadows
  • Respect the motion section (durations, easings, reduced-motion)
  • Pass the contrast pairs in the accessibility section
INPUT: Project files at ${CWD}.
OUTPUT: Code, not paragraphs. Quote the relevant section number when you cite a token (e.g. "per §3 Typography Rules").
PRINCIPLE: A token used once is a one-off; a token used three times is a system. Prefer system fidelity over local cleverness.
-->

---
name: Robinhood
tagline: Chartreuse `#CCFF00` lime on a black `#000` canvas, Martina Plantijn serif headlines paired with Capsule Sans Text — financial-editorial register, not tech-app sans.
updated_at: 2026-05-28T00:00:00.000Z
published_at: 2026-05-28T00:00:00.000Z
author: webdesignhot
source_url: https://robinhood.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [fintech]
tags: [dark, editorial, serif, sans, lime, chartreuse, investing, premium]
preview_swatch: ['#CCFF00', '#000000', '#110E08']
related: [cash-app, coinbase, wealthfront]
description: 'Robinhood''s site is built around two defining decisions that almost every other fintech gets wrong. First, the brand colour is not green and not blue — it is `#CCFF00`, an electric chartreuse lime that sits closer to Tesla cyber-yellow or Snipcart neon than to any conventional fintech green. Where Schwab and Fidelity use navy and Cash App uses an LED green, Robinhood uses a colour that doesn''t look like money at all: it looks like a tennis ball, a hi-vis vest, a club poster. Second, the marketing homepage is dark-by-default — body `#000000`, pure black, the kind of black a luxury watch site uses, not the near-black `#0E0E0E` that other fintechs pick when they "go dark". Onto that black canvas the brand prints Martina Plantijn — a contemporary serif — at 72px weight 400, giving the headline a literary, editorial-financial register that reads more like a Bloomberg longform piece than a tech app. The body sets in Capsule Sans Text (Robinhood''s custom geometric sans), 16px weight 400, calm and modern. Pages cycle between dark hero sections and light-content sections (warm near-black `rgb(17, 14, 8)` ink on cream-white) — the light bands carry editorial product writeups and pricing tables, the dark bands carry the brand voltage. CTAs are pill `36px` radius — "Go Gold" in white, "Sign up" in chartreuse `#CCFF00` lime. The two-typeface pairing (serif headline + sans body) is the central typographic move: it is the brand''s claim that investing is a serious, considered activity, not a tap-to-trade game.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent-gold
  muted: text-muted
  border: border
  ring: focus-ring
colors:
  bg: '#000000'                       # pure black — homepage default, not the near-black other fintechs pick
  bg-dark-elevated: '#0A0A0A'         # +1 step on black, used for elevated cards on dark
  bg-dark-card: '#141414'             # +2 step on black, ticker card / product card on dark
  bg-dark-pure: '#000000'              # alias for bg — used where intent is explicit OLED-pure
  bg-light: '#FAF7F0'                  # warm cream-white — light content sections (pricing, editorial body)
  bg-light-paper: '#FFFFFF'             # pure paper white — used sparingly for forms and modals on light pages
  bg-light-soft: '#F2EFE7'              # soft warm grey-cream surface band on light
  bg-light-card: '#FFFFFF'               # card surface on light pages
  text: '#FFFFFF'                       # primary white ink on the black canvas
  text-body-on-dark: '#E8E5DC'           # warm off-white body ink on black (slightly creamy, matches the warm-light pages)
  text-muted-on-dark: '#A09C8F'           # warm muted on black
  text-subtle-on-dark: '#6A6760'          # warm subtle on black
  text-on-light: '#110E08'                # warm near-black ink for light-content sections (NOT pure #000 — warmer)
  text-body-on-light: '#1F1A14'           # warm body ink on light
  text-muted-on-light: '#5C5648'          # warm muted on light
  text-subtle-on-light: '#8A8576'          # warm subtle on light
  brand: '#CCFF00'                         # Robinhood Chartreuse — the defining electric lime, NOT a saturated green
  brand-bright: '#DBFF40'                  # brighter chartreuse for hover/active
  brand-deep: '#A8D400'                    # deeper lime — pressed state and link-on-light variant
  brand-soft: 'rgba(204, 255, 0, 0.12)'    # chartreuse at 12% — informational tint
  brand-soft-strong: 'rgba(204, 255, 0, 0.22)' # 22% — selected chip background
  on-brand: '#110E08'                       # warm near-black ink on the chartreuse CTA (chartreuse is BRIGHT — needs dark text, not white)
  accent-gold: '#C9A14C'                    # Robinhood Gold tier accent (subscription product)
  accent-gold-bright: '#E6BD5C'              # bright gold for badge/hover
  accent-gold-deep: '#A07C2B'                 # deep gold for pressed state
  accent-red: '#FF5000'                       # the "Sell" / down-tick / loss colour — bright orange-red, not pure red
  accent-red-deep: '#D43A00'                   # pressed Sell state
  link-on-dark: '#CCFF00'                      # chartreuse link on black — full saturation works on dark
  link-on-light: '#A8D400'                     # deeper lime on light — saturated chartreuse fails contrast on cream
  link-hover-on-dark: '#DBFF40'                # brighter chartreuse on hover
  link-hover-on-light: '#7FA200'                # even deeper lime hover on light
  border-on-dark: 'rgba(255, 255, 255, 0.08)'  # default 1px hairline on black — very subtle, warm-neutral
  border-on-dark-strong: 'rgba(255, 255, 255, 0.18)' # input border, focused divider on black
  border-on-dark-soft: 'rgba(255, 255, 255, 0.04)' # softest divider on black
  border-on-light: '#D8D2C2'                    # warm 1px hairline on cream — pulled toward the warm canvas, not cool grey
  border-on-light-strong: '#B8B09C'              # input border on light
  border-on-light-soft: '#E5E0D2'                 # softest divider on light
  border-on-brand: 'rgba(17, 14, 8, 0.20)'       # warm-dark hairline on chartreuse CTA fills
  chart-up: '#CCFF00'                            # chartreuse up-tick — matches brand (the brand IS the up-tick)
  chart-down: '#FF5000'                           # red-orange down-tick — matches accent-red
  chart-neutral: '#6A6760'                        # warm muted for flat line and axis
  chart-gridline-on-dark: 'rgba(255,255,255,0.06)' # very subtle chart gridline on black
  semantic-success: '#CCFF00'                     # success matches brand — chartreuse IS success
  semantic-warning: '#FFB800'                     # caution amber
  semantic-danger: '#FF5000'                       # error matches Sell-red
  semantic-info: '#7AB8FF'                         # info-blue used sparingly for system messages only
  focus-ring-on-dark: 'rgba(204, 255, 0, 0.55)'    # 3px chartreuse focus ring on dark
  focus-ring-on-light: 'rgba(168, 212, 0, 0.55)'    # deeper lime focus ring on light (saturated lime is too thin on cream)
  focus-ring: 'rgba(204, 255, 0, 0.55)'             # default ring (dark-canvas case is the homepage default)
  shadow-glow: 'rgba(204, 255, 0, 0.40)'             # chartreuse-glow on featured CTAs (dark surfaces only)
  shadow-glow-gold: 'rgba(201, 161, 76, 0.40)'        # gold-glow on Gold tier upsell
  shadow-ambient-on-dark: 'rgba(0, 0, 0, 0.55)'      # deep ambient on the black canvas
  shadow-standard-on-dark: 'rgba(0, 0, 0, 0.70)'      # heavier elevation on dark
  shadow-ambient-on-light: 'rgba(31, 26, 20, 0.06)'    # warm soft ambient on cream (using warm-dark base, not pure black)
  shadow-soft-on-light: 'rgba(31, 26, 20, 0.09)'
  shadow-standard-on-light: 'rgba(31, 26, 20, 0.14)'
  shadow-elevated-on-light: 'rgba(31, 26, 20, 0.20)'

typography:
  display:
    family: '"Martina Plantijn", "GT Sectra", "Tiempos Headline", "Spectral", Georgia, "Times New Roman", serif'
    weights: [400, 500, 600, 700]
    opentype-features: ['kern', 'liga']
    note: 'Martina Plantijn is a contemporary serif by Rosetta Type / Production Type — the H1 personality signal. Headlines set at weight 400 (not bold) — the serif itself carries the gravity.'
  body:
    family: '"Capsule Sans Text", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600, 700]
    opentype-features: ['kern']
    note: 'Capsule Sans Text is Robinhood''s custom geometric sans (commissioned for the brand). 16px weight 400 is the canonical body setting.'
  mono:
    family: '"Capsule Sans Mono", "SF Mono", "JetBrains Mono", Menlo, monospace'
    weights: [400, 500, 700]
    opentype-features: ['tnum', 'zero']
    note: 'Every dollar figure, every price, every percent-delta sets in Capsule Sans Mono with tabular numerals and slashed zero. Non-negotiable in a financial product.'
  scale:
    display-hero:    { size: 96,  weight: 400, lineHeight: 1.02, tracking: '-2.5px', family: display, opentype: 'kern, liga' }
    display-xl:      { size: 80,  weight: 400, lineHeight: 1.04, tracking: '-2px',   family: display, opentype: 'kern, liga' }
    display-lg:      { size: 72,  weight: 400, lineHeight: 1.05, tracking: '-1.8px', family: display, opentype: 'kern, liga' }
    display-md:      { size: 56,  weight: 400, lineHeight: 1.08, tracking: '-1.2px', family: display, opentype: 'kern' }
    display-sm:      { size: 40,  weight: 400, lineHeight: 1.15, tracking: '-0.6px', family: display, opentype: 'kern' }
    h1:              { size: 72,  weight: 400, lineHeight: 1.05, tracking: '-1.8px', family: display, opentype: 'kern, liga' }
    h2:              { size: 48,  weight: 400, lineHeight: 1.12, tracking: '-0.8px', family: display, opentype: 'kern' }
    h3:              { size: 32,  weight: 400, lineHeight: 1.18, tracking: '-0.4px', family: display, opentype: 'kern' }
    h4:              { size: 24,  weight: 500, lineHeight: 1.30, tracking: '0',      family: body }
    h5:              { size: 20,  weight: 600, lineHeight: 1.35, tracking: '0',      family: body }
    body-lg:         { size: 18,  weight: 400, lineHeight: 1.55, tracking: '0',      family: body }
    body-md:         { size: 16,  weight: 400, lineHeight: 1.55, tracking: '0',      family: body }
    body-strong:     { size: 16,  weight: 600, lineHeight: 1.55, tracking: '0',      family: body }
    body-sm:         { size: 14,  weight: 400, lineHeight: 1.50, tracking: '0',      family: body }
    caption:         { size: 13,  weight: 400, lineHeight: 1.45, tracking: '0',      family: body }
    legal:           { size: 12,  weight: 400, lineHeight: 1.50, tracking: '0',      family: body }
    eyebrow:         { size: 12,  weight: 600, lineHeight: 1.20, tracking: '1.5px',  family: body }
    button:          { size: 15,  weight: 600, lineHeight: 1.20, tracking: '0',      family: body }
    button-lg:       { size: 17,  weight: 600, lineHeight: 1.20, tracking: '0',      family: body }
    nav-link:        { size: 14,  weight: 500, lineHeight: 1.40, tracking: '0',      family: body }
    pull-quote:      { size: 32,  weight: 400, lineHeight: 1.30, tracking: '-0.4px', family: display, opentype: 'kern' }
    ticker-mega:     { size: 96,  weight: 700, lineHeight: 1.00, tracking: '-2px',   family: mono, opentype: 'tnum, zero' }
    ticker-lg:       { size: 56,  weight: 700, lineHeight: 1.05, tracking: '-1px',   family: mono, opentype: 'tnum, zero' }
    ticker-md:       { size: 32,  weight: 600, lineHeight: 1.15, tracking: '-0.4px', family: mono, opentype: 'tnum, zero' }
    ticker-inline:   { size: 16,  weight: 500, lineHeight: 1.40, tracking: '0',      family: mono, opentype: 'tnum, zero' }
    delta-pct:       { size: 14,  weight: 600, lineHeight: 1.40, tracking: '0',      family: mono, opentype: 'tnum, zero' }
    code-micro:      { size: 12,  weight: 400, lineHeight: 1.40, tracking: '0',      family: mono }

radius:
  none: 0
  micro: 2
  xs: 4
  sm: 8
  md: 12
  lg: 16
  xl: 24
  cta: 36                              # Robinhood's signature CTA radius — 36px (between LG and pill, deliberately not full pill)
  xxl: 32
  pill: 9999

spacing:
  base: 4
  scale: { xxs: 4, xs: 8, sm: 12, base: 16, md: 20, lg: 24, xl: 32, xxl: 48, section: 96, hero: 128 }

layout:
  page-width: 1280
  prose-width: 680                     # narrower than peer brands — supports the editorial-serif reading register
  header-height: 72                    # one notch taller than peer fintechs — accommodates the serif logo lock-up

components:
  button-primary:         { bg: brand, text: on-brand, padding: '12px 24px', height: 48, radius: cta, font: button }
  button-primary-hero:    { bg: brand, text: on-brand, padding: '16px 36px', height: 56, radius: cta, font: button-lg }
  button-secondary-on-dark:  { bg: 'rgba(255,255,255,1)', text: on-brand, padding: '12px 24px', height: 48, radius: cta, font: button }
  button-secondary-on-light: { bg: text-on-light, text: bg-light, padding: '12px 24px', height: 48, radius: cta, font: button }
  button-tertiary:        { bg: transparent, text: brand, font: button }
  button-sell:            { bg: accent-red, text: 'on-brand', padding: '12px 24px', height: 48, radius: cta, font: button }
  button-gold:            { bg: accent-gold, text: on-brand, padding: '12px 24px', height: 48, radius: cta, font: button }
  hero-band-dark:         { bg: bg, text: text, padding: hero, font: display-hero }
  hero-band-light:        { bg: bg-light, text: text-on-light, padding: hero, font: display-hero }
  hero-band-soft:         { bg: bg-light-soft, text: text-on-light, padding: hero, font: display-hero }
  card-feature-dark:      { bg: bg-dark-card, radius: lg, padding: lg, border: '1px solid border-on-dark' }
  card-feature-light:     { bg: bg-light-card, radius: lg, padding: lg, border: '1px solid border-on-light-soft' }
  card-product:           { bg: bg-light-card, radius: xl, padding: lg, border: '1px solid border-on-light', shadow: 'shadow-standard-on-light' }
  card-ticker-dark:       { bg: bg-dark-card, radius: md, padding: '20px 24px', text: text }
  card-gold-upsell:       { bg: bg, text: text, radius: xl, padding: xl, border: '1px solid accent-gold' }
  badge-pill-brand:       { bg: brand-soft, text: brand, radius: pill, padding: '4px 10px' }
  badge-pill-gold:        { bg: accent-gold, text: on-brand, radius: pill, padding: '4px 10px' }
  badge-up:               { bg: brand-soft, text: brand, radius: sm, padding: '2px 6px', font: delta-pct }
  badge-down:             { bg: 'rgba(255,80,0,0.10)', text: accent-red, radius: sm, padding: '2px 6px', font: delta-pct }
  input-text-on-dark:     { bg: bg-dark-elevated, border: '1px solid border-on-dark-strong', radius: sm, padding: '12px 16px', height: 48, text: text }
  input-text-on-light:    { bg: bg-light-paper, border: '1px solid border-on-light-strong', radius: sm, padding: '12px 16px', height: 48, text: text-on-light }
  input-search:           { bg: bg-dark-elevated, border: 'none', radius: pill, padding: '12px 20px', height: 44 }
  top-nav-dark:           { bg: bg, text: text, height: 72, font: nav-link }
  top-nav-light:          { bg: bg-light, text: text-on-light, height: 72, font: nav-link, border-bottom: '1px solid border-on-light-soft' }
  footer-dark:            { bg: bg, text: text-muted-on-dark, padding: '64px 0', font: body-sm }
  chart-candle-up:        { fill: chart-up, stroke: chart-up }
  chart-candle-down:      { fill: chart-down, stroke: chart-down }

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)'
  ease-bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
  duration-fast: 120
  duration-standard: 220
  duration-slow: 320
  duration-chart: 600
  duration-pulse: 2400
  reduced-motion: 'respects prefers-reduced-motion: reduce — candlestick replay, ticker tape scroll, chartreuse-glow pulse, chart-line draw-in, and serif headline mask-reveals collapse to static final states'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  ambient-light: 'rgba(31, 26, 20, 0.06) 0 1px 2px'
  soft-light: 'rgba(31, 26, 20, 0.09) 0 4px 12px'
  standard-light: 'rgba(31, 26, 20, 0.14) 0 8px 24px'
  elevated-light: 'rgba(31, 26, 20, 0.20) 0 24px 48px -8px'
  ambient-dark: 'rgba(0, 0, 0, 0.55) 0 1px 2px'
  standard-dark: 'rgba(0, 0, 0, 0.70) 0 8px 24px'
  elevated-dark: 'rgba(0, 0, 0, 0.85) 0 24px 48px -8px'
  glow-chartreuse: 'rgba(204, 255, 0, 0.40) 0 0 32px'
  glow-gold: 'rgba(201, 161, 76, 0.40) 0 0 24px'
  ring: '0 0 0 3px rgba(204, 255, 0, 0.55)'

accessibility:
  contrast-text-on-bg-dark: 21.0           # white on pure black
  contrast-body-on-bg-dark: 17.6           # warm off-white body on black
  contrast-text-on-bg-light: 17.4          # warm near-black on cream
  contrast-body-on-bg-light: 14.2          # warm body on cream
  contrast-on-brand-dark-text: 16.2        # warm near-black on chartreuse — STRONG (chartreuse is bright)
  contrast-brand-on-bg-dark: 17.8          # chartreuse on black — extreme high contrast (this is why the brand pops)
  contrast-link-on-bg-light: 4.7           # deeper lime on cream (a8d400 on faf7f0)
  contrast-accent-red-on-bg-dark: 4.9      # FF5000 on black
  focus-ring: '3px solid rgba(204, 255, 0, 0.55) with 2px offset'
  reduced-motion-honored: true
  min-target: 44

dark-mode: default
---

## 1. Visual Theme & Atmosphere

Robinhood's marketing site lives on a **pure black canvas (`#000000`)** — not the near-black `#0E0E0E` that Cash App and most "dark mode" fintechs settle for, but absolute OLED-pure black, the kind a luxury watch site or a high-end music-press editorial site would use. Onto that black ground the brand prints two things that almost no other consumer-fintech does: **a contemporary serif** (Martina Plantijn) for the headline tier, and **a chartreuse lime** (`#CCFF00`) for the primary CTA. Together, these two decisions reposition Robinhood entirely. This is not a tech-app aesthetic. This is a financial-editorial aesthetic — closer in mood to a Bloomberg longform piece, a Monocle finance issue, or a luxury wealth-management brochure than to Cash App's poster-loud green or Schwab's institutional navy.

The chartreuse is **the defining brand decision** and the single move worth getting right. It is not green. It is not the saturated near-pure `#00C805` that Cash App and Coinbase work with. It is `#CCFF00` — a colour closer to tennis-ball yellow-green, to safety-vest hi-vis, to Tesla's cyber-yellow, to Snipcart's neon — a colour that doesn't look like *money* at all. That is the whole point. Every other broker reaches for "trust blue" or "growth green"; Robinhood reaches for a colour that signals **energy, motion, and disruption** without invoking the conventional finance palette at all. The "Sign up" CTA renders in this chartreuse against pure black, and the contrast (~17.8:1) is so extreme that the button reads almost like it's *emitting light* rather than reflecting it.

The type pairing is the second defining move. **Martina Plantijn** — a contemporary serif designed by Pieter van Rosmalen for Production Type / Rosetta — sets the H1 at **72px / weight 400 / colour `rgb(17, 14, 8)`** on light-content sections and **`#FFFFFF`** on the dark canvas. The serif at light weight is the deliberate signal: investing is a considered, written, serious activity. Beneath the headline, the body sets in **Capsule Sans Text** at 16px / weight 400 — Robinhood's custom geometric sans, calm and modern, the workhorse. The serif-headline + sans-body pairing belongs to editorial publishing (The New Yorker, FT Weekend, The Atlantic) — and it is what gives Robinhood the slightly literary register that distinguishes it from Cash App, Coinbase, and every other "consumer-fintech-app" peer.

The site does not stay dark all the way down. Pages **alternate** between the black canvas and **light-content sections** — typically a **warm cream-white `#FAF7F0`** with warm near-black `rgb(17, 14, 8)` ink. Light sections carry pricing tables, editorial product writeups, "How investing works" explainers, and the SEC/FINRA disclosure mass at the footer-prelude. Dark sections carry the hero, the candlestick-chart moments, the brand-voltage CTA placements, and the product-screenshot bands. The warm cream is critical: it is not paper-white `#FFFFFF`, and it is not cool grey. The slight warm cast on both canvases (warm cream light, slightly-warm black ink) is what holds the editorial register — pure-white pages would feel like a SaaS dashboard, not a financial publication.

Buttons are **pill `36px` radius** — a deliberate choice that is *neither* the 9999 full-pill of Cash App nor the 8–12px tightness of B2B SaaS. 36px radius reads as "soft pill but not extreme", giving the chartreuse CTA a confident, slightly-tailored geometry. Two button variants dominate the top-of-page: **"Go Gold"** in white-on-black (subscription pitch) and **"Sign up"** in chartreuse `#CCFF00` on black (acquisition CTA). The chartreuse CTA carries warm-near-black `#110E08` text — pure black on chartreuse would feel cold; the warmer near-black holds the editorial register through every component.

Iconography is hairline-weight, geometric, monochrome. On dark, icons are white or chartreuse for active states; on light, near-black `#110E08`. The signature decorative motif is still the **candlestick chart** — green-up-red-down — but in Robinhood's chart, "green up" renders in the brand chartreuse `#CCFF00`, which is what makes the brand candlestick look immediately distinct from every other broker's chart. The chart isn't a chrome flourish; it is the brand's most-shown product imagery.

**Key Characteristics:**
- Pure black `#000000` body — not near-black; absolute OLED-ready ground
- Chartreuse lime `#CCFF00` as the primary brand voltage — distinctly NOT a fintech green or blue
- Martina Plantijn serif for H1/H2 — financial-editorial register, weight 400 at 72px
- Capsule Sans Text for body — calm modern geometric sans, 16px weight 400
- Capsule Sans Mono for every ticker, price, and percent-delta with `tnum + zero`
- Warm cream `#FAF7F0` light-content sections with warm near-black `rgb(17, 14, 8)` ink — not paper-white, not cool grey
- Pill `36px` CTA radius — neither full pill nor tight rectangle
- "Sign up" chartreuse, "Go Gold" white — the two canonical top-of-page CTAs
- Warm near-black `#110E08` text on chartreuse (not pure white, not pure black)
- Chartreuse-on-black ~17.8:1 contrast — the button looks emissive
- Candlestick chart as hero motif — but "up" candles render chartreuse, not the conventional saturated green

## 2. Color Palette & Roles

### Primary
- **Canvas** (`#000000`): Pure black — the homepage default, the candlestick-hero ground, the OLED-true background
- **Canvas Light** (`#FAF7F0`): Warm cream — light-content sections (pricing, editorial body, FAQ)
- **Ink on Dark** (`#FFFFFF`): Primary white for serif headlines on black
- **Ink on Light** (`#110E08`): Warm near-black for serif headlines on cream — note: NOT pure black, the warm cast matches the warm canvas
- **Brand** (`#CCFF00`, Robinhood Chartreuse): The single brand voltage — every primary CTA, every "Buy" verb, every chartreuse up-tick

### Brand
- **Robinhood Chartreuse** (`#CCFF00`): Canonical brand colour. Primary CTA fill, link on dark, up-tick chart fill
- **Brand Bright** (`#DBFF40`): Brighter chartreuse for CTA hover and glow moments
- **Brand Deep** (`#A8D400`): Deeper lime — pressed/active state, and link colour on light surfaces where saturated chartreuse fails AA at body size
- **Brand Soft** (`rgba(204, 255, 0, 0.12)`): Chartreuse at 12% — informational badge background, up-pill background
- **Brand Soft Strong** (`rgba(204, 255, 0, 0.22)`): 22% — selected chip, focused row

### Accent
Robinhood uses a **constrained** accent system — three accents, each owning one semantic:

- **Robinhood Gold** (`#C9A14C`) — exclusively for the Gold subscription tier. Never used as a general accent.
- **Gold Bright** (`#E6BD5C`) — Gold hover/badge brighter state
- **Gold Deep** (`#A07C2B`) — pressed Gold state
- **Sell Red** (`#FF5000`) — the "Sell" CTA, the down-tick chart fill, the error state. Bright orange-red, deliberately warmer than pure web-red — chosen to read as "energetic" rather than "alarming".
- **Sell Red Deep** (`#D43A00`) — pressed Sell state

### Interactive
- **Link on Dark** = Brand `#CCFF00` — full chartreuse on black has ~17.8:1 contrast, more than enough for any size
- **Link on Light** = Brand Deep `#A8D400` — saturated chartreuse on cream is ~2.1:1 (fails everything); the deeper lime is ~4.7:1 (AA at body)
- **Link Hover (dark)** — `#DBFF40` (brighter), underline appears
- **Link Hover (light)** — `#7FA200` (deeper still)
- **CTA Hover** — bg shifts `#CCFF00` → `#DBFF40` over 120ms
- **CTA Active** — bg `#A8D400`, scale 0.98
- **Disabled (dark)** — bg `#1A1A1A`, text `#6A6760`
- **Disabled (light)** — bg `#E5E0D2`, text `#8A8576`
- **Selected** — `brand-soft-strong` bg with `#A8D400` text

### Neutral Scale (Dark)
The black-canvas scale is **warm-neutral on dark**:

`#000000` (Canvas) → `#0A0A0A` (Elevated) → `#141414` (Card) → `#6A6760` (Subtle warm) → `#A09C8F` (Muted warm) → `#E8E5DC` (Body warm off-white) → `#FFFFFF` (Ink).

The warmth is subtle — `#E8E5DC` body is creamy-white rather than the cool `#E8E8E8` Cash App uses — and the warm cast pairs intentionally with the warm cream of the light pages.

### Neutral Scale (Light, warm cream)
`#FAF7F0` (Canvas) → `#FFFFFF` (Paper card) → `#F2EFE7` (Soft band) → `#E5E0D2` (Border soft) → `#D8D2C2` (Border) → `#B8B09C` (Border strong) → `#8A8576` (Text subtle) → `#5C5648` (Text muted) → `#1F1A14` (Body) → `#110E08` (Ink).

Every neutral is **warm-shifted** (more yellow / less blue) than a typical cool-grey scale — this is what holds the editorial mood across both canvases.

### Surface & Borders
- **Dark Elevated** (`#0A0A0A`): +1 step on black — barely-perceptible surface lift
- **Dark Card** (`#141414`): +2 step on black — feature cards, ticker cards
- **Light Card** (`#FFFFFF`): Paper card on cream
- **Light Soft Band** (`#F2EFE7`): Section-divider band, search-input fill
- **Border Dark** (`rgba(255, 255, 255, 0.08)`): Default 1px hairline on black — deliberately subtle
- **Border Dark Strong** (`rgba(255, 255, 255, 0.18)`): Input border on black
- **Border Light** (`#D8D2C2`): Warm 1px hairline on cream
- **Border Light Strong** (`#B8B09C`): Input border on cream

### Chart Colors
The chart palette doubles as semantic colour:
- **Chart Up** = Robinhood Chartreuse `#CCFF00` — bullish candle, gain percent
- **Chart Down** = Sell Red `#FF5000` — bearish candle, loss percent
- **Chart Neutral** = `#6A6760` — flat line, axis labels, gridlines (warm grey)
- **Chart Gridline on Dark** = `rgba(255, 255, 255, 0.06)` — barely-there gridline

### Shadow Colors
Light-surface shadows use a **warm-dark base** (`rgba(31, 26, 20, 0.06–0.20)`) rather than pure-black opacity — the warm cast carries from canvas through depth. Dark-surface shadows run heavier (`rgba(0, 0, 0, 0.55–0.85)`) because shadow needs more density on a true-black ground. The **chartreuse-glow** (`rgba(204, 255, 0, 0.40) 0 0 32px`) is reserved for featured CTAs on dark surfaces. The **gold-glow** is rarer — exclusive to Gold tier upsell.

### Semantic
- **Success** (`#CCFF00`): Success matches brand — chartreuse IS success
- **Warning** (`#FFB800`): Caution amber
- **Danger** (`#FF5000`): Error matches Sell-red — "loss" and "error" share a colour
- **Info** (`#7AB8FF`): Cool info-blue, used only for system messages — never as a brand accent

## 3. Typography Rules

### Font Family

**Display: Martina Plantijn** — a contemporary serif designed by Pieter van Rosmalen for Production Type (Rosetta Type). It is Robinhood's H1 personality signal. The family carries a slight bookish-but-modern register: bracketed serifs, balanced contrast, generous x-height. It is unmistakably a serif (no transitional sans-serif fakery) — and using it at headline weight 400 (not bold) is the editorial cue that separates Robinhood from every "tech-app" peer. Weights deployed: 400 (headline default), 500, 600, 700.

**Body: Capsule Sans Text** — Robinhood's custom geometric sans (commissioned for the brand). Reads humanist, modern, mobile-friendly. Designed to step back so the serif headline and the chartreuse CTA both step forward. Weights: 400, 500, 600, 700.

**Mono: Capsule Sans Mono** — full-monospace companion. Used for **every ticker, every price, every percent-delta, every dollar figure**. OpenType `tnum` and `zero` (slashed zero) explicitly enabled — slashed zero matters more in finance than anywhere else (zero / O confusion on a stock ticker is catastrophic). Weights: 400, 500, 700.

**Fallback chains**:
- Display serif: `"Martina Plantijn", "GT Sectra", "Tiempos Headline", "Spectral", Georgia, "Times New Roman", serif`
- Body sans: `"Capsule Sans Text", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif`
- Mono: `"Capsule Sans Mono", "SF Mono", "JetBrains Mono", Menlo, monospace`

**OpenType features**: `kern` always on across all cuts; `liga` on the serif display tier. `tnum + zero` non-negotiable on every numeric figure.

### Hierarchy

| Role           | Font                | Size | Weight | Line Height | Letter Spacing | OT Features | Notes                                              |
|----------------|---------------------|------|--------|-------------|----------------|-------------|----------------------------------------------------|
| display-hero   | Martina Plantijn    | 96   | 400    | 1.02        | -2.5px         | kern, liga  | Largest hero headline                              |
| display-xl     | Martina Plantijn    | 80   | 400    | 1.04        | -2px           | kern, liga  | Mid-large hero                                     |
| display-lg     | Martina Plantijn    | 72   | 400    | 1.05        | -1.8px         | kern, liga  | Standard hero — canonical site H1 (72px / 400)     |
| display-md     | Martina Plantijn    | 56   | 400    | 1.08        | -1.2px         | kern        | Section opener                                     |
| display-sm     | Martina Plantijn    | 40   | 400    | 1.15        | -0.6px         | kern        | Subsection opener                                  |
| h1             | Martina Plantijn    | 72   | 400    | 1.05        | -1.8px         | kern, liga  | Page title — the canonical Robinhood H1            |
| h2             | Martina Plantijn    | 48   | 400    | 1.12        | -0.8px         | kern        | Section title                                      |
| h3             | Martina Plantijn    | 32   | 400    | 1.18        | -0.4px         | kern        | Subsection — note: still serif at 32px             |
| h4             | Capsule Sans Text   | 24   | 500    | 1.30        | 0              | —           | Card title — sans takes over below h3              |
| h5             | Capsule Sans Text   | 20   | 600    | 1.35        | 0              | —           | Card body title                                    |
| body-lg        | Capsule Sans Text   | 18   | 400    | 1.55        | 0              | —           | Lead paragraph                                     |
| body-md        | Capsule Sans Text   | 16   | 400    | 1.55        | 0              | —           | Default body — the canonical site setting          |
| body-strong    | Capsule Sans Text   | 16   | 600    | 1.55        | 0              | —           | Inline emphasis                                    |
| body-sm        | Capsule Sans Text   | 14   | 400    | 1.50        | 0              | —           | Secondary body                                     |
| caption        | Capsule Sans Text   | 13   | 400    | 1.45        | 0              | —           | Metadata                                           |
| legal          | Capsule Sans Text   | 12   | 400    | 1.50        | 0              | —           | Footer SEC/FINRA disclosure                        |
| eyebrow        | Capsule Sans Text   | 12   | 600    | 1.20        | 1.5px (UPPER)  | —           | Section eyebrow — UPPERCASE                        |
| button         | Capsule Sans Text   | 15   | 600    | 1.20        | 0              | —           | Standard CTA labels — note: 15px, not 16          |
| button-lg      | Capsule Sans Text   | 17   | 600    | 1.20        | 0              | —           | Hero CTA labels                                    |
| nav-link       | Capsule Sans Text   | 14   | 500    | 1.40        | 0              | —           | Top navigation                                     |
| pull-quote     | Martina Plantijn    | 32   | 400    | 1.30        | -0.4px         | kern        | Editorial pull-quote on long-form pages            |
| ticker-mega    | Capsule Sans Mono   | 96   | 700    | 1.00        | -2px           | tnum, zero  | Hero portfolio value                               |
| ticker-lg      | Capsule Sans Mono   | 56   | 700    | 1.05        | -1px           | tnum, zero  | Watchlist row price                                |
| ticker-md      | Capsule Sans Mono   | 32   | 600    | 1.15        | -0.4px         | tnum, zero  | Mid-size ticker                                    |
| ticker-inline  | Capsule Sans Mono   | 16   | 500    | 1.40        | 0              | tnum, zero  | Inline price in body                               |
| delta-pct      | Capsule Sans Mono   | 14   | 600    | 1.40        | 0              | tnum, zero  | "+1.24%" / "-0.83%" delta pill                     |
| code-micro     | Capsule Sans Mono   | 12   | 400    | 1.40        | 0              | tnum        | Reference IDs                                      |

### Principles

- **Serif headline + sans body is the central typographic move**: Martina Plantijn at the H1/H2/H3 tier, Capsule Sans Text everywhere below. The pairing belongs to editorial publishing and is what gives Robinhood its financial-editorial register. Most fintechs use sans-only — this is the brand's typographic signature.
- **Display weight is 400, not 700**: Counter to almost every other consumer brand. The serif at light weight is what carries the gravity — the form itself is heavy enough, no bold needed. Going to weight 700 on Martina Plantijn would tip the mood from "editorial" to "magazine-tabloid".
- **72px is the canonical site H1**: Not 96, not 56. The on-site headline is consistently sized at 72px weight 400, with -1.8px tracking. This is the verified live measurement from robinhood.com.
- **Warm near-black ink, never pure**: H1 colour on light is `rgb(17, 14, 8)` — warm near-black, NOT `#000000`, NOT `#0E0E0E`. The 8-point red tilt is the warmth that holds the editorial register.
- **Mono for every number that represents money or change**: Tickers, prices, percent-deltas, portfolio values. The slashed zero is non-negotiable in a financial product where "$0" and "$O" confusion is catastrophic.
- **Tabular numerals on every numeric figure**: `tnum` enabled across all numeric mono uses so columns of prices align perfectly.
- **Negative tracking on display only**: -0.4px to -2.5px on display sizes. Body and below stay at 0.
- **Eyebrow in body sans, uppercase + 1.5px tracking**: The brand's typographic identity is the *serif headline + mono numbers*, not the eyebrow. Eyebrow stays sans, modest, restrained.
- **No italics in the brand voice**: Use weight 600 (`body-strong`) for emphasis. Italic Martina Plantijn exists but isn't part of the standard tier.

## 4. Component Stylings

### Buttons

The two canonical top-of-page buttons are **"Go Gold"** (white-on-black, subscription pitch) and **"Sign up"** (chartreuse `#CCFF00`, acquisition CTA). Both are **pill `36px` radius** — Robinhood's signature button geometry.

**Primary CTA — "Sign up", "Get Started", "Invest"**
- Background: `#CCFF00` (Robinhood Chartreuse)
- Text: `#110E08` (warm near-black), weight 600, 15px
- Padding: 12px / 24px
- Height: 48px
- Radius: 36px (NOT full pill; NOT square — the signature 36px)
- Hover: bg `#DBFF40` (brighter chartreuse) over 120ms
- Active: bg `#A8D400`, scale 0.98
- On dark surfaces, optional `glow-chartreuse` halo (`rgba(204,255,0,0.40) 0 0 32px`) for one featured CTA per viewport
- Use case: every primary acquisition action

**Primary CTA Hero (larger)**
- Same as primary but 16px / 36px padding, 56px height, 17px label
- Always carries the chartreuse-glow on featured placements

**Go Gold — the white-on-black variant**
- Background: `#FFFFFF`
- Text: `#110E08`, weight 600, 15px
- Padding: 12px / 24px
- Height: 48px
- Radius: 36px
- Hover: bg shifts to `#F2EFE7` (warm soft cream)
- Use case: subscription pitch in top-of-page nav and product surfaces

**Secondary — "Learn More"**
- Background: transparent (both canvases)
- Text: `#FFFFFF` on dark, `#110E08` on light, weight 600
- Border: 1px solid `rgba(255,255,255,0.30)` on dark, 1px solid `#B8B09C` on light
- Padding: 12px / 24px
- Height: 48px
- Radius: 36px
- Hover: bg `rgba(255,255,255,0.06)` on dark / `rgba(17,14,8,0.06)` on light

**Tertiary Text — "View All"**
- Background: transparent
- Text: `#CCFF00` on dark, `#A8D400` on light, weight 600
- Underline appears on hover

**Sell CTA — the orange-red counterpart**
- Background: `#FF5000` (Sell Red)
- Text: `#110E08` (warm near-black — the warm cast holds across the palette), weight 600, 15px
- Same 36px-radius pill geometry
- Hover: bg deepens to `#D43A00`
- Use case: "Sell" action in product, never on marketing pages

**Gold Button — Gold tier action**
- Background: `#C9A14C`
- Text: `#110E08`, weight 600, 15px
- 36px radius
- Hover: bg `#E6BD5C` with optional gold-glow halo

### Cards

**Feature Card (Dark)**
- Background: `#141414`
- Border: 1px solid `rgba(255,255,255,0.08)` — very subtle hairline
- Radius: 16px
- Padding: 24px
- Hover: bg lifts to `#1A1A1A`, border opacity 0.12
- Use case: feature grid on dark hero bands

**Feature Card (Light)**
- Background: `#FFFFFF` (paper card on cream canvas)
- Border: 1px solid `#E5E0D2`
- Radius: 16px
- Padding: 24px
- Hover: warm-shadow `rgba(31,26,20,0.09) 0 4px 12px`
- Use case: feature grid on cream-cream light bands

**Product Card**
- Background: `#FFFFFF`
- Border: 1px solid `#D8D2C2`
- Radius: 24px
- Padding: 24px
- Shadow: warm `rgba(31,26,20,0.14) 0 8px 24px`
- Use case: pricing card, plan-comparison

**Ticker Card** (watchlist row, portfolio item)
- Background: `#141414` (dark only — ticker cards never live on cream)
- Radius: 12px
- Padding: 20px / 24px
- Layout: ticker symbol left (24px Capsule Sans Text weight 500), company name caption below, price right in `ticker-md` (32px Capsule Sans Mono), delta-pct pill below price (chartreuse if up, red if down)
- Use case: the most-shown product surface

**Gold Upsell Card** (Robinhood Gold tier)
- Background: `#000000`
- Border: 1px solid `#C9A14C` (gold hairline)
- Radius: 24px
- Padding: 32px
- Inside: a Gold badge (pill, gold fill, near-black ink), a Martina Plantijn 32px headline in white, body in `#E8E5DC`, and a Gold CTA at the bottom
- Optional gold-glow on the badge
- Use case: subscription upsell only — never any other product

### Badges, Tags, Pills

**Up Pill** (percent-gain delta)
- Background: `rgba(204, 255, 0, 0.12)` (brand-soft)
- Text: `#CCFF00` on dark / `#A8D400` on light, weight 600, 14px Capsule Sans Mono with `tnum + zero`
- Padding: 2px / 6px
- Radius: 4px (small chips benefit from sharper geometry — the pill is reserved for CTAs)
- Content: `↑ 1.24%` — up-arrow glyph + tabular percent

**Down Pill** (percent-loss delta)
- Background: `rgba(255, 80, 0, 0.10)`
- Text: `#FF5000`, weight 600, 14px mono with `tnum + zero`
- Same geometry as Up pill
- Content: `↓ 0.83%`

**Brand Badge** ("New", "Live")
- Background: `rgba(204, 255, 0, 0.12)`
- Text: `#CCFF00` (dark) / `#A8D400` (light), weight 600, 12px
- Padding: 4px / 10px
- Radius: pill (these small badges go full-pill, unlike CTAs)

**Gold Badge** (Robinhood Gold marker)
- Background: `#C9A14C`
- Text: `#110E08` (warm near-black on gold)
- Padding: 4px / 10px
- Radius: pill
- Use case: Gold-tier features in lists, the "Gold" pill in nav

### Inputs / Forms

**Text Input (Dark)**
- Background: `#0A0A0A`
- Border: 1px solid `rgba(255,255,255,0.18)`
- Radius: 8px
- Height: 48px
- Padding: 12px / 16px
- Focus: border `#CCFF00` 2px, ring `rgba(204,255,0,0.55)` 3px

**Text Input (Light)**
- Background: `#FFFFFF`
- Border: 1px solid `#B8B09C`
- Radius: 8px
- Height: 48px
- Padding: 12px / 16px
- Focus: border `#A8D400` 2px (the deeper lime), ring `rgba(168,212,0,0.55)` 3px

**Search Input**
- Background: `#0A0A0A` (dark) / `#F2EFE7` (light)
- Border: none
- Radius: pill
- Height: 44px
- Padding: 12px / 20px

**Amount Input** (order entry)
- Background: transparent
- Border: none
- Padding: 0
- Font: 56px Capsule Sans Mono weight 700 with `tnum + zero`, colour `#FFFFFF` on dark / `#110E08` on light
- Right-aligned, with `$` prefix in matching colour
- Live-validation hint below in 13px caption: chartreuse if valid, red if exceeds buying power

### Navigation

**Top Nav (Dark — the homepage default)**
- Height: 72px (one notch taller than peer fintechs)
- Background: `#000000`
- No bottom border
- Logo left (Robinhood feather in `#FFFFFF`), nav links centre at 14px weight 500 white
- Two CTAs right: "Log in" (link-style, white) → "Go Gold" (white pill, near-black text) → "Sign up" (chartreuse pill, near-black text)
- Sticky-on-scroll with slight bg-opacity (`rgba(0,0,0,0.85)` + backdrop-blur 12px)

**Top Nav (Light — on cream content sub-pages)**
- Height: 72px
- Background: `#FAF7F0`
- Border-bottom: 1px solid `#E5E0D2`
- Logo and links in `#110E08`, weight 500
- Same CTA cluster: "Log in" (link) → "Go Gold" (near-black pill, cream text) → "Sign up" (chartreuse pill, near-black text)

**Footer**
- Background: `#000000` (always dark, regardless of page canvas — the brand closes in product-mode)
- Text: `#A09C8F` for links, `#FFFFFF` for category headers
- Padding: 64px vertical
- Heavy SEC/FINRA/SIPC disclosure block at the bottom in 12px legal type, line-height 1.6 — disclosure is voluminous and unavoidable; the brand renders it without apology

### Tabs

**Pill Tabs**
- Container: `#0A0A0A` (dark) / `#F2EFE7` (light), pill radius
- Active: bg `#FFFFFF` (dark) or `#FFFFFF` (light) with subtle shadow, text `#110E08`, weight 600
- Inactive: transparent bg, `#A09C8F` (dark) / `#5C5648` (light) text

**Underline Tabs** (product surfaces)
- Active: 2px bottom border `#CCFF00`, text full-contrast weight 600
- Inactive: no border, muted text

### Tooltips

- Background: `#0A0A0A` (dark) / `#110E08` (light — inverted, dark tooltip on cream)
- Text: `#FFFFFF`, weight 500, 13px
- Padding: 8px / 12px
- Radius: 6px
- Arrow: 6px

### Toasts

- Success: bg `#141414` (dark) / `#FFFFFF` (light), left-border 4px `#CCFF00` (dark) / `#A8D400` (light)
- Error: bg `#141414` / `#FFFFFF`, left-border 4px `#FF5000`
- Info: bg `#141414` / `#FFFFFF`, left-border 4px `#7AB8FF`

### Modals

- Overlay: `rgba(0, 0, 0, 0.85)` over both canvases — heavy black overlay
- Dialog: bg `#141414` (dark) / `#FFFFFF` (light), radius 24px, max-width 480px, padding 32px
- Headline: Martina Plantijn 32px weight 400 (yes — even modals use the serif at the headline tier)
- Close glyph `#A09C8F` (dark) / `#5C5648` (light) top-right

### Decorative

**Candlestick Chart**
- Up-candle: solid fill `#CCFF00` (chartreuse — the brand IS the up-tick), stroke `#CCFF00`
- Down-candle: solid fill `#FF5000`, stroke `#FF5000`
- Wick: same colour as candle body
- Gridlines: `rgba(255,255,255,0.06)` on dark
- Hero pages animate the chart drawing in over 600ms ease-emphasized
- The chartreuse up-candle is the brand's most-distinctive product image — no other broker renders charts in this colour

**Line Chart** (portfolio over time)
- Stroke: 2px `#CCFF00` if up over the period, 2px `#FF5000` if down
- Fill below line: gradient from stroke colour at 30% opacity → 0% over 80px height
- Hover: vertical reference line `#A09C8F` 1px

**Feather Glyph** (Robinhood logomark)
- The stylized feather silhouette of Robin Hood's hat-feather
- Rendered `#FFFFFF` on dark / `#110E08` on light — never the chartreuse (the chartreuse belongs to CTAs and chart up-ticks, not the wordmark)

## 5. Layout Principles

### Spacing System
Base 4px. Scale: 4, 8, 12, 16, 20, 24, 32, 48, 96, 128. Section spacer 96px; hero 128px. Generous — the chartreuse CTA needs negative space to detonate, and the serif headline at 72px / weight 400 needs vertical room to read as editorial rather than crowded.

### Grid & Container
- Page max-width 1280px
- Prose width **680px** (narrower than peer brands — supports editorial-serif reading register)
- 12-col grid with 24px gutters
- Hero treatment: full-bleed background (black or cream), content max 1280px centred
- Mobile-first: 375px is the canonical design width

### Whitespace Philosophy
Robinhood balances **calm marketing whitespace** with **dense product surfaces**. The black-canvas hero is air around a single serif headline and a single chartreuse CTA — sometimes 40% of the viewport is empty black. The light-content sections breathe similarly. Product bands (watchlist mockup, candlestick chart) pack data tighter but always live inside generous outer padding (96px top/bottom). The visual logic: editorial publications use whitespace as a confidence signal; Robinhood inherits that.

### Section Cadence
The page rhythm is **chromatic punctuation**: black hero → cream content → black product band → cream pricing → black testimonial/feather → cream pre-footer → black footer. The alternation is deliberate. Dark sections always carry product imagery (chart, ticker, portfolio mockup) so the colour shift signals "this is the product, not the pitch". Cream sections carry editorial body — feature explainers, "How investing works", pricing tables.

## 6. Shapes & Radius Scale

| Tier        | Value | Use                                                |
|-------------|-------|----------------------------------------------------|
| None        | 0     | Full-bleed bands, ticker-tape edges                |
| Micro       | 2     | Status dots                                        |
| XS          | 4     | Up/Down delta pills, small chips                   |
| SM          | 8     | Inputs, dropdowns                                  |
| MD          | 12    | Ticker cards, mid-size cards                       |
| LG          | 16    | Feature cards                                      |
| XL          | 24    | Product cards, modals, Gold upsell cards           |
| CTA         | 36    | **Robinhood's signature button radius — every CTA** |
| XXL         | 32    | Phone-frame mockups                                |
| Pill        | 9999  | Brand badges, search inputs, small chips           |

**Robinhood's signature button radius is `36px`** — neither full pill nor square. It is a deliberate middle: enough roundness to feel approachable, enough straightness to feel tailored. This is the verified live measurement from robinhood.com.

## 7. Depth & Elevation

| Level | Treatment (Dark)                                | Treatment (Light)                                      | Use                                   |
|-------|------------------------------------------------|--------------------------------------------------------|---------------------------------------|
| 0     | Flat canvas `#000000`                           | Flat canvas `#FAF7F0`                                  | Hero text, body                       |
| 1     | Surface lift `#0A0A0A`, no shadow               | Card surface `#FFFFFF`, no shadow                      | Default card                          |
| 2     | Ambient `rgba(0,0,0,0.55) 0 1px 2px`            | Warm ambient `rgba(31,26,20,0.06) 0 1px 2px`           | Sticky nav post-scroll                |
| 3     | Soft `rgba(0,0,0,0.70) 0 8px 24px`              | Warm soft `rgba(31,26,20,0.09) 0 4px 12px`             | Card hover                            |
| 4     | Standard `rgba(0,0,0,0.85) 0 24px 48px -8px`   | Warm standard `rgba(31,26,20,0.14) 0 8px 24px`         | Dropdown, mega-menu                   |
| 5     | Heavy ambient on dialog                         | Warm elevated `rgba(31,26,20,0.20) 0 24px 48px -8px`   | Modal dialog                          |
| Glow  | Chartreuse `rgba(204,255,0,0.40) 0 0 32px`     | (not used on light)                                    | Featured CTAs on dark surfaces        |
| Gold  | `rgba(201,161,76,0.40) 0 0 24px`               | (not used on light)                                    | Robinhood Gold upsell badge           |

### Shadow Philosophy

Light-surface shadows use a **warm-dark base** rather than pure black opacity — `rgba(31, 26, 20, alpha)` keeps the warm cast consistent from canvas through depth. A cool-grey shadow on warm cream would feel mismatched. Dark-surface shadows run heavier (0.55–0.85 alpha) because shadow on true `#000000` needs density to read at all. The **chartreuse-glow** is a deliberate exception that only appears on featured CTAs on dark surfaces, one per viewport. The **gold-glow** is even rarer — exclusive to Gold tier upsell.

## 8. Interaction & Motion

### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)`
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — chart draw-in, hero entrance
- **Entrance**: `cubic-bezier(0, 0, 0.2, 1)`
- **Bounce**: `cubic-bezier(0.34, 1.56, 0.64, 1)` — buy-confirmation checkmark

### Durations
- **Fast**: 120ms — CTA colour shift, link hover
- **Standard**: 220ms — most state changes
- **Slow**: 320ms — modal entrance
- **Chart**: 600ms — candlestick draw-in, line-chart animation
- **Pulse**: 2400ms — chartreuse-glow loop on featured CTAs

### Per-Component Recipes
- **Button hover**: bg `#CCFF00` → `#DBFF40` over 120ms ease-standard; on dark surfaces with `glow=true`, chartreuse-glow blooms over 320ms ease-emphasized
- **Card hover (dark)**: bg `#141414` → `#1A1A1A` over 220ms; border opacity 0.08 → 0.12
- **Card hover (light)**: warm shadow appears `0 4px 12px` over 220ms; 1px translate-up
- **Candlestick draw-in**: each candle scales-y from 0 → 1 over 40ms with 20ms stagger; whole chart over 600ms ease-emphasized
- **Line-chart draw**: stroke-dashoffset animation full → 0 over 600ms ease-emphasized; gradient fill fades in over 220ms after stroke completes
- **Serif headline reveal**: H1 enters via vertical mask-clip (100% → 0%) over 600ms ease-emphasized, holding the editorial-print cadence — like a magazine page settling onto the screen
- **Ticker tape**: continuous infinite-scroll right-to-left at 60px/s; pauses on hover
- **Buy-success modal**: 320ms ease-emphasized entrance, checkmark bounces (1.0 → 1.2 → 1.0) over 480ms ease-bounce
- **Number ticker update**: digit positions count up/down from old → new over 600ms ease-emphasized
- **Sticky-nav scroll**: bg `#000000` → `rgba(0,0,0,0.85)` + backdrop-blur 12px over 220ms

### Reduced Motion
Strictly honoured. Candlestick replay, ticker-tape scroll, chartreuse-glow pulse, line-chart draw-in, number-ticker count-up, and the serif headline mask-reveal all collapse to instant final states.

## 9. Accessibility & A11y

### Contrast Pairs
- `#FFFFFF` text on `#000000` bg: **21.0:1** — AAA, maximum
- `#E8E5DC` body on `#000000` bg: **17.6:1** — AAA
- `#110E08` text on `#FAF7F0` bg: **17.4:1** — AAA
- `#1F1A14` body on `#FAF7F0` bg: **14.2:1** — AAA
- `#110E08` on `#CCFF00` brand: **16.2:1** — AAA (warm near-black is the correct text colour on chartreuse — chartreuse is so bright the near-black has extreme contrast)
- `#CCFF00` on `#000000` bg: **~17.8:1** — AAA (this is why the brand button looks emissive against black)
- `#A8D400` link on `#FAF7F0`: **4.7:1** — AA at body size (this is why links deepen from `#CCFF00` to `#A8D400` on cream)
- `#FF5000` Sell on `#000000`: **4.9:1** — AA
- `#A09C8F` muted on `#000000`: **7.3:1** — AAA

### Focus Indicators
3px solid `rgba(204, 255, 0, 0.55)` ring with 2px offset on every interactive element on dark surfaces. On light surfaces, the ring shifts to `rgba(168, 212, 0, 0.55)` (deeper lime) for sufficient contrast against cream.

### ARIA Patterns
- **Dialog**: modals use `role="dialog"`, `aria-modal="true"`, focus-trap, Escape closes
- **Tabs**: `role="tablist"` / `role="tab"` with `aria-selected`
- **Live region**: price updates use `aria-live="polite"`; buy/sell confirmations use `aria-live="assertive"`
- **Charts**: `role="img"` with `aria-label="AAPL one-day chart, up 1.24%, current price $189.45"` — screen readers receive the summary, not the SVG
- **Amount input**: `inputmode="decimal"`, `aria-label="Order amount in dollars"`
- **Buy/Sell buttons**: explicit `aria-label="Buy AAPL"` / `aria-label="Sell AAPL"` — never relying on colour-coding alone

### Keyboard Nav
Tab order matches visual flow. Watchlist rows reachable via Tab; Enter opens detail. Buy/Sell modal traps focus. Per-ticker keyboard shortcuts (B for Buy, S for Sell) on detail pages.

### Screen Reader Hints
- Up/Down delta pills include direction in label: "Up 1.24 percent" / "Down 0.83 percent"
- Feather glyph: `role="img"` with `aria-label="Robinhood"`
- Currency figures: visible "$" + numerals; `aria-label="189 dollars and 45 cents"`
- Gold tier badge: `aria-label="Robinhood Gold member"`

### Non-Colour Indicators
Up/Down direction is always carried by **colour AND glyph (↑ / ↓) AND sign (+/-) AND screen-reader label**. The chartreuse-vs-red distinction must also work for protanopia and deuteranopia — the additional direction-glyph is what makes this safe.

## 10. Responsive Behavior

### Breakpoints
| Name    | Width      | Use                              |
|---------|------------|----------------------------------|
| mobile  | <640       | Stacked single-column            |
| tablet  | 640–1024   | 2-col grid                       |
| desktop | 1024–1280  | 3-col grid                       |
| wide    | ≥1280      | Full layout, max 1280            |

### Touch Targets
Minimum 44×44px. CTAs at 48px standard / 56px hero. Buy/Sell buttons enlarge to 56px on mobile — the most-frequent product action gets the most touch real estate.

### Collapsing Strategy
- Top nav collapses to hamburger below 1024px; logo and "Sign up" chartreuse CTA persist
- display-hero scales 96 → 80 → 64 → 48px (desktop → tablet → mobile → small)
- canonical H1 (72px) scales 72 → 56 → 44 → 36px
- ticker-mega scales 96 → 72 → 56 → 40px
- Feature grid 3-col → 2-col → 1-col

### Image Behavior
- Phone-frame mockups at iOS-bezel radius (32px), centred, often fading from the bottom into the dark section
- Candlestick chart hero scales to viewport width; mobile shows last 30 days, desktop shows last 90
- `loading="lazy"` below-fold; `loading="eager"` on the hero phone-frame and candlestick chart

### Container Queries
Ticker cards: <320px → vertical stack (ticker above, price below); ≥320px → horizontal alignment. Charts: >600px shows volume bars below; <600px hides them.

## 11. Content & Voice

### Tone
**Calm, considered, slightly editorial** — Robinhood's voice avoids both the swagger of Cash App and the corporate gravity of legacy brokers. Sentences are direct. Headlines explain what the product does in plain language but with a slight literary register (helped by the serif typography). The brand sounds like a competent peer explaining investing to someone who has never invested — but a peer who reads The Economist on the weekend, not a peer who just downloaded the app for the meme stocks. The serif-headline + sans-body type pairing is the structural carrier of this voice; copy aligns to it.

Disclosure language is heavy and unavoidable (SEC/FINRA requirements drive much of the footer copy). The brand renders disclosure without apology and without hiding it — the dark footer with 12px legal type is itself a confidence signal.

### Microcopy Patterns
- **Button verbs**: "Sign up", "Go Gold", "Get the app", "Buy", "Sell", "Trade", "Invest"
- **Error message recipe**: short, specific, non-judgmental. "Not enough buying power. Add funds or reduce order size."
- **Success confirmation**: "Order placed. 1 share of AAPL at $189.45." — action + position + price
- **Loading state**: spinner + "Placing order…" — never blank

### Empty States
- **No positions**: "Your portfolio is empty. Pick a stock to get started."
- **No watchlist**: "Add stocks you're watching."
- Empty states are concise and always pair with a chartreuse primary CTA — the brand never leaves a user without a next-step button.

### CTA Verb Conventions
- **Acquisition**: "Sign up" (canonical), "Get Started", "Get the app"
- **Sign-in**: "Log in"
- **Subscription**: "Go Gold", "Try Gold Free"
- **Product**: "Buy", "Sell", "Trade", "Invest", "Deposit"
- **Confirmation**: "Buy 1 AAPL" — action + quantity + ticker
- **Exploration**: "Learn More", "See How", "Explore"

The brand uses **"Invest"** and **"Trade"** interchangeably at top-of-funnel, reserving **"Buy"** and **"Sell"** for actual order-entry verbs. Colour matches verb: chartreuse for Buy, orange-red for Sell. The visual rule is absolute: a Buy button is *never* anything other than chartreuse `#CCFF00`; a Sell button is *never* anything other than `#FF5000`.

## 12. Dark Mode & Theming

Robinhood's marketing site is **dark-by-default** — the homepage opens on a pure black canvas. Pages alternate between dark and cream-light bands as content cadence demands, but the brand's default register is the black hero with the serif headline and the chartreuse CTA. This is not a user-togglable theme; it is a brand-level posture.

**Dark surface tokens** (the homepage default): `bg #000000`, `text #FFFFFF`, `border rgba(255,255,255,0.08)`, `brand #CCFF00`, link uses `brand #CCFF00`.

**Light surface tokens** (cream-content bands): `bg #FAF7F0`, `text #110E08`, `border #D8D2C2`, `brand #CCFF00` (same chartreuse — the brand colour is identical across canvases), link uses `brand-deep #A8D400` (saturated chartreuse fails AA on cream at body size).

Tokens that shift between canvases:
- **Link colour**: `#CCFF00` on dark → `#A8D400` on light
- **Focus ring**: `rgba(204,255,0,0.55)` on dark → `rgba(168,212,0,0.55)` on light
- **Shadow base**: pure-black `rgba(0,0,0,…)` on dark → warm-dark `rgba(31,26,20,…)` on light
- **Border colour**: white-alpha on dark → warm-cream-shifted on light

Everything else — including the brand chartreuse itself, the Gold accent, the Sell red — stays identical across both canvases.

## 13. Lineage & Influences

Robinhood's visual lineage runs through four streams:

**The chartreuse-lime as deliberate category break**. Chartreuse `#CCFF00` is the colour of tennis-ball-yellow, hi-vis safety vests, Tesla's cyber-yellow, Snipcart's neon, and the unofficial 2020s "millennial neon" aesthetic. Robinhood's choice to use this colour for a *broker* is the strongest single move in the brand — every competitor reaches for trust-blue or growth-green; Robinhood reaches for a colour that doesn't look like money at all. The result reads as energy, motion, and disruption without the financial-product semantic baggage.

**Editorial publishing's serif-headline + sans-body convention**. Martina Plantijn paired with Capsule Sans Text is the typographic register of The New Yorker, FT Weekend, The Atlantic, Monocle — publications where the serif headline carries gravity and the sans body carries reading-ease. Robinhood is the first major consumer-finance brand to commit fully to this pairing. The implication is that investing is a considered, written, literary activity — not a tap-to-trade game.

**Luxury and editorial dark-mode aesthetic**. The pure-black canvas (`#000000` rather than near-black) shares vocabulary with luxury watch sites (A. Lange & Söhne, Patek Philippe), boutique fashion editorial (SSENSE, Acne), and high-end music press (Pitchfork's premium tiers, Crack Magazine). It is distinctly NOT the Cash-App "dark mode app" register; it is the "luxury-magazine-online" register.

**Candlestick chart and trading-screen vocabulary**. The green-up-red-down chart convention dates to 18th-century Japanese rice traders and was canonized in Western finance by Steve Nison in the 1990s. Robinhood retains the convention but substitutes chartreuse for green — making its charts immediately visually distinct from every other broker. The chart isn't a feature of the product; it IS the brand's most-shown image.

What it rejects: **Schwab / Fidelity / E*TRADE institutional-blue gravity** (Robinhood is the anti-institutional broker), **Bloomberg Terminal density** (Robinhood's surfaces are mobile-first and breathable), **Cash App's poster-loud type system** (Robinhood's type stays editorial-calm — the chartreuse does the talking, not the type), and **typical fintech "Inter-everywhere" sans-only typography** (the serif is the differentiator).

**Influences:**
- **Cash App** ([cash.app](https://cash.app)) — Consumer-fintech peer with the opposite aesthetic: dark-poster-loud vs Robinhood's dark-editorial-calm
- **Coinbase** ([coinbase.com](https://www.coinbase.com)) — Crypto peer with trust-blue where Robinhood chose chartreuse
- **Wealthfront** ([wealthfront.com](https://www.wealthfront.com)) — 2010s robo-advisor wave; shared parent aesthetic, more restrained
- **Monocle** ([monocle.com](https://monocle.com)) — Serif-headline + sans-body editorial register Robinhood inherits
- **A. Lange & Söhne** ([alange-soehne.com](https://www.alange-soehne.com)) — Luxury-watch pure-black canvas vocabulary
- **Production Type** ([productiontype.com](https://productiontype.com)) — Foundry behind Martina Plantijn
- **Bloomberg** ([bloomberg.com](https://www.bloomberg.com)) — Financial-editorial register Robinhood softens for consumer audiences

## 14. Do's and Don'ts

**Do:**
- Use chartreuse `#CCFF00` for every primary CTA — the defining brand decision that separates Robinhood from every fintech-blue and fintech-green competitor
- Default to pure black `#000000` body — not near-black `#0E0E0E`, the absolute OLED-pure ground is the brand's confidence signal
- Pair Martina Plantijn (serif, weight 400, 72px) headlines with Capsule Sans Text (sans, weight 400, 16px) body — the editorial-publishing convention is the typographic signature
- Set H1 colour on light to warm near-black `rgb(17, 14, 8)` — not pure `#000`, not the cool `#0E0E0E`; the warm cast is critical
- Use cream-white `#FAF7F0` (not paper-white) for light-content sections — the warmth pairs with the warm ink
- Use 36px pill radius on every CTA — neither full-pill 9999 nor square 8px; the 36px middle is signature
- Use `#110E08` (warm near-black) as text colour on chartreuse CTAs — pure white on chartreuse fails contrast; pure black feels cold; the warm near-black holds the register
- Pair Capsule Sans Mono with `tnum + zero` on every dollar figure, every percent, every ticker — slashed zero is non-negotiable in finance
- Render candlestick "up" candles in chartreuse `#CCFF00` — this is what makes Robinhood charts visually distinct from every other broker
- Reserve Robinhood Gold `#C9A14C` exclusively for the Gold subscription tier — never a general accent
- Carry up/down direction with colour AND glyph (↑/↓) AND sign (+/-) — colour-blind users must read the same signal
- Keep marketing whitespace generous (96px section, 128px hero) — the chartreuse CTA needs negative space to detonate; the serif headline at weight 400 needs room to read as editorial

**Don't:**
- Don't substitute chartreuse `#CCFF00` with a saturated green like `#00C805` or a mint — this is the most-important brand correction; chartreuse is NOT green
- Don't use near-black `#0E0E0E` as the canvas — pure `#000000` is the editorial-luxury register; near-black is the consumer-app register
- Don't use a sans for the H1 — the serif is the typographic signature; replacing Martina Plantijn with Inter or Capsule Sans Text alone collapses the editorial mood
- Don't bold the serif headline — Martina Plantijn at 700 reads tabloid; weight 400 reads editorial
- Don't use pure white `#FFFFFF` for light-content sections — paper-white reads SaaS-dashboard; the warm cream `#FAF7F0` is what holds the register
- Don't use full pill radius (9999) on CTAs — the 36px middle is the brand's button geometry; full pill reads Cash-App, square reads tax-software
- Don't use white text on the chartreuse CTA — contrast fails; use warm near-black `#110E08`
- Don't use pure red (`#FF0000`) for Sell — the warmer orange-red `#FF5000` is deliberately energetic, not alarming
- Don't render dollar figures in a proportional font — mono `tnum + zero` always
- Don't use Robinhood Gold for anything other than the Gold subscription tier — its scarcity is what makes it read as "premium"
- Don't apply chartreuse-glow to every CTA — reserved for one featured CTA per dark viewport
- Don't rely on colour alone for up/down direction — combine with glyph, sign, and label

## 15. Agent Prompt Guide

### Quick Color Reference

```
Brand:         #CCFF00  (Robinhood Chartreuse — NOT green)
Brand Bright:  #DBFF40
Brand Deep:    #A8D400  (link on light)
Canvas Dark:   #000000  (pure black — default homepage)
Canvas Light:  #FAF7F0  (warm cream — content sections)
Ink Dark:      #FFFFFF
Ink Light:     #110E08  (warm near-black — H1 on light, text on chartreuse)
Body Dark:     #E8E5DC  (warm off-white)
Body Light:    #1F1A14  (warm body)
Muted Dark:    #A09C8F
Muted Light:   #5C5648
Sell Red:      #FF5000
Gold (tier):   #C9A14C
Border Dark:   rgba(255,255,255,0.08)
Border Light:  #D8D2C2  (warm-shifted)
Chart Up:      #CCFF00  (same as brand)
Chart Down:    #FF5000
```

### Type Quick Reference

```
H1 (canonical):  Martina Plantijn, 72px, weight 400, -1.8px tracking
Body:            Capsule Sans Text, 16px, weight 400
Money figure:    Capsule Sans Mono, weight 700, tnum + zero
CTA label:       Capsule Sans Text, 15px, weight 600
```

### Example Component Prompts

1. *"Create a Robinhood hero on pure black: bg `#000000`, 72px Martina Plantijn (serif) headline at weight 400 in `#FFFFFF` with -1.8px tracking — text 'Investing for everyone.'. Below, a 18px body in `#E8E5DC` (warm off-white). A pill CTA at 56px height filled with chartreuse `#CCFF00`, warm near-black text `#110E08` at weight 600, labelled 'Sign up'. 36px radius (NOT full pill). Add a chartreuse-glow `rgba(204,255,0,0.40) 0 0 32px`. Right side: a phone-frame mockup (radius 32px) showing a portfolio screen on `#0A0A0A` with a chartreuse line-chart climbing and a `+$1,247.83` figure in 56px Capsule Sans Mono with `tnum + zero`."*

2. *"Design a Robinhood top-nav button cluster on black: bg `#000000`, height 72px. Three controls right-aligned with 12px gap: 'Log in' (link-style, white text 14px weight 500), 'Go Gold' (white pill bg `#FFFFFF`, near-black text `#110E08`, 36px radius, 48px height, 15px weight 600), 'Sign up' (chartreuse pill bg `#CCFF00`, near-black text `#110E08`, 36px radius, 48px height, 15px weight 600). The Sign up button has a faint chartreuse halo on hover."*

3. *"Build a Robinhood light-content section: warm cream bg `#FAF7F0`, 128px vertical padding. Centre headline 72px Martina Plantijn weight 400 in warm near-black `rgb(17, 14, 8)` reading 'A serious place to invest.' Below, an 18px Capsule Sans Text body in `#1F1A14` (warm body) at prose-width 680px. A pill CTA at 56px filled chartreuse `#CCFF00` with `#110E08` text labelled 'Open an account'. Note: NO chartreuse-glow on light surfaces."*

4. *"Compose a Robinhood candlestick hero on black: full-bleed bg `#000000`, 128px vertical padding. Centre headline 56px Martina Plantijn weight 400 white reading 'Watch your money move.' Below, a wide candlestick chart spanning 1080px — 90 candles, up-candles fill `#CCFF00` (chartreuse — yes, the brand IS the up-tick), down-candles fill `#FF5000`, gridlines `rgba(255,255,255,0.06)` 1px. Each candle scales-y from 0 → 1 with 20ms stagger over 600ms ease-emphasized. Below the chart, a pill CTA at 56px filled `#CCFF00` with `#110E08` text 'Get Started' and a chartreuse-glow."*

5. *"Design a Robinhood ticker card on dark: bg `#141414`, 12px radius, 20px / 24px padding. Left side: ticker 'AAPL' in 24px Capsule Sans Text weight 500 white, below it 'Apple Inc.' in 13px caption `#A09C8F`. Right side: price '$189.45' in 32px Capsule Sans Mono weight 600 white with `tnum + zero`, below it an Up Pill: bg `rgba(204,255,0,0.12)`, 4px radius, 2px/6px padding, text `↑ 1.24%` in 14px mono weight 600 chartreuse `#CCFF00`."*

6. *"Compose a Robinhood Buy/Sell button pair: 16px-padding container with `#141414` bg and 16px radius. Two 56px tall pill buttons side by side, 12px gap, 36px-radius (NOT 9999 full-pill). Left: bg `#CCFF00`, near-black text `#110E08` weight 600 'Buy AAPL'. Right: bg `#FF5000`, near-black text `#110E08` weight 600 'Sell AAPL'. Hover state: chartreuse deepens to `#A8D400`, red deepens to `#D43A00`. Each button has explicit `aria-label`."*

7. *"Design a Robinhood Gold upsell card on black: bg `#000000`, 1px solid `#C9A14C` border, 24px radius, 32px padding. Top: a small gold badge — bg `#C9A14C`, text `#110E08` weight 600 12px, pill, reading 'GOLD' uppercase with 1.5px tracking. Below: 32px Martina Plantijn weight 400 white 'Upgrade to Robinhood Gold.' Body: 16px `#E8E5DC` Capsule Sans Text describing benefits. Bottom CTA: 36px-radius pill 48px filled `#C9A14C` text `#110E08` weight 600 'Try Gold Free' with optional gold-glow `rgba(201,161,76,0.40) 0 0 24px`."*

8. *"Create a Robinhood order-entry modal: dark overlay `rgba(0,0,0,0.85)`. Dialog bg `#141414`, 24px radius, max-width 480px, 32px padding. Title 32px Martina Plantijn weight 400 white 'Buy AAPL.' (with the period — editorial cue). Below: amount input — transparent bg, no border, right-aligned 56px Capsule Sans Mono weight 700 white with `tnum + zero` and `$` prefix, value '$189.45'. Hint below in 13px `#A09C8F`: 'Buying power $1,250.00'. Two buttons at the bottom: 36px-pill secondary 'Cancel' (transparent bg, white text, 1px white-30% border) and 36px-pill primary 'Review Order' (bg `#CCFF00`, near-black `#110E08` text). 480ms ease-bounce scale on success."*

### Iteration Guide

1. **The brand colour is chartreuse, not green**: This is the most-important correction. Replace `#00C805` saturated green with `#CCFF00` chartreuse — closer to tennis-ball / hi-vis vest / Tesla cyber-yellow than to any fintech green. If your design has a saturated-green CTA, you're rendering Cash App, not Robinhood.

2. **Canvas is pure black, not near-black**: Use `#000000` for the homepage canvas. Near-black `#0E0E0E` reads "consumer app dark mode"; pure black reads "editorial-luxury".

3. **H1 must be serif at weight 400, 72px**: Use Martina Plantijn (fallback GT Sectra / Tiempos Headline / Spectral / Georgia). Weight 400, NOT bold. 72px is the canonical site setting. The serif headline at light weight is the central typographic move — replacing it with a sans collapses the editorial mood.

4. **Body is Capsule Sans Text, 16px weight 400**: Calm, modern, geometric sans. The body steps back so the serif headline and the chartreuse CTA both step forward.

5. **CTA radius is 36px, not full pill, not square**: This is the verified live measurement and the brand's signature button geometry.

6. **Text on chartreuse is warm near-black `#110E08`**: NOT white (fails contrast), NOT pure black (feels cold). The warm near-black holds the editorial register across every chartreuse component.

7. **Light-content sections use warm cream `#FAF7F0`**: NOT paper-white. The warm cast pairs with the warm ink (`rgb(17, 14, 8)`) to hold the editorial mood across both canvases.

8. **Mono for every number**: Capsule Sans Mono (fallback SF Mono / JetBrains Mono) with `tnum + zero`. The slashed zero matters in finance.

9. **Candlestick "up" candle is chartreuse**: This is what makes Robinhood charts visually distinct. Up-candles render in `#CCFF00`, not a conventional saturated green.

10. **Reserve Gold for the Gold tier only**: `#C9A14C` appears nowhere else. Its scarcity is what makes it read as premium.

---

*Theme-toggle audit: score=0, signals=[none]*