--- id: robinhood name: Robinhood country: US category: fintech homepage: "https://robinhood.com" primary_color: "#00C805" logo: type: simpleicons slug: "robinhood" verified: "2026-06-06" added: "2026-06-06" omd: "0.1" tokens: source: prose-derived extracted: "2026-06-09" colors: primary: "#00C805" primary-hover: "#00B004" primary-tint: "#E6FBE9" canvas-dark: "#0E0E0E" canvas: "#FFFFFF" ink: "#1B1B1B" loss: "#FF5000" warning: "#FFB000" info: "#2E6FF2" gray-50: "#F7F7F7" gray-100: "#EFEFEF" gray-200: "#E0E0E0" gray-400: "#A8A8A8" gray-500: "#8C8C8C" gray-600: "#6B6B6B" gray-700: "#4A4A4A" gray-800: "#2C2C2C" gray-900: "#1B1B1B" typography: family: { sans: "Capsule Sans", mono: "Capsule Sans Mono" } display-hero: { size: 56, weight: 700, lineHeight: 1.07, tracking: -0.02, use: "Marketing hero headlines" } display-lg: { size: 40, weight: 700, lineHeight: 1.15, tracking: -0.02, use: "Section headers" } heading-lg: { size: 30, weight: 700, lineHeight: 1.27, tracking: -0.01, use: "Feature titles, modal headers" } heading: { size: 24, weight: 600, lineHeight: 1.33, tracking: -0.01, use: "Card headings, sub-sections" } subtitle: { size: 18, weight: 600, lineHeight: 1.44, use: "List headers, nav titles" } body-lg: { size: 18, weight: 400, lineHeight: 1.56, use: "Marketing body, explanations" } body: { size: 16, weight: 400, lineHeight: 1.50, use: "Standard reading text" } body-sm: { size: 14, weight: 400, lineHeight: 1.43, use: "Secondary information" } caption: { size: 12, weight: 400, lineHeight: 1.33, use: "Timestamps, disclosures, fine print" } number: { size: 40, weight: 700, tracking: -0.01, use: "Portfolio value, tabular numerals" } spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 96 } rounded: { sm: 8, md: 12, lg: 20, full: 9999 } shadow: card: "0px 1px 3px rgba(0,0,0,0.06)" toast: "0px 8px 24px rgba(0,0,0,0.20)" modal: "0px 16px 48px rgba(0,0,0,0.24)" components: button-primary: { type: button, bg: "#00C805", fg: "#0E0E0E", radius: 9999, padding: "16px 28px", font: "16px/600 Capsule Sans", use: "Primary CTA, dark text on bright green" } button-secondary: { type: button, bg: "#FFFFFF", fg: "#1B1B1B", radius: 9999, padding: "16px 28px", font: "16px/600 Capsule Sans", use: "Outline secondary, 1.5px #E0E0E0 border" } button-tertiary: { type: button, bg: "#FFFFFF", fg: "#00B004", padding: "12px 8px", font: "16px/600 Capsule Sans", use: "Inline links, low-emphasis" } button-destructive: { type: button, bg: "#FF5000", fg: "#FFFFFF", radius: 12, padding: "16px 28px", font: "16px/600 Capsule Sans", use: "Sell confirmation, destructive flows" } input-text: { type: input, bg: "#FFFFFF", fg: "#1B1B1B", radius: 10, padding: "14px 16px", font: "16px/400 Capsule Sans", use: "Standard form input, 1.5px #E0E0E0 border, focus #00C805" } card-standard: { type: card, bg: "#FFFFFF", radius: 16, padding: "20px", use: "Holding, watchlist, account cards, 1px #E0E0E0 border" } card-featured: { type: card, bg: "#0E0E0E", fg: "#FFFFFF", radius: 20, padding: "28px", use: "Promotional, Gold upsell, portfolio hero" } list-row: { type: listItem, radius: 0, padding: "14px 16px", use: "Ticker rows, transaction history, bottom 1px #EFEFEF border" } badge-gain: { type: badge, fg: "#00B004", radius: 8, padding: "3px 8px", font: "13px/600 Capsule Sans Mono", use: "Positive movement indicator" } badge-loss: { type: badge, fg: "#FF5000", radius: 8, padding: "3px 8px", font: "13px/600 Capsule Sans Mono", use: "Negative movement indicator" } badge-neutral: { type: badge, bg: "#EFEFEF", fg: "#4A4A4A", radius: 8, padding: "3px 8px", font: "12px/600 Capsule Sans", use: "NEW, category labels" } badge-gold: { type: badge, fg: "#0E0E0E", radius: 8, padding: "3px 8px", font: "12px/700 Capsule Sans", use: "Robinhood Gold marker, gold gradient" } tab-segmented: { type: tab, bg: "#EFEFEF", fg: "#8C8C8C", radius: 9999, padding: "6px 14px", font: "13px/600 Capsule Sans", active: "Active #FFFFFF bg + #1B1B1B text", use: "Chart timeframe selector" } tab-bottom: { type: tab, bg: "#FFFFFF", fg: "#A8A8A8", font: "11px/500 Capsule Sans", active: "Active #00C805 icon + label", use: "Primary mobile navigation" } toast-default: { type: toast, bg: "#1B1B1B", fg: "#FFFFFF", radius: 12, padding: "14px 18px", font: "14px/500 Capsule Sans", use: "Transient confirmation" } dialog-modal: { type: dialog, bg: "#FFFFFF", radius: 20, padding: "28px", use: "Confirmations, disclosures" } dialog-sheet: { type: dialog, bg: "#FFFFFF", radius: 20, padding: "24px 20px", use: "Trade ticket, order review, pickers, top corners only" } toggle-default: { type: toggle, bg: "#00C805", radius: 9999, use: "Boolean settings, #E0E0E0 off, #FFFFFF thumb" } components_harvested: true --- # Design System Inspiration of Robinhood ## 1. Visual Theme & Atmosphere Robinhood is the American brokerage that turned investing from a gated, mahogany-paneled ritual into something that looks and feels like a consumer app. The brand's visual signature is a single, electric act of defiance: **Robinhood Green (`#00C805`)** — a bright, almost radioactive green that exists nowhere in legacy finance. Where incumbents (Fidelity green, Schwab blue, Vanguard maroon) chose colors that signal old-money permanence, Robinhood chose a color that signals *now* — energetic, optimistic, unmistakably young. The green doesn't whisper trust; it announces access. The 2024 rebrand, developed with **COLLINS**, moved the brand into a more premium, confident register. The hero surfaces lean **dark** — deep near-blacks (`#0E0E0E`, `#1B1B1B`) under which the green vibrates with maximum intensity — punctuated by clean white marketing sections. This dark-mode-first instinct mirrors the trading product itself, where charts and tickers live on black canvases and the green/red of gains and losses carries the entire emotional payload of the interface. The custom typeface **Capsule Sans** is the quiet counterweight to the loud green. Commissioned as a refinement of Maison Neue (Milieu Grotesque), it's a warm, highly-legible geometric grotesque tuned for small mobile sizes, with a custom hooked `R` anchoring the wordmark. It reads as engineered precision without coldness — exactly the tension a brokerage app needs to feel both serious about money and approachable about beginning. **Key Characteristics:** - Robinhood Green (`#00C805`) as the singular brand and interactive accent — electric, not institutional - Dark-first hero surfaces (`#0E0E0E` / `#1B1B1B`) where green reads brightest - Capsule Sans — custom geometric grotesque, tuned for mobile legibility, custom `R` - Financial dualism: green for gains, red for losses, carried as semantic infrastructure - Generous whitespace and large numeric displays — money as the hero element - Restrained, near-flat depth; emphasis through contrast and color, not heavy shadow - Mobile-first at a 390px baseline, scaling to confident full-bleed desktop marketing ## 2. Color Palette & Roles ### Primary - **Robinhood Green** (`#00C805`): The brand. Primary CTAs, active states, brand marks, positive financial movement, links, focus accents. The single loudest element in the system. - **Green Pressed** (`#00B004`): Hover/pressed state for green CTAs — a half-step darker for tactile feedback. - **Green Tint** (`#E6FBE9`): Subtle green-washed backgrounds, success surfaces, informational highlights on light mode. - **Near-Black Canvas** (`#0E0E0E`): Primary dark surface. Hero sections, trading-style backdrops, where green is most electric. - **Pure White** (`#FFFFFF`): Light-mode page background, card surfaces, text on dark. ### Brand (Logo/Marketing) - **Robinhood Green** (`#00C805`): The official brand color — used for the feather/wordmark mark and headline accents. - **Ink Black** (`#1B1B1B`): Secondary brand surface and the darkest practical text color. Warm near-black. ### Semantic (Financial) - **Gain Green** (`#00C805`): Positive returns, "up" tickers, buy confirmations. Shares the brand hue intentionally — growth *is* the brand. - **Loss Red** (`#FF5000`): Negative returns, "down" tickers, sell/destructive actions. A warm orange-red, not a clinical red, to stay on-brand and avoid alarm-system harshness. - **Warning Amber** (`#FFB000`): Pending states, attention-needed, market-closed notices. - **Info Blue** (`#2E6FF2`): Neutral informational accents, educational callouts (Robinhood Learn). ### Neutral Scale - **Gray 50** (`#F7F7F7`): Lightest gray — secondary page background, section bands. - **Gray 100** (`#EFEFEF`): Card fills, disabled surfaces, dividers on white. - **Gray 200** (`#E0E0E0`): Default border color, input borders, separators. - **Gray 400** (`#A8A8A8`): Placeholder text, disabled icon fills. - **Gray 500** (`#8C8C8C`): Caption text, secondary labels, metadata. - **Gray 600** (`#6B6B6B`): Body text on light surfaces. - **Gray 700** (`#4A4A4A`): Emphasized body, sub-headings. - **Gray 800** (`#2C2C2C`): Strong labels. - **Gray 900** (`#1B1B1B`): Primary heading text on light surfaces. ### Surface & Borders - **Border Default**: `#E0E0E0` (gray200). Card borders, input outlines, dividers on light. - **Border Dark**: `#2C2C2C`. Dividers and outlines on dark surfaces. - **Surface Dark Elevated**: `#1B1B1B`. Cards sitting on the `#0E0E0E` canvas. - **Overlay Scrim**: `rgba(0,0,0,0.6)`. Modal/sheet backdrops. ## 3. Typography Rules ### Font Family - **Primary**: `"Capsule Sans", "Capsule Sans Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif` - **Display**: `"Capsule Sans Display", "Capsule Sans", sans-serif` — tighter optical cut for large headlines - **Monospace / Numeric**: `"Capsule Sans Mono", "SF Mono", SFMono-Regular, Menlo, monospace` — tabular figures for tickers and amounts ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|------|--------|-------------|----------------|-------| | Display Hero | Capsule Sans Display | 56px | 700 | 60px (1.07) | -0.02em | Marketing hero headlines | | Display Large | Capsule Sans Display | 40px | 700 | 46px (1.15) | -0.02em | Section headers | | Heading Large | Capsule Sans | 30px | 700 | 38px (1.27) | -0.01em | Feature titles, modal headers | | Heading | Capsule Sans | 24px | 600 | 32px (1.33) | -0.01em | Card headings, sub-sections | | Subtitle | Capsule Sans | 18px | 600 | 26px (1.44) | normal | List headers, nav titles | | Body Large | Capsule Sans | 18px | 400 | 28px (1.56) | normal | Marketing body, explanations | | Body | Capsule Sans | 16px | 400 | 24px (1.50) | normal | Standard reading text | | Body Small | Capsule Sans | 14px | 400 | 20px (1.43) | normal | Secondary information | | Caption | Capsule Sans | 12px | 400 | 16px (1.33) | normal | Timestamps, disclosures, fine print | | Number Display | Capsule Sans Mono | 40px+ | 700 | tight | -0.01em | Portfolio value — tabular numerals | | Ticker Numeric | Capsule Sans Mono | 14-16px | 500 | 1.2 | normal | Price/percent cells — tabular | ### Principles - **Tabular numerals everywhere money lives**: Portfolio values, prices, percentages, and ticker cells use mono/tabular figures so digits never shift width as values update. - **Tight display tracking**: Large headlines pull in to `-0.02em` for a confident, engineered feel; body text stays at normal tracking for legibility. - **Weight restraint**: Capsule Sans ships multiple weights but the UI leans on 400 (body), 600 (emphasis/subtitles), 700 (headings and financial amounts). Avoid 300 in product UI — it loses legibility at mobile sizes. - **Mobile-tuned legibility**: The typeface was refined specifically to hold up at small sizes; never set product body text below 14px. ## 4. Component Stylings ### Buttons Robinhood buttons are pill-to-soft-rounded, high-contrast, and lean on the green as the single primary signal. Marketing surfaces favor full pills; product surfaces favor a softer 8–12px radius. **Primary (Green)** - Background: `#00C805` - Text: `#0E0E0E` (dark text on bright green for max legibility and contrast) - Border: none - Radius: 9999px (marketing) / 12px (product) - Padding: 16px 28px - Font: 16px / 600 / Capsule Sans - Hover: background `#00B004` - Pressed: background `#00A004` + slight scale 0.98 - Disabled: background `#A8A8A8`, text `#FFFFFF` - Use: Primary CTA ("Get started", "Buy", "Sign up") — min-height 52px **Primary on Dark** - Background: `#00C805` - Text: `#0E0E0E` - Border: none - Radius: 9999px - Padding: 16px 28px - Font: 16px / 600 / Capsule Sans - Use: Hero CTA on `#0E0E0E` canvas — green pops at maximum intensity **Secondary (Outline)** - Background: transparent - Text: `#1B1B1B` (light mode) / `#FFFFFF` (dark mode) - Border: 1.5px solid `#E0E0E0` (light) / `#2C2C2C` (dark) - Radius: 9999px / 12px - Padding: 16px 28px - Font: 16px / 600 / Capsule Sans - Hover: border `#A8A8A8`, subtle bg `#F7F7F7` - Use: "Learn more", secondary action paired with a green primary **Tertiary (Text)** - Background: none - Text: `#00B004` (light) / `#00C805` (dark) - Border: none - Padding: 12px 8px - Font: 16px / 600 / Capsule Sans - Use: Inline links and low-emphasis actions **Destructive (Sell)** - Background: `#FF5000` - Text: `#FFFFFF` - Border: none - Radius: 12px - Padding: 16px 28px - Font: 16px / 600 / Capsule Sans - Use: Sell confirmation, destructive flows — paired explicitly, never default ### Inputs **Text Field (default)** - Background: `#FFFFFF` (light) / `#1B1B1B` (dark) - Text: `#1B1B1B` / `#FFFFFF` - Border: 1.5px solid `#E0E0E0` / `#2C2C2C` - Radius: 10px - Padding: 14px 16px - Font: 16px / 400 / Capsule Sans - Placeholder: `#A8A8A8` - Focus: border `#00C805` + 0 0 0 3px `rgba(0,200,5,0.15)` ring - Use: Standard form input **Underline (amount entry)** - Background: transparent - Text: `#1B1B1B` - Border: bottom 2px solid `#E0E0E0` - Radius: 0 - Padding: 8px 0 - Font: 32px / 700 / Capsule Sans Mono (tabular) - Focus: bottom border `#00C805` - Use: Large dollar-amount entry on trade tickets **Error** - Border: 1.5px solid `#FF5000` - Focus ring: `rgba(255,80,0,0.15)` - Helper text below: `#FF5000`, 13px / 400 - Use: Invalid field — paired with one actionable sentence ### Cards **Standard** - Background: `#FFFFFF` (light) / `#1B1B1B` (dark) - Border: 1px solid `#E0E0E0` (light) / none (dark) - Radius: 16px - Padding: 20px - Shadow: `0px 1px 3px rgba(0,0,0,0.06)` (light) / none (dark) - Use: Holding, watchlist, account cards — the workhorse surface **Featured / Hero Card** - Background: `#0E0E0E` - Text: `#FFFFFF` - Border: none - Radius: 20px - Padding: 28px - Accent: green data/CTA on dark - Use: Promotional / Gold upsell / portfolio hero **List Row** - Background: transparent - Border: bottom 1px solid `#EFEFEF` (light) / `#2C2C2C` (dark) - Radius: 0 - Padding: 14px 16px - Use: Ticker rows, transaction history — name left, tabular price/percent right ### Badges / Pills **Gain** - Background: `rgba(0,200,5,0.12)` - Text: `#00B004` - Radius: 8px - Padding: 3px 8px - Font: 13px / 600 / Capsule Sans Mono - Use: "+2.4%" positive movement indicator **Loss** - Background: `rgba(255,80,0,0.12)` - Text: `#FF5000` - Radius: 8px - Padding: 3px 8px - Font: 13px / 600 / Capsule Sans Mono - Use: "-1.8%" negative movement indicator **Neutral / Tag** - Background: `#EFEFEF` - Text: `#4A4A4A` - Radius: 8px - Padding: 3px 8px - Font: 12px / 600 / Capsule Sans - Use: "NEW", category labels **Gold (premium)** - Background: linear-gradient `#C9A227 → #E8C84A` - Text: `#0E0E0E` - Radius: 8px - Padding: 3px 8px - Font: 12px / 700 / Capsule Sans - Use: Robinhood Gold marker ### Tabs **Segmented (timeframe)** - Background: `#EFEFEF` (light) / `#1B1B1B` (dark) - Text: `#8C8C8C` - Radius: 9999px - Padding: 6px 14px - Active: `#FFFFFF` bg + `#1B1B1B` text (light); on dark, active text `#00C805`, no fill - Font: 13px / 600 / Capsule Sans - Use: Chart timeframe (1D / 1W / 1M / 3M / 1Y / ALL) **Bottom Tab (mobile nav)** - Background: `#FFFFFF` / `#0E0E0E` - Active: `#00C805` icon + label - Inactive: `#A8A8A8` - Font: 11px / 500 / Capsule Sans - Use: Primary mobile navigation ### Toasts **Default** - Background: `#1B1B1B` - Text: `#FFFFFF` - Radius: 12px - Padding: 14px 18px - Shadow: `0px 8px 24px rgba(0,0,0,0.20)` - Font: 14px / 500 / Capsule Sans - Use: Transient confirmation ("Order placed"). Order *fills* get a dedicated screen, not a toast. ### Dialogs **Centered Modal** - Background: `#FFFFFF` / `#1B1B1B` - Radius: 20px - Padding: 28px - Shadow: `0px 16px 48px rgba(0,0,0,0.24)` - Use: Confirmations, disclosures **Bottom Sheet** - Background: `#FFFFFF` / `#0E0E0E` - Radius: 20px (top corners only) - Padding: 24px 20px - Drag handle: 36px × 4px `#E0E0E0`, centered top - Use: Trade ticket, order review, pickers — the primary mobile overlay pattern ### Toggles **Default** - Background: `#00C805` (on) / `#E0E0E0` (off) - Radius: 9999px - Thumb: `#FFFFFF` 20px circle, `0px 1px 2px rgba(0,0,0,0.15)` shadow - Use: Boolean settings, notification preferences **Tier 1 sources:** https://robinhood.com (live production site, verified via live DOM getComputedStyle). ## 5. Layout Principles ### Spacing System - Base unit: 8px - Common values: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 96px - Product horizontal padding: 16px (mobile), 20px (tablet) - Marketing section vertical rhythm: 96px+ between major bands ### Grid & Container - Product baseline: 390px mobile width, single-column - Marketing: 12-column grid, max content width ~1200px, centered - Charts: full-bleed width, fixed aspect ratio, edge-to-edge on mobile - Lists: full-width rows, name left-aligned, tabular numerics right-aligned ### Whitespace Philosophy - **Money is the hero**: Portfolio value sits in large type with generous surrounding space — the single most important number on any screen gets room to breathe. - **Marketing is spacious; product is efficient**: Landing pages use editorial whitespace and full-bleed imagery; the trading product is tighter and data-dense where it counts. - **Green is rationed**: Empty space lets the one green element command attention. Crowding the green dilutes the brand signal. ### Border Radius Scale - Compact (8px): Badges, pills, inline tags - Standard (10–12px): Inputs, product buttons, small cards - Comfortable (16px): Standard cards - Large (20px): Hero cards, modals, bottom sheets - Pill (9999px): Marketing CTAs, segmented controls, toggles ## 6. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | Flat (Level 0) | No shadow | Dark surfaces, inline elements, list rows | | Subtle (Level 1) | `0px 1px 3px rgba(0,0,0,0.06)` | Cards on light, slight lift | | Standard (Level 2) | `0px 4px 12px rgba(0,0,0,0.10)` | Dropdowns, popovers | | Elevated (Level 3) | `0px 8px 24px rgba(0,0,0,0.20)` | Toasts, floating panels | | Modal (Level 4) | `0px 16px 48px rgba(0,0,0,0.24)` | Dialogs, bottom sheets | **Shadow Philosophy**: Robinhood is near-flat by instinct. On dark surfaces, elevation is communicated by *surface lightness* (a `#1B1B1B` card on a `#0E0E0E` canvas) rather than shadow. On light surfaces, shadows are soft, neutral, single-layer. Depth never competes with the green — color and contrast carry hierarchy, not drop shadows. ### Blur Effects - Sticky nav applies a backdrop blur (`backdrop-filter: blur(12px)`) over a translucent dark/light fill on scroll. - Bottom-sheet scrims use a plain `rgba(0,0,0,0.6)` dim, no blur, to keep trade data crisp behind. ## 7. Do's and Don'ts ### Do - Use Robinhood Green (`#00C805`) for the single most important action on a screen - Put dark text (`#0E0E0E`) on green buttons — never white, which fails contrast - Use tabular/mono figures for all prices, percentages, and portfolio values - Let green appear against dark (`#0E0E0E`) where it reads most electric - Show gains in green (`#00C805`), losses in warm red (`#FF5000`) - Keep marketing CTAs as full pills; product buttons at 10–12px radius - Give the headline portfolio number generous surrounding whitespace ### Don't - Don't use multiple greens — there is one brand green; don't invent shades for decoration - Don't put white text on the green button (contrast and brand violation) - Don't use a harsh pure-red (`#FF0000`) for losses — the system red is warm `#FF5000` - Don't crowd the green with competing accent colors — ration it - Don't set product body text below 14px or use weight 300 in UI - Don't add heavy multi-layer shadows — depth comes from surface lightness and contrast - Don't mix variable-width and tabular numerals in the same data column ## 8. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile (Primary) | <600px | Single column, 390px product baseline, full-bleed charts | | Tablet | 600–1024px | Two-column marketing, wider cards, side margins | | Desktop | >1024px | 12-col grid, max ~1200px content, full-bleed hero imagery | ### Touch Targets - Buttons: min-height 52px (primary), 44px (compact) - List rows: minimum 56px row height for tickers/transactions - Segmented timeframe controls: 36px tall, generous horizontal hit area ### Collapsing Strategy - Desktop marketing hero collapses to a single-column stacked layout on mobile - Trade actions live in a bottom sheet on mobile, a right-side panel on desktop - Sticky bottom CTA bar (Buy/Sell) with safe-area insets on mobile product - Horizontal scrolling carousels for discover/watchlist sections ### Image Behavior - Charts: full-width, responsive, fixed aspect ratio, edge-to-edge on mobile - Brand/marketing imagery: full-bleed, often on dark backgrounds with green accents - Company logos in lists: 36–40px circular, consistent sizing ## 9. Agent Prompt Guide ### Quick Color Reference - Primary CTA: Robinhood Green (`#00C805`) - CTA Hover: Green Pressed (`#00B004`) - CTA Text: Near-Black (`#0E0E0E`) - Dark Canvas: Near-Black (`#0E0E0E`) - Light Background: White (`#FFFFFF`) - Surface band: Gray 50 (`#F7F7F7`) - Heading text: Ink (`#1B1B1B`) - Body text: Gray 600 (`#6B6B6B`) - Caption text: Gray 500 (`#8C8C8C`) - Placeholder: Gray 400 (`#A8A8A8`) - Border: Gray 200 (`#E0E0E0`) - Gain/Positive: Green (`#00C805`) - Loss/Negative: Warm Red (`#FF5000`) - Warning: Amber (`#FFB000`) ### Example Component Prompts - "Create a portfolio header: dark `#0E0E0E` bg, white label 14px weight 400, value 40px weight 700 in Capsule Sans Mono tabular, green `#00C805` '+$1,240.50 (+2.4%)' below in 16px mono." - "Build a primary CTA: `#00C805` bg, `#0E0E0E` text, 16px weight 600, min-height 52px, full pill radius. Hover `#00B004`, pressed scale 0.98." - "Design a ticker row: full-width 56px, company logo 36px circle left + symbol 16px weight 600 + name 13px `#8C8C8C`. Right: price 16px mono + percent pill (gain `rgba(0,200,5,0.12)` bg `#00B004` text / loss `rgba(255,80,0,0.12)` bg `#FF5000` text)." - "Create an amount-entry field: transparent bg, 2px bottom border `#E0E0E0`, value 32px weight 700 Capsule Sans Mono, focus bottom border `#00C805`." - "Design a chart timeframe segmented control: `#EFEFEF` track, pill radius, items 1D/1W/1M/3M/1Y/ALL. Active: white fill + `#1B1B1B` text. Inactive `#8C8C8C`, 13px weight 600." ### Iteration Guide 1. Use the Capsule Sans stack; fall back to Helvetica Neue / system sans 2. Primary interactive and brand color is `#00C805` — only one green, rationed 3. Green buttons carry dark `#0E0E0E` text, never white 4. Financial numbers: tabular/mono figures, 700 weight for headline values 5. Gains green `#00C805`, losses warm red `#FF5000` — never harsh `#FF0000` 6. Dark surfaces use lightness for elevation; light surfaces use soft single shadows 7. Mobile-first at 390px, 16px horizontal padding; marketing goes full-bleed --- ## 10. Voice & Tone Robinhood speaks like a confident friend who demystifies money without dumbing it down — direct, encouraging, jargon-light, and quietly anti-establishment. The founding promise is in the name: democratizing finance for all. Copy is plain-spoken and active, favoring short imperatives. It celebrates beginning ("Start with as little as $1") and access ("Investing for everyone") over wealth-flex bravado. Disclosures are present and precise — this is a regulated brokerage — but kept out of the way of the primary message. | Context | Tone | |---|---| | CTAs | Short imperative verbs (`Get started`, `Buy`, `Learn more`, `Sign up`) | | Headlines | Bold, declarative, access-oriented (`Investing for everyone`, `Join a new generation of investors`) | | Success | Plain past-tense confirmation (`Order placed`, `Transfer complete`). No exclamation overload. | | Error messages | Specific, blameless, actionable. Never a bare `Something went wrong`. | | Onboarding | Second-person, encouraging, one idea per step (`Start with as little as $1`) | | Financial amounts | Exact, comma-separated, currency symbol prefixed: `$1,240.50` — never rounded on primary surfaces | | Disclosures | Plain-English regulatory tone; accurate but unobtrusive footnotes | **Forbidden moves.** No condescension or finance-bro swagger. No "guaranteed returns" language (regulatory and brand violation). No rounding money on primary surfaces. Avoid `Oops` and cute error voice on money screens — clarity over personality where dollars are involved. ## 11. Brand Narrative Robinhood was founded in 2013 by **Vladimir Tenev** and **Baiju Bhatt**, two Stanford physics graduates who had built high-frequency trading infrastructure for Wall Street firms and realized the actual cost of executing a trade was near zero — yet incumbent brokerages charged retail investors $5–$10 per trade. The thesis was a direct moral argument encoded in the name: the tools of finance had been hoarded by the wealthy, and Robinhood would take from that asymmetry and give access back to everyone. **Commission-free trading** was the wedge; the app launched publicly in 2015 to a waitlist of nearly a million people. The brand's entire visual language descends from that founding rejection. Legacy finance dressed itself in navy, maroon, and serif gravitas — colors and fonts engineered to signal *we have always been here and always will be*. Robinhood chose **electric green (`#00C805`)**, a color with no heritage in finance, precisely because it had no heritage. It reads as a startup, a growth chart, a "go" signal — optimism rendered as a single hue. The feather mark evokes the legend's arrow and lightness; the name does the rest of the storytelling. The 2024 rebrand with **COLLINS** matured this energy without abandoning it. As Robinhood expanded from a single commission-free-stocks app into a multi-product platform — options, crypto, retirement, Robinhood Gold, a cash card, and emerging agentic and prediction-market features — the identity needed to hold both the scrappy access story and a more premium, durable register. The dark surfaces, the refined custom Capsule Sans, and the disciplined rationing of the green are the answer: still defiant, now grown up. What Robinhood refuses: the mahogany seriousness of legacy brokerages, the intimidation of Bloomberg-terminal density, and the gatekeeping of high account minimums. It occupies a deliberate middle — serious enough to be trusted with real money, accessible enough that a 22-year-old's first-ever dollar of investing feels like it belongs to them. ## 12. Principles 1. **One green, rationed.** There is a single brand green (`#00C805`). It marks the most important action and positive movement — nothing else. Inventing decorative green shades dilutes the entire signal. 2. **Money is the hero element.** The headline portfolio number gets the largest type, tabular figures, and the most surrounding whitespace on any screen. Everything else supports it. 3. **Access over flex.** Copy and design celebrate beginning ("$1 to start") over displays of wealth. The brand is for the person making their first trade, not bragging about their last. 4. **Dark makes green electric.** Hero and emotional moments live on `#0E0E0E` so the green reads at maximum intensity. Light mode is for clarity; dark mode is for impact. 5. **Numbers are typography.** Prices, percentages, and balances use tabular/mono figures with the same care as display headlines — digits never jitter as values update. 6. **Restraint is the grown-up move.** Near-flat depth, one accent color, disciplined type weights. The 2024 maturity came from removing, not adding. 7. **Gains and losses are infrastructure.** Green-up / warm-red-down is a semantic contract that runs through every surface; it is never repurposed for decoration. 8. **Trust through precision, warmth through tone.** Numbers are exact and disclosures honest (the trust); voice is plain and encouraging (the warmth). Both, always. ## 13. Personas *Personas below are fictional archetypes informed by publicly described US retail-investing segments, not individual people.* **Marcus, 24, Austin.** First job out of college, software support. Robinhood is the first investing app he's ever opened — he started with $50 in an index ETF after seeing a friend's screenshot. Checks his portfolio 3–4 times a day, mostly for the dopamine of the green number. Intimidated by traditional brokerage interfaces; chose Robinhood because it "looked like an app, not a bank." Reads the percent change before anything else. Would churn instantly if the app felt like work. **Priya, 31, Jersey City.** Product designer with a stable income, contributing to a Roth IRA and dabbling in options. Uses Robinhood Gold for the higher interest on uninvested cash. Values the clean dark-mode charts and fast order entry. Skeptical of hype — ignores meme-stock noise — but appreciates that the interface respects her enough to surface real data without condescension. Tabular-clean numerics and honest disclosures are why she trusts it. **Dré, 19, Atlanta.** College sophomore, treats investing like a learning hobby. Started through Robinhood Learn articles, buys fractional shares of companies he uses daily. Mobile-only, never touches a desktop. The "$1 to start" framing is exactly why he's here — no other broker made it feel possible. Sensitive to anything that reads as a sales pitch; trusts the app because it has never made him feel small for starting tiny. ## 14. States | State | Treatment | |---|---| | **Empty (no holdings)** | Friendly one-line `#6B6B6B` body explaining the screen plus a green primary CTA (`Get started` / `Make your first trade`). Encouraging, never `No data`. | | **Empty (filtered)** | Single `#8C8C8C` caption line (`No results match your filter`). No CTA — user resets the filter. | | **Loading (first paint)** | Skeleton blocks at `#EFEFEF` (light) / `#1B1B1B` (dark) matching final layout. Portfolio values show `--` until resolved — never a fake skeleton number. | | **Loading (refresh)** | Subtle green `#00C805` pull spinner. Content stays visible with prior values; no blocking overlay. | | **Error (inline field)** | 1.5px `#FF5000` border + `rgba(255,80,0,0.15)` focus ring, one actionable sentence below in `#FF5000` 13px. | | **Error (toast)** | `#1B1B1B` bg, white 14px 500 text, ~4s auto-dismiss, bottom inset. One sentence, no cute voice. | | **Error (blocking)** | Reserved for outage/market-data failure. Centered `#1B1B1B` 18px weight 600 message + green retry button. No illustration on money screens. | | **Success (order placed)** | Toast for routine submission. **Order filled** gets a dedicated confirmation screen — green checkmark, exact filled price/quantity, tabular amount. Fills are not toasts. | | **Gain/Loss live update** | Value and percent recolor in place: green `#00C805` up, warm red `#FF5000` down, with a brief flash, never a cross-fade between numbers. | | **Skeleton** | `#EFEFEF` / `#1B1B1B` blocks at exact final dimensions, 1.2s shimmer with low-opacity highlight. Component-matched radius. Never on live financial amounts. | | **Disabled** | Button bg `#A8A8A8`, text white, no pointer. Inputs keep `#E0E0E0` border so geometry stays stable when re-enabled. | | **Market closed** | Amber `#FFB000` caption banner (`Market closed`) above the trade ticket; trade button stays available for queued/extended-hours orders where applicable. | ## 15. Motion & Easing **Durations** (named, not raw milliseconds): | Token | Value | Use | |---|---|---| | `motion-instant` | 0ms | Toggle flips, immediate state changes | | `motion-fast` | 150ms | Hover, focus, press overlays, small reveals | | `motion-standard` | 250ms | Default — sheet opens, tab switches, card expand | | `motion-slow` | 400ms | Emphasized — success checkmark, onboarding advances | | `motion-page` | 320ms | Full-screen route transitions | **Easings:** | Token | Curve | Use | |---|---|---| | `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Appearing — sheets, toasts, screen pushes | | `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Leaving — dismissals, pops | | `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way — collapsibles, tab content | | `ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Reserved — order-filled success checkmark only | **Signature motions.** 1. **Value tick.** When a price or portfolio value updates, the digit animates in place with a brief color flash (green up `#00C805` / warm red down `#FF5000`) over `motion-fast`. Money is never cross-faded between two values — a flickering number looks like a bug, not a market. 2. **Chart draw-in.** On load, the price line draws left-to-right over `motion-slow` with `ease-standard`, the area gradient fading up beneath it. Reinforces "growth" as a felt motion, not just a color. 3. **Bottom-sheet trade ticket.** Rises from `y+40px` with `motion-standard / ease-enter` and a synchronized scrim fade to `rgba(0,0,0,0.6)`. Dismissal uses `motion-fast / ease-exit` — leaving feels lighter than entering. 4. **Order-filled checkmark.** The one place `ease-spring` is licensed: the confirmation checkmark draws over `motion-slow` with a single confident overshoot. Everywhere else, standard easing — overshoot on routine UI would feel unserious for money. 5. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse toward `motion-instant`, slides become fades, and the chart renders fully drawn. Stays usable; just less kinetic. --- Source: https://oh-my-design.kr/design-systems/robinhood · Raw twin of references/robinhood/DESIGN.md Install 221 verified references for your AI coding agent: npx oh-my-design-cli install-skills