--- 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 | Role | Value | Token name in the shipped set | |------|-------|-------------------------------| | Primary and positive | `#00c805`, hover `#26d02b`, pressed `#40d644` | primary base, hover, pressed; semantic positive and success [Measured] | | Primary washes | `#00c805` at 40 and 20 percent | primary light, lightest [Measured] | | Negative and error | `#ff5000`, wash at 40 percent | semantic negative, error, scary [Measured] | | Neon | `#ccff00` with `#110e08` text | Marketing sign-up and promotion bar [Measured] | | Night | `#110e08`, `#1c180d` | Marketing sections [Measured] | | Text | `#000000` on light, `#ffffff` on dark | neutral fg1 [Measured] | | Muted text | `#6a7278` on light, `#919fa6` on dark | neutral fg2 [Measured] | | Faint text | `#545d61` on dark | neutral fg3 [Measured] | | Hairline | `#e3e9ed` on light, `#30363a` on dark | [Measured] | | Dark surfaces | `#000000`, `#1e2124`, `#30363a` | neutral bg1, bg2, bg3 [Measured] | | Focus ring | `#007ff5`, outer ring at 40 percent | focus 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] | Style | Size, line height, tracking | Weight | Family | |-------|-----------------------------|--------|--------| | Marketing hero | 110 on 110, -0.5px (60 on 63 at 390) | 400 | Martina Plantijn [Measured] | | Marketing heading | 52 on 62, -1.5px; 40 on 48, -1px (40 and 25 to 28 at 390) | 400 | Phonic [Measured] | | displayCapsuleL | 32, line height 1.25, -0.33px | 500 | Capsule Sans Display [Measured] | | displayCapsuleM | 24, 1.35, -0.1px | 500 | Capsule Sans Display [Measured] | | displayCapsuleS | 21, 1.35, -0.1px | 500 | Capsule Sans Display [Measured] | | textL and textLBold | 18, 1.53, -0.25px | 400 and 700 | Capsule Sans Text [Measured] | | textM and textMBold | 15, 1.6, -0.1px | 400 and 700 | Capsule Sans Text [Measured] | | textS and textSBold | 13, 1.53, -0.1px | 400 and 700 | Capsule 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.