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
version: alpha name: Robinhood description: "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."
colors: primary: "#00C805" on-primary: "#000000" primary-hover: "#00B504" danger: "#FF5000" ink: "#F5F5F5" ink-muted: "#AAAAAA" canvas: "#1A1A1A" surface-1: "#242424" surface-2: "#2E2E2E" border: "#3A3A3A" gain: "#00C805" loss: "#FF5000" neutral: "#AAAAAA" chart-green: "#00C805" chart-red: "#FF5000" light-canvas: "#FFFFFF" light-ink: "#1A1A1A"
typography: display: fontFamily: "Robinhood Sans, Inter, -apple-system, sans-serif" fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.02em body: fontFamily: "Robinhood Sans, Inter, -apple-system, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 portfolio-value: fontFamily: "Robinhood Sans, Inter, -apple-system, sans-serif" fontSize: 36px fontWeight: 600 lineHeight: 1.0 letterSpacing: -0.01em
spacing: base: 8px scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64]
radius: sm: 4px md: 8px lg: 16px pill: 9999px
shadows: card: "0 2px 8px rgba(0,0,0,0.3)" elevated: "0 8px 24px rgba(0,0,0,0.4)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.4, 0, 0.2, 1)
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.