Finance / iOS / Android / Web

Robinhood

Robinhood sells in neon on black and trades in green on white: a serif-led marketing voice, then a quiet hairline product where color only ever means up or down.

Download
  • #CCFF00
  • #110E08
  • #00C805
  • #FF5000
  • #E3E9ED
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#00C805
  • primary hover#26D02B
  • primary pressed#40D644
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF
  • dark bg1#000000
  • dark bg2#1E2124
  • dark bg3#30363A

Text

  • on neon#110E08
  • ink#000000
  • ink muted#6A7278
  • on night#FFFFFF
  • dark fg1#FFFFFF
  • dark fg2#919FA6
  • dark fg3#545D61

Lines

  • border#E3E9ED
  • focus#007FF5

Status

  • negative#FF5000

More

  • neon#CCFF00
  • night#110E08
  • night raised#1C180D

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Martina PlantijnMartina Plantijn is private and not available in open fonts. Shown in PT Serif, the closest open match.
  • PhonicPhonic is private and not available in open fonts. Shown in Albert Sans, the closest open match.
  • Capsule Sans DisplayCapsule Sans Display is private and not available in open fonts. Shown in Figtree, the closest open match.
  • Capsule Sans TextCapsule Sans Text is private and not available in open fonts. Shown in Instrument Sans, the closest open match.
  • hero110px / 400 / 110px

    Robinhood

  • marketing headline52px / 400 / 62px

    Robinhood

  • display l32px / 500 / 40px

    Robinhood

  • display m24px / 500 / 32.4px

    Pack my box with five dozen liquor jugs

  • text l18px / 400 / 27.5px

    The quick brown fox jumps over the lazy dog

  • text m15px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • text s13px / 400 / 19.9px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • sm4px
  • md16px
  • lg24px
  • xl40px
  • pill44px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg20px
  • xl32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button signup
    button-signup
  • button trade
    button-trade
  • button outline
    button-outline
  • range tab selected
    range-tab-selected
  • promo banner
    promo-banner
  • night section
    night-section
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 134 lines
version: alpha
name: Robinhood-design-analysis
description: "A trading brand with two faces: a black marketing site lit by neon chartreuse (#ccff00) with a large Plantijn serif, and white product pages in Capsule Sans where green (#00c805) means up and orange-red (#ff5000) means down, on 44 high pill buttons."
status: Draft
appVersion: "measured in a browser and read from the design tokens the live site ships, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#00c805"
  primary-hover: "#26d02b"
  primary-pressed: "#40d644"
  on-primary: "#ffffff"
  negative: "#ff5000"
  neon: "#ccff00"
  on-neon: "#110e08"
  ink: "#000000"
  ink-muted: "#6a7278"
  canvas: "#ffffff"
  border: "#e3e9ed"
  focus: "#007ff5"
  night: "#110e08"
  night-raised: "#1c180d"
  on-night: "#ffffff"
  dark-bg1: "#000000"
  dark-bg2: "#1e2124"
  dark-bg3: "#30363a"
  dark-fg1: "#ffffff"
  dark-fg2: "#919fa6"
  dark-fg3: "#545d61"

typography:
  # Font note: "Martina Plantijn" is a private font and is not available in open fonts. Closest open alternative: "PT Serif".
  # Font note: "Phonic" is a private font and is not available in open fonts. Closest open alternative: "Albert Sans".
  # Font note: "Capsule Sans Display" is a private font and is not available in open fonts. Closest open alternative: "Figtree".
  # Font note: "Capsule Sans Text" is a private font and is not available in open fonts. Closest open alternative: "Instrument Sans".
  hero:
    fontFamily: "'Martina Plantijn', Georgia, serif"
    fontSize: 110px
    fontWeight: 400
    lineHeight: 110px
    letterSpacing: -0.5px
  marketing-headline:
    fontFamily: "Phonic, Helvetica, system-ui, sans-serif"
    fontSize: 52px
    fontWeight: 400
    lineHeight: 62px
    letterSpacing: -1.5px
  display-l:
    fontFamily: "'Capsule Sans Display', system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 40px
    letterSpacing: -0.33px
  display-m:
    fontFamily: "'Capsule Sans Display', system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 32.4px
    letterSpacing: -0.1px
  text-l:
    fontFamily: "'Capsule Sans Text', system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27.5px
    letterSpacing: -0.25px
  text-m:
    fontFamily: "'Capsule Sans Text', system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.1px
  text-s:
    fontFamily: "'Capsule Sans Text', system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 19.9px
    letterSpacing: -0.1px

