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.

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/

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.