Robinhood
A consumer fintech platform built on a dark canvas (#1A1A1A for the app, white for web) with Robinhood's signature kelly green (#00C805) marking every positive financial movement — gains, new highs, purchase confirmations. The app aesthetic is game-like and optimistic: large number typography for portfolio value, sparkline charts that pulse green on gains, and a swipe-up gesture for trade confirmation that evokes approval. Marketing uses clean white surfaces with vivid imagery and bold sans-serif headlines. The overall system says: investing is simple, growth is green, and you deserve access.
Color Tokens
1. Visual Theme & Atmosphere
Robinhood democratized retail investing through product design as much as zero commissions. The app's dark canvas elevates the portfolio value display to a hero moment — the large green number at the top of the screen is the first thing users see, and it's either cause for celebration or a motivation to hold. Green and red are the entire semantic vocabulary: they mean gain and loss universally, and Robinhood leans into this binary language completely. The buying experience is deliberately simple — stock page, chart, buy button, swipe to confirm.
2. Color System
The simplest semantic palette in consumer finance:
- Green: #00C805 — gains, buy button, positive deltas, portfolio up
- Red/Orange: #FF5000 — losses, sell confirmation, portfolio down
- Canvas: #1A1A1A in app — rich dark that makes green numbers pop
- Neutral: #AAAAAA — unchanged price, market closed, secondary text
- Web marketing: White canvas with the same green CTA
3. Typography
Robinhood Sans (custom Inter variant) at large portfolio value display sizes — the number hierarchy is the most important typographic decision in the product. Regular UI uses clean system-matching sans. The portfolio value gets its own large-number style at 36px/600 weight — it's a financial dashboard reading, not a body copy element.
4. Components & Patterns
- Stock chart: Full-width sparkline, green line on gains, interactive scrub with price tooltip
- Portfolio header: Large dollar value, smaller gain/loss delta with green or red color
- Stock page: Symbol, name, live price, delta, chart, news feed, financials accordion
- Buy/Sell flow: Large number input with + / - controls, portfolio available label
- Order confirmation: "Swipe to buy" gesture with green fill animation — the signature UX
- Watchlist cards: Compact rows, sparkline thumbnail, price, delta
5. Spacing & Layout
Mobile-first. Full-width components, 16px horizontal page padding. Stock chart takes 40% of viewport height. Bottom tab navigation: 5 icons. Content cards use 12px inner padding, 1px separator lines. Very little wasted space.
6. Motion & Interaction
Portfolio value updates with a number-tick animation. Chart line draws in on load. Buy confirmation swipe has spring-back if not completed. Price alerts pulse on trigger. All interactions optimized for thumb reach and mobile speed.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for