---
version: alpha
name: Robinhood
description: A pitch-black trading floor lit by a single jolt of electric lime, where a high-contrast Martina Plantijn serif sets the editorial headlines and every primary action is a chartreuse pill — a finance brand that reads like a manifesto, not a bank.

colors:
  # Surface / canvas
  background: "#000000"          # pure-black page canvas
  surface: "#110e08"             # near-black warm-tinted section panels, primary-button fill on light
  surface-raised: "#1c1a16"      # slightly lifted dark cards over pure black

  # Ink / text
  ink: "#ffffff"                 # primary body text on black canvas — was #110e08 (≈ background #000000 → 1.09:1 body-contrast); white matches on-dark, the correct on-canvas text color. Near-black text on lime/light surfaces uses on-primary (#110e08) directly.
  on-dark: "#ffffff"             # white headlines and body on the black canvas
  on-dark-soft: "#d9d9d9"        # muted body copy on dark
  on-dark-muted: "#bfbfbf"       # captions, metadata, footer links on dark
  ink-warm: "#4d4a46"            # warm taupe-gray dividers and faint detail on light

  # Brand accent — the singular Robinhood lime
  primary: "#ccff00"             # CTAs, nav highlight, the brand jolt
  primary-hover: "#b8e600"       # was a darkened lime hover — approximated for hex
  on-primary: "#110e08"          # near-black text/icons sitting on lime

  # Borders
  border: "#1c1a16"              # hairline panel edges on the black canvas
  border-soft: "#322f2f"         # was rgba over black — slightly lighter dark divider

  # Shadow tint (opaque stand-in for the elevation table)
  shadow-soft: "#000000"         # was rgba(0,0,0,0.6) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Martina Plantijn, Georgia, 'Times New Roman', serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -1px
  display:
    fontFamily: "Martina Plantijn, Georgia, 'Times New Roman', serif"
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -1px
  heading:
    fontFamily: "Martina Plantijn, Georgia, 'Times New Roman', serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -1px
  heading-sub:
    fontFamily: "Capsule Sans Text, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.36
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Capsule Sans Text, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.25px
  body:
    fontFamily: "Capsule Sans Text, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.25px
  button-ui:
    fontFamily: "Capsule Sans Text, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.25px
  label:
    fontFamily: "Capsule Sans Text, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.5px
  caption:
    fontFamily: "Capsule Sans Text, Helvetica, system-ui, -apple-system, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.58
    letterSpacing: -0.1px

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

rounded:
  sm: 3px
  md: 12px
  lg: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-secondary-hover:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.on-dark}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"

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

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

  nav-bar:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    padding: 12px 24px

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

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  badge-outline:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark-muted}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Robinhood Design System

## Overview

Robinhood's site reads less like a brokerage and more like a manifesto printed on the inside of a vault. The canvas is uncompromising **black** (`{colors.background}`), occasionally warming to a near-black brown-black (`{colors.surface}`), and onto that darkness the brand drops a single, almost violent jolt of electric lime (`{colors.primary}`). There is no blue, no green-on-green safe-bank palette, no gradients washing the hero. The discipline is the swagger: one accent, used for every primary action, against a void. The hero headline — "Join a new generation of investors" — is set in **Martina Plantijn**, a high-contrast bookish serif, at 72px in pure white. A serif on a fintech homepage is the whole thesis: this is meant to feel literary, generational, and a little defiant, not like an app store screenshot.

The signature move is the inversion of expectation. Most finance brands lean on a calming blue and a sans-serif of trustworthy neutrality. Robinhood does the opposite — it pairs a **serif** display face (`{typography.display-hero}`) with a quiet grotesque sans, **Capsule Sans Text** (`{typography.body}`), for everything functional. The serif carries voice and ambition; the sans carries the legalese, the buttons, and the data. That split lets the headlines feel like statements and the UI feel like infrastructure. Letter-spacing on the serif is pulled tight (-1px) so the big type sits dense and confident rather than airy.

Then there's the lime. `{colors.primary}` is the most recognizable thing about the brand, and Robinhood spends it like currency: the top nav bar is a solid lime strip, the primary CTA ("Get started", "Sign up") is a lime **pill** (`{rounded.pill}`, 36px radius) with near-black text (`{colors.on-primary}`), and small badges glow the same color. Everything else stays monochrome — white and warm grays on black. The effect is high-contrast, energetic, and unmistakably young. Where Clerk reserves elevation for one widget, Robinhood reserves *color* for one purpose: pointing you at the next action.

**Key Characteristics:**
- Pure black canvas (`{colors.background}`) with a warm near-black for panels (`{colors.surface}`) — a committed dark-first identity
- A single electric lime accent (`{colors.primary}`) carrying every primary action — no secondary accent hues
- **Martina Plantijn** serif for all display type (`{typography.display-hero}`) — the defiant, editorial signature
- **Capsule Sans Text** grotesque for body, buttons, and UI (`{typography.body}`) — the quiet functional voice
- Primary CTA is a lime **pill** (`{rounded.pill}`) with near-black text (`{colors.on-primary}`), not lime text on dark
- Lime nav bar (`{components.nav-bar}`) — the brand color runs edge to edge across the top
- Tight negative tracking on serif display (-1px) for dense, confident headlines
- White (`{colors.on-dark}`) and warm grays (`{colors.on-dark-soft}`, `{colors.on-dark-muted}`) do all the text work on black
- Buttons are fully rounded pills with `14px 32px` padding — generous, tactile targets
- Restraint everywhere except the accent: no gradients, no photography-led hero, no mid-tone clutter

## Colors

### Surface & Canvas
- **Black** (`{colors.background}`): The dominant canvas. Nearly the entire marketing site sits on pure black.
- **Warm Near-Black** (`{colors.surface}`): Section panels and the fill for dark buttons — a brown-tinted black, barely lifted from the canvas.
- **Raised Dark** (`{colors.surface-raised}`): A slightly lighter dark used for cards that need to read above the void.

### Brand Accent
- **Robinhood Lime** (`{colors.primary}`): The singular brand color. The nav bar, every primary CTA, badges, and the brand jolt. Used as a fill with near-black text, never as low-contrast text on dark.
- **Lime Hover** (`{colors.primary-hover}`): A marginally deepened lime for pressed/hover on the primary pill.
- **On-Primary** (`{colors.on-primary}`): Near-black text and icons that sit on lime — the only legible pairing.

### Ink / Text
- **White** (`{colors.ink}`): Primary body text on the black canvas. Near-black text on lime uses `{colors.on-primary}` (#110e08) directly.
- **White** (`{colors.on-dark}`): Headlines and primary body on the black canvas.
- **Soft Gray** (`{colors.on-dark-soft}`) / **Muted Gray** (`{colors.on-dark-muted}`): Supporting body copy, captions, and footer links on dark.
- **Warm Taupe** (`{colors.ink-warm}`): Faint dividers and low-emphasis detail.

### Borders & Shadow Tint
- **Hairline** (`{colors.border}`) / **Soft Border** (`{colors.border-soft}`): Panel edges on black — kept nearly invisible so the darkness reads as continuous.
- **Shadow** (`{colors.shadow-soft}`): Opaque stand-in for the soft black ambient cast used under raised cards (the original was an rgba black — flattened for the Google spec).

## Typography

### Font Family
- **Display**: `Martina Plantijn`, a high-contrast transitional serif, with fallbacks `Georgia, 'Times New Roman', serif`. Carries every headline.
- **Body / UI**: `Capsule Sans Text`, a neutral grotesque, with fallbacks `Helvetica, system-ui, -apple-system, Arial, sans-serif`. Carries body, buttons, labels, and legalese.
- **OpenType / tracking**: serif display uses tight negative tracking (-1px); sans body uses a slight -0.25px to -0.5px for optical tightness at small sizes.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 72px / Martina Plantijn / -1px — the marquee serif headline |
| `display` | 52px / Martina Plantijn — major section headlines |
| `heading` | 40px / Martina Plantijn — feature headings |
| `heading-sub` | 22px / Capsule Sans 500 — sub-section sans headings |
| `body-large` | 18px / Capsule Sans — lead paragraphs |
| `body` | 16px / Capsule Sans — standard body and inputs |
| `button-ui` | 16px / Capsule Sans 500 — button and pill labels |
| `label` | 13px / Capsule Sans — small UI labels, badges |
| `caption` | 12px / Capsule Sans — metadata, footer, disclosures |

### Principles
- **Serif for voice, sans for function**: Martina Plantijn makes claims; Capsule Sans does the work. Never mix the roles.
- **Tighten the big serif**: -1px tracking keeps large display type dense and editorial.
- **Weight does little**: the system lives at 400–500. It relies on the serif/sans contrast and the lime accent for emphasis, not heavy weights.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step. Robinhood breathes — major sections are separated by `{spacing.5xl}`–`{spacing.6xl}` of black space, letting the lime accents and serif headlines land with impact rather than crowding.

### Grid & Container
- Max content width: ~1280px, centered (the layout responds across breakpoints from 360px up to 1441px)
- Common pattern: a centered serif headline over a black field, with a single lime CTA pill beneath it
- Footer is a dense multi-column sans grid of legal and product links on black

### Whitespace Philosophy
- **Black is the design**: the void does the work; negative space is the primary separator, not borders or fills
- **One thing glows**: each screen has a single lime focal point — the CTA — and everything else recedes into monochrome
- **Editorial pacing**: sections are spaced like a print spread, not a dense dashboard

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, pure black field | The dominant page canvas and most content |
| Panel (Level 1) | Warm near-black fill (`{colors.surface}`), no shadow | Section panels distinguished by tone, not lift |
| Card (Level 2) | Raised dark fill (`{colors.surface-raised}`) + soft ambient (`{colors.shadow-soft}`) | Cards that need to float above the void |
| Accent (Level 3) | Lime fill (`{colors.primary}`) | Not a shadow but the strongest figure/ground signal — the CTA reads as "above" purely through color |
| Focus Ring | Lime outline at ~2px | Keyboard focus on dark inputs and pills |

**Shadow Philosophy**: Robinhood is almost entirely flat. On a black canvas, traditional drop shadows have nowhere to fall, so depth is communicated through **tonal shifts** (`{colors.surface}` → `{colors.surface-raised}`) and, above all, through **color**. The lime pill is the most "elevated" thing on any screen, not because of a shadow but because it is the only saturated object in a monochrome field. Use real shadows sparingly and softly, only under genuinely floating cards.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `sm` | 3px | Tiny detail elements, inline chips |
| `md` | 12px | Cards, inputs, dark panels |
| `lg` | 24px | Larger media containers and feature cards |
| `pill` | 9999px | The default for every button and badge — the signature lime pill (36px on large CTAs) |

The system is essentially binary in feel: tight 12px on containers, and a hard commitment to fully-rounded **pills** for all interactive elements. The pill CTA is a brand signature; nothing important is a hard-cornered rectangle.

## Components

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

### Buttons
- **`button-primary`** — Lime (`{colors.primary}`) pill fill, near-black text (`{colors.on-primary}`), `{rounded.pill}`. The single most important element on any page. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — Near-black (`{colors.surface}`) pill fill, white text. The quieter action beside the lime CTA. Hover lifts to `{colors.surface-raised}`.
- **`button-ghost`** — Transparent on black, white text, pill shape. Hover fills `{colors.surface}` and the text goes lime.

### Cards
- **`card`** / **`card-raised`** — Near-black surfaces, 12px radius. The raised variant uses a lighter dark fill and a soft ambient shadow to float above the canvas.

### Inputs
- **`input`** — Near-black fill, white text, 12px radius. **`input-focus`** keeps the fill and adds a lime focus ring rather than changing the background.

### Navigation
- **`nav-bar`** — The signature: a solid **lime** bar (`{colors.primary}`) with near-black links running edge to edge across the top.

### Links & Badges
- **`link`** — White on dark; **`link-hover`** shifts to lime.
- **`badge`** — Lime pill with near-black text for emphatic tags; **`badge-outline`** is a quiet near-black pill with muted-gray text for neutral metadata.

## Do's and Don'ts

### Do
- Keep the canvas pure black (`{colors.background}`) — let negative space and tonal panels (`{colors.surface}`) do the structural work
- Reserve lime (`{colors.primary}`) for the primary action and the nav bar — it is the one thing that glows
- Set every headline in **Martina Plantijn** serif (`{typography.display-hero}`) with tight -1px tracking
- Use **Capsule Sans Text** (`{typography.body}`) for all body, buttons, labels, and legalese
- Make the primary CTA a lime **pill** (`{rounded.pill}`) with near-black text (`{colors.on-primary}`)
- Run the top navigation as a solid lime strip (`{components.nav-bar}`)
- Communicate depth through tonal shifts (`{colors.surface}` → `{colors.surface-raised}`) and color, not heavy shadows
- Keep weights light — the system lives at 400–500 and leans on type contrast, not bold

### Don't
- Don't use lime as low-contrast text on the black canvas — it is a fill color with near-black text
- Don't introduce a second accent hue (blue, teal, purple) — the brand is monochrome plus one lime
- Don't set headlines in the sans — the serif/sans split is the whole identity
- Don't reach for hard-cornered rectangle buttons — interactive elements are pills
- Don't pile on gradients, glows, or photography-led heroes — the void plus one accent is the message
- Don't go heavy on weight to create hierarchy — use the serif and the lime instead
- Don't add a light marketing theme — Robinhood's site is committedly dark

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <426px | Single column; serif hero scales 72px → ~36px; lime CTA goes full-width pill; nav collapses to a lime menu bar |
| Mobile | 426–767px | Single column; tighter section padding; footer columns stack |
| Tablet | 768–1023px | Two-column feature rows begin; headline reduced |
| Desktop | 1024–1279px | Full layout; centered serif hero over the black field |
| Large | ≥1280px | Max ~1280px container, centered; generous black section spacing (`{spacing.6xl}`) |

### Touch Targets
- Pill buttons run comfortably tall with `14px 32px` padding — easy thumb targets
- The lime nav bar gives a large, high-contrast tap region for primary navigation

### Collapsing Strategy
- **Navigation**: full horizontal lime nav → lime menu toggle on mobile; the "Sign up" pill persists
- **Hero**: centered serif headline scales down while keeping proportional negative tracking; the single CTA goes full-width
- **Spacing**: section padding compresses from ~128px toward ~48–64px
- **Footer**: multi-column sans link grid collapses to stacked sections

### Image Behavior
- The site is largely typographic; where imagery appears it sits on black and reflows as flex/grid children, with media containers carrying the `{rounded.lg}` radius

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Black (`{colors.background}`)
- Text: White on dark (`{colors.on-dark}`)
- Brand accent: Robinhood Lime (`{colors.primary}`)
- Secondary text: Soft Gray (`{colors.on-dark-soft}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: **Lime pill** (`{colors.primary}` fill, near-black text)

### Example Component Prompts

- "Create a hero on pure black (`{colors.background}`) with a centered 72px white (`{colors.on-dark}`) headline in Martina Plantijn serif, letter-spacing -1px, and a single lime (`{colors.primary}`) pill CTA below it with near-black text (`{colors.on-primary}`), `{rounded.pill}` radius, `14px 32px` padding"
- "Build the primary button: lime (`{colors.primary}`) fill, near-black (`{colors.on-primary}`) text in Capsule Sans 500 (`{typography.button-ui}`), fully rounded pill (`{rounded.pill}`), hover deepens to `{colors.primary-hover}`"
- "Create a top navigation bar: solid lime (`{colors.primary}`) strip running edge to edge, near-black (`{colors.on-primary}`) links, `12px 24px` padding (`{components.nav-bar}`)"
- "Design a dark card: near-black (`{colors.surface}`) fill, white text, `{rounded.md}` (12px) radius, 24px padding, no border — distinguished from the canvas only by tone"
- "Build a dark input: near-black (`{colors.surface}`) fill, white text, `{rounded.md}` radius; on focus keep the fill and add a 2px lime (`{colors.primary}`) focus ring, no background change"
- "Render an emphatic badge: lime (`{colors.primary}`) pill with near-black text in `{typography.label}`, `{rounded.pill}`, `4px 12px` padding"

### Iteration Guide

1. Start on pure black (`{colors.background}`). If you reached for a gradient or a light background, stop — Robinhood is committedly dark.
2. Lime (`{colors.primary}`) is the single accent. If you've used a second saturated color, remove it.
3. Lime is a fill with near-black text (`{colors.on-primary}`). If it's lime text floating on black, recolor it.
4. Headlines must be Martina Plantijn serif (`{typography.display-hero}`) with -1px tracking; body and UI must be Capsule Sans (`{typography.body}`). Don't swap the roles.
5. Every interactive element is a pill (`{rounded.pill}`). Containers use `{rounded.md}` (12px). No hard-cornered buttons.
6. Communicate depth with tone (`{colors.surface}` → `{colors.surface-raised}`) and color, not shadows.
7. Keep weights at 400–500 and let the serif/sans contrast plus the one lime accent carry the hierarchy.

---

## Attribution

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