rounded:
  sm: 4px
  md: 16px
  lg: 24px
  xl: 40px
  pill: 44px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 20px
  xl: 32px

components:
  button-signup:
    backgroundColor: "{colors.neon}"
    textColor: "{colors.on-neon}"
    typography: "{typography.text-s}"
    rounded: "{rounded.pill}"
    height: 44px
    padding: 0 32px
  button-trade:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.text-s}"
    rounded: "{rounded.pill}"
    height: 44px
    padding: 0 24px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.text-s}"
    rounded: "{rounded.pill}"
    height: 36px
    padding: 0 24px
  range-tab-selected:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.text-m}"
    rounded: "{rounded.sm}"
    height: 28px
    padding: 4px 8px
  promo-banner:
    backgroundColor: "{colors.neon}"
    textColor: "{colors.on-neon}"
    typography: "{typography.text-m}"
    padding: 10px 20px
  night-section:
    backgroundColor: "{colors.night}"
    textColor: "{colors.on-night}"
    typography: "{typography.marketing-headline}"
    padding: 32px

Overview

Robinhood is a trading and investing app for stocks, options and crypto. Its public site has two faces. The marketing pages are black and lit by a neon chartreuse, with a large serif headline. The stock pages, which are public, are white and quiet, with green for gains and an orange-red for losses. A token set that ships with the live site names the colors, the type scale and the sizes. [Measured]

What defines the look:

  1. Neon on black. Marketing pages sit on #000000 and #110e08, and the sign-up button and promotion bar are chartreuse #ccff00 with near-black text. [Measured]
  2. Green up, orange-red down. On product pages, #00c805 is the primary color, the positive color and the success color in one token. #ff5000 is negative and error. [Measured]
  3. Four type families. Martina Plantijn for the giant marketing headline, Phonic for marketing section headings, Capsule Sans Display for product titles and Capsule Sans Text for everything else. [Measured]
  4. 44 high pills. Buttons are 44 high with a pill corner. The token set names 44 as the button height. [Measured]
  5. Hairline product pages. Stock pages are white with #e3e9ed hairlines and #6a7278 muted text, and the chart range tabs are small 4px chips. [Measured]

Source for this file: the home page, the Apple stock page and the log in page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass, plus the tokens the live site declares on its root element (primary, semantic, neutral, focus, type palette and size palette). The design system's documentation is not public. The signed-in portfolio and order flow were not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueToken name in the shipped set
Primary and positive#00c805, hover #26d02b, pressed #40d644primary base, hover, pressed; semantic positive and success [Measured]
Primary washes#00c805 at 40 and 20 percentprimary light, lightest [Measured]
Negative and error#ff5000, wash at 40 percentsemantic negative, error, scary [Measured]
Neon#ccff00 with #110e08 textMarketing sign-up and promotion bar [Measured]
Night#110e08, #1c180dMarketing sections [Measured]
Text#000000 on light, #ffffff on darkneutral fg1 [Measured]
Muted text#6a7278 on light, #919fa6 on darkneutral fg2 [Measured]
Faint text#545d61 on darkneutral fg3 [Measured]
Hairline#e3e9ed on light, #30363a on dark[Measured]
Dark surfaces#000000, #1e2124, #30363aneutral bg1, bg2, bg3 [Measured]
Focus ring#007ff5, outer ring at 40 percentfocus inner, outer [Measured]

Every neutral also has hover and pressed steps in the token set, for example bg1 hover #1a1a1a and pressed #333333. [Measured]

Typography

The shipped type palette names its styles. [Measured]

StyleSize, line height, trackingWeightFamily
Marketing hero110 on 110, -0.5px (60 on 63 at 390)400Martina Plantijn [Measured]
Marketing heading52 on 62, -1.5px; 40 on 48, -1px (40 and 25 to 28 at 390)400Phonic [Measured]
displayCapsuleL32, line height 1.25, -0.33px500Capsule Sans Display [Measured]
displayCapsuleM24, 1.35, -0.1px500Capsule Sans Display [Measured]
displayCapsuleS21, 1.35, -0.1px500Capsule Sans Display [Measured]
textL and textLBold18, 1.53, -0.25px400 and 700Capsule Sans Text [Measured]
textM and textMBold15, 1.6, -0.1px400 and 700Capsule Sans Text [Measured]
textS and textSBold13, 1.53, -0.1px400 and 700Capsule Sans Text [Measured]

The palette also names book cover and serif display styles (Capsule Sans Book Cover and Nib Pro at 44 to 72), which were not seen in use on the pages measured. [Measured]

Shape and spacing

The size palette sets a 4px base corner, a 44 button height, cell heights of 36, 48 and 60, gutters of 4, 8 and 12 and large input padding of 20. [Measured] In use, buttons are pills (36 to 44), stock page cards 40px, tiles 16 and 24, and chart range tabs 4. [Measured]

Iconography and motion

Not measured. [Inferred]

Themes

The log in page is drawn in the dark neutrals, and the marketing site is dark by design. Stock pages are light. Requesting the dark color scheme did not switch the stock page, so the theme is chosen by the page, not the browser setting. [Measured]

Platform: iOS

How the Robinhood iOS app looks and behaves was not captured. The token set ships on the web, but its documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for investing, crypto, retirement and the account is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A green Trade or Buy pill near the bottom of a stock screen. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the green and orange-red, the neutrals and Capsule Sans with the web. [Inferred]

Platform: Android

How the Robinhood Android app looks and behaves was not captured. The token set ships on the web, but its documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for investing, crypto, retirement and the account is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A green Trade or Buy pill near the bottom of a stock screen. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the green and orange-red, the neutrals and Capsule Sans with the web. [Inferred]

Platform: Web

The home page, a stock page and the log in page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

Marketing: a top bar of text menus (What We Offer, Crypto and more) at 16, with a neon Sign up pill. Stock pages: a white top bar with Learn, Blog and a search field. [Measured]

Main action

Expected on Web: Page-level button.

Marketing: a #ccff00 pill, 44 high with 32 side padding and 13 text. Stock pages: a green "Sign Up to Buy" pill with white 13px bold text, 44 high. On mobile the stock page shows an outlined green "Get" pill, 36 high. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

A black scrim at 60 percent covers the stock page behind a prompt. [Measured] Toasts were not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Chart range tabs (1D, 1W, 1M, 3M, YTD) are text tabs on desktop and 28 high chips on mobile, the selected one black with a 4px corner, the others in green text. The share switcher is a 36 high white control with a hairline. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width (110 to 60 for the hero, 52 to 40 for headings). [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons are 44 high, the named button height. Range chips are 28 on mobile. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

The log in page offers Google, Apple and passkeys as equal outlined pills, 44 high. [Measured]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The marketing site and product pages follow different color rules on purpose: neon for selling, green and orange-red for prices. Both use 44 high pills. [Measured]

Cross-platform consistency

Consistent across platforms: the green and orange-red price colors, the dark neutrals and Capsule Sans. [Measured for web, Inferred for the apps]

Intentionally different: the marketing site is black and neon, while the product is white with green. [Measured]

Do's and Don'ts

Do

  • Use green only for gains, success and the main product action, and orange-red only for losses and errors.
  • Keep neon chartreuse for marketing and promotions on dark backgrounds.
  • Use 44 high pills for actions.
  • Pick type from the named palette: Capsule Sans Display for titles, Capsule Sans Text for everything else.

Don't

  • Don't use neon on the product pages, or green on the marketing site.
  • Don't add a red for losses. The negative color is orange-red #ff5000.
  • Don't set product text in the marketing serif.

Known Gaps

  • The signed-in portfolio, order entry and options screens sit behind an account and were not measured.
  • The iOS and Android apps were not captured. The token set ships on the web, but its documentation is not public, so every mobile topic is inferred.
  • Icons, motion and toasts were not measured.
  • Four private families are used. Choices made by comparing the same line side by side: PT Serif for Martina Plantijn (width within 1 percent), Albert Sans for Phonic (within 1 percent), Figtree for Capsule Sans Display and Instrument Sans for Capsule Sans Text (both within 1 percent). Inter Tight and Red Hat Display were close seconds.
  • The green trade pill carries white 13px bold text, which measures about 2.3 to 1 against #00c805, below the 4.5 to 1 minimum. That is the shipped value and was kept.
  • Account deletion and store policy rules were not verified.