# Robinhood UI Study and Hoodshort Concept Report Captured 14 September 2026 from robinhood.com (US locale) at 1440×900, headless Chromium. Concept images were generated in ChatGPT from prompts written after the study. Working name for the product in the concepts is "Hoodshort"; it is a placeholder, not a recommendation. --- ## 1. What Robinhood's design system actually is Extracted from computed styles on robinhood.com/us/en/legend and the homepage. | Token | Value | Where it shows | |---|---|---| | Ground | `#000000` pure black | Every marketing page, Legend product UI | | Panel | `#151719` charcoal | Legend widgets, cards, tables | | Text | `#FFFFFF`, secondary `#BFBFBF`, muted `#808080` | Body, captions | | Accent | **`#CCFF00` chartreuse** | Primary buttons, headline on the Invest page, chart highlights, footer wordmark, active states | | Semantic | Green up / red down (chart candles are chartreuse-green and red) | Watchlist, candles, PnL | | Display type | **Martina Plantijn** (serif), 72px, weight 400 | Every H1: "Powerful, agile trading", "Trade on your time and your terms." | | UI type | **Capsule Sans Text** (geometric sans) | Nav, body, buttons, tables | | Buttons | Pill, 36px radius, chartreuse fill with black text; secondary is outlined pill | "Sign up", "Trade on Legend", "Get started" | | Nav | Slim black bar, logo left, 8 text links, region picker, outlined "Log in", filled "Sign up" | All pages | | Illustration | Two modes: (a) photoreal chrome/metal 3D objects on grey-blue (Crypto, Chain pages), (b) 8-bit pixel art flowers and mascots (homepage) | Hero sections | | Motion | Restrained; scroll-reveal sections, one numeric counter ("Your ideal setup in 00:00:00 seconds") | Legend page | **The Legend product UI itself** (from the marketing screenshots on the Legend page): - Widget-based terminal: watchlist left, chart center, order ticket right, positions bottom. Widgets can be added, resized, and "dynamically linked" so selecting a ticker in one updates the others. - Chart top bar: ticker, price, change, then O/H/L/C/V readouts in red/green, then drawing tools on the right. - Buy/Sell as small toggle chips (grey pills, "Buy" in chartreuse text) directly on the chart, so you can trade from the chart. - Candles in chartreuse-green and red on charcoal; volume as bars below. - Watchlist rows: rank, ticker, sparkline, price, change in absolute and percent, green/red triangle indicators. - Preset layouts and custom layouts; multi-monitor support. - Everything dense but with generous 16-24px padding; nothing decorated, hierarchy comes from type weight and the single accent. **Marketing page pattern** (consistent across Invest, Crypto, Futures, Legend, Chain): - Big serif headline centered, one sentence subhead, one chartreuse pill CTA, then a product visual. - Sections alternate: full-bleed black with 3D or pixel illustration, then charcoal cards in a 2-3 column grid, then a comparison table (crypto fees vs. competitors) rendered as a plain black table with chartreuse highlights. - FAQ accordion, then a chartreuse footer block with a huge black "Robinhood" wordmark. **What to borrow for a memecoin margin product:** 1. Black + charcoal + one chartreuse accent. Do not add a second accent. Long/short use semantic green/red only. 2. Serif for headlines and the one big number (price, portfolio value); sans for everything else. 3. Pill buttons, filled for the primary action, outlined for the secondary. 4. Legend's four-panel terminal layout with linked widgets. Users already know it. 5. Trade-from-chart chips (Long / Short) directly on the chart header. 6. Pixel-art mascots are the bridge between Robinhood's homepage and memecoin culture. Use them on marketing only, never in the terminal. **What to change:** - Robinhood buries risk. A margin product on memecoins must surface liquidation price, margin ratio, funding, and OI cap on the ticket and on every position row. - Add an "OI cap" and "index vs. mark" readout in the chart header; these do not exist on Legend because equities have no such thing. - Replace Buy/Sell with Long/Short, with Short visually distinct (red fill when active) so users never open the wrong side. --- ## 2. Screenshots captured Folder: `screenshots/robinhood/` | File | Page | |---|---| | 01-home-fold.png / 01-home-full.png | Homepage: "Invite friends, get up to $15K in stock" with pixel-art flowers and mascots | | 03-crypto-fold.png / 03-crypto-full.png | Crypto page: chrome chain-link hero, fee comparison table, staking and Earn cards, FAQ, chartreuse footer | | 04-invest-fold.png / 04-invest-full.png | Invest page: chartreuse serif headline "Trade on your time and your terms." | | 04-legend-fold.png / 04-legend-full.png | Legend page: "Powerful, agile trading", six-monitor hero, chart, layouts, watchlist, linking | | 06-legend-charts.png | Legend chart widget close-up (RALI ticker, Buy/Sell chips, OHLCV bar, drawing tools) | | 06-legend-layouts.png | Custom vs. preset layouts section | | 06-legend-watchlist.png | "Ready when you are" watchlist section | | 06-legend-linking.png | "Dynamic linking" dual-monitor section | | 04-chain-fold.png / 04-chain-full.png | Robinhood Chain page: "permissionless, AI-native Layer 2", chrome ring-network illustration | | 05-options-*.png, 05-futures-*.png, 05-wallet-*.png | Options, Futures ("More insight. More speed. Smarter futures tools."), Wallet pages | --- ## 3. ChatGPT concept images Conversation: https://chatgpt.com/c/6aa7d2fa-ea2c-83ec-84e9-d5d391dc72b9 (in your ChatGPT account). Three images were generated. Screenshots of each are in `screenshots/concepts/` if saved; the originals can be downloaded from the conversation. ### Concept 1: Desktop terminal ("Hoodshort Crypto Trading Dashboard") Prompt asked for a Legend-sibling four-panel terminal. Result: - Top nav: logo + BETA chip, Markets / Portfolio / Vault / More, search with ⌘K, wallet chip `0x3f7a…9c2d`. - Left: watchlist with All / Memes / Shortable / Trending tabs; rows for CASHCAT, PONS, FARTCOIN, SPACEHOOD, GIGA, BILLY, WIF, each with mascot avatar, sparkline, price, 24h change, and a chartreuse "Shortable" badge. - Center: CASHCAT chart header showing price, 24h change, Index Price, Funding Rate, Open Interest, OI Cap, a "50x max" chip (should be 5x per the research), timeframe chips, indicators, candles in chartreuse and red, volume bars, "CASHCAT · 15 · Robinhood Chain" label. - Right: LONG / SHORT toggle (SHORT active in red), Market / Limit / Stop tabs, collateral input in USDG with balance, leverage slider 1x–5x at 3x, position size, a stats card with liquidation price, est. funding (1h), est. fees, and a chartreuse "Open short" pill. - Bottom: Open Positions (3) / Orders (2) / History, with Total PnL, Total Margin, Account Equity, Margin Ratio bar, and rows showing side, size, entry, mark, liquidation, PnL, margin ratio bar, funding, Close button. Verdict: strongest of the three. Directly usable as the reference for the app shell. Fix the "50x max" chip and add an OI-cap utilization bar. ### Concept 2: Mobile ("Hoodshort CASHCAT Trading Interface") Two iPhone screens. - Screen 1: token page with a big serif price `$0.01234`, change, chartreuse line chart with volume, timeframe chips, a four-stat row (Mark, Index, Funding, OI Cap), Overview / Markets / News / Community tabs, an About card with chain, contract, supply, market cap, volume, holders, and a sticky bottom bar with "Long" (chartreuse fill) and "Short" (outlined). - Screen 2: "Trade CASHCAT" sheet with LONG / SHORT segmented control (SHORT red), leverage chips 1x 2x 3x 5x, collateral `250 USDG` with 25/50/75/Max chips, position size at 3x, entry, liquidation (red), funding, fees, and a "Swipe to open short" chartreuse control. Verdict: good. The swipe-to-confirm is the right friction for a leveraged short on a phone. The stat row and the red liquidation line do the risk surfacing Robinhood's own app avoids. ### Concept 3: Landing hero ("Neon Crypto Trading Hero Dashboard") - Nav: logo, Markets / Vault / Docs, chartreuse "Launch app". - Serif headline "Short the memes. / Long the ones you believe in." with subhead "Trade memecoins with margin on Robinhood Chain." - Two pills: "Launch app" filled, "Read the docs" outlined. - Angled floating terminal screenshot with glowing chartreuse chart, surrounded by pixel-art cat, frog, and doge mascots with sunglasses and a chartreuse Robinhood-style feather coin. Verdict: on-brand with Robinhood's homepage and immediately legible as a memecoin product. The feather coin should be removed (Robinhood trademark). The mascots work; keep them off the terminal. --- ## 4. Recommended direction - **Shell:** Concept 1 as the desktop app. Build it as a widget grid with linked widgets like Legend. - **Mobile:** Concept 2's two screens as the core loop: token page → trade sheet → swipe to confirm. - **Marketing:** Concept 3's hero, minus the feather. Serif headline, pixel mascots, one chartreuse CTA. - **Risk surfacing everywhere:** liquidation price, margin ratio bar, funding/hour, OI cap utilization. These are the product's honesty layer and the thing Robinhood does not show. - **Naming and marks:** do not use Robinhood's feather, wordmark, or the name "Hood" in a way that implies affiliation. "Hoodshort" was a prompt placeholder only. ## 5. Next steps if you want to proceed 1. Pick a real product name and check trademark conflicts with Robinhood. 2. Turn Concept 1 into a clickable HTML prototype using the token table in section 1 (black, #151719, #CCFF00, serif display, geometric sans, 36px pills). 3. Get the three original PNGs from the ChatGPT conversation into the project folder for reference.