The Robinhood iOS app, dissected. White canvas. Two colors: green-up and orange-down. Tabular figures so the numbers never dance. Confetti only on the trades that matter.
Every Robinhood screen earns its position on an iPhone through the same rules — white canvas, tabular numerics, green-up orange-down, a chart that fills 40% of the viewport before anything else gets to speak.
Account value massive at 32pt-tabular up top, day-change in green or orange directly beneath, then the line chart fills 140pt edge-to-edge. Period tabs (1D…ALL) sit just below. Holdings list ends with tickered avatars and aligned price columns.
Same chart layout, scoped to one ticker. Stats row (Mkt Cap · P/E · Div Yield) tabular. News list below with thumbnails right. Floating Buy / Sell pair fixed to the bottom — green Buy always primary.
Order-type selector (Market / Limit / Stop / Stop Limit) at the top, then a single massive number (shares) center-stage at 64pt. Custom number pad below. "Review Order" green pill anchors the bottom.
Your first trade of the day triggers a confetti burst — 60–80 SwiftUI Canvas-rendered dots fall from the top of the screen with rotation. Honors "Reduce Motion": confetti reduces to a single haptic + green checkmark for accessibility.
This is also the only place the brand allows yellow and purple to appear — confetti pieces sample from the gain green, a celebratory yellow, and a Robinhood Gold gold.
pieces: 60–80
duration: 1.8s
haptic: success
reduceMotion: respect
The Gold upsell card is the single dark surface in the whole light-mode product. Black gradient, radial gold halo top-right, and the only accent gold (#CBA258) in the system. CTA inverts to gold-on-black.
Shows up at three points: portfolio header, account tab, and post-deposit success sheet.
bg: #1A1A1A → #3a3a3a
halo: radial gold
radius: 18pt
Between 4 PM and 8 PM ET, every quote screen wears an orange "🌙 After Hours" indicator. The border on stock tickers shifts to #FF8A00, and the price card carries a small moon glyph + label. Order types restrict to Limit only.
This is the only place orange means something other than "loss" — context wins.
border: #FF8A00
label: AFTER HOURS
order: limit only
Every token Robinhood's iOS app reaches for — surface ladder, type ramp, radius scale, components. The green and orange are absolute: green-up, orange-down, no exceptions.
Two semantic colors do almost all the work: green for gain, orange for loss. White canvas. Black ink. Robinhood Gold for the premium tier — and a controlled moon-orange for after-hours, which is the only orange that isn't a loss.
Capsule Sans in production — Inter as substitute, always heavy. Every numeric token locks font-feature-settings:"tnum". The portfolio value is the only display weight; everything else is meta.
| Token | Sample | Size | Weight | Tracking |
|---|---|---|---|---|
| --portfolio-value | $12,482.07 | 36 / 2.25rem | 800 (tnum) | -1.2px |
| --day-change-loss | ▼ -$42.18 (-0.34%) | 13 / 0.81rem | 700 (tnum) | normal |
| --day-change-gain | ▲ +$2.18 (+1.20%) | 13 / 0.81rem | 700 (tnum) | normal |
| --ticker | AAPL | 14 / 0.88rem | 800 | normal |
| --row-price | $184.72 | 13 / 0.81rem | 700 (tnum) | normal |
| --shares-display | 2 | 64 / 4.00rem | 800 (tnum) | -2px |
| --button | Review Order | 14 / 0.88rem | 800 | normal |
| --meta-row | Apple · 12 shares | 11 / 0.69rem | 600 | normal |
| --stat-label | Mkt Cap | 9.5 / 0.59rem | 600 | 0.4px |
Buttons are full pills. Cards stay quiet at 12px. Charts run edge-to-edge with no clipping. Number-pad keys are 50% — they look like coin slots.
The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.
Two pills, three tags, one chart. The kit is small on purpose.