iOS Design Spec

# Markets, made tappable.

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.

View Design Tokens Explore Surfaces
9:41
AAPL · Apple
$184.72
▲ +$2.18 (+1.20%) Today
1D
1W
1M
3M
1Y
ALL
Mkt Cap
2.84T
P/E
29.2
Div Yield
0.51%
News
CNBC · 2h ago
Apple raises FY guidance on Services strength
Bloomberg · 4h ago
Vision Pro production cut amid weak demand
Sell
Buy
Stock Detail · AAPL
9:41
Investing
$12,482.07
▼ -$42.18 (-0.34%) Today
1D
1W
1M
3M
1Y
ALL
Holdings
A
AAPL
Apple · 12 shares
$184.72
+1.20%
T
TSLA
Tesla · 6 shares
$248.50
-2.18%
N
NVDA
NVIDIA · 8 shares
$842.10
+3.42%
A
AMZN
Amazon · 4 shares
$178.32
-0.85%
₿
BTC
Bitcoin · 0.05
$67,420
+0.92%
Home
Browse
Search
Account
Portfolio
9:41
Buy AAPL
$184.72 · Market open
Market
Limit
Stop
Stop Lim.
Shares
2
Estimated Cost
$369.44
1
2
3
4
5
6
7
8
9
.
0
Review Order
Order Entry
iOS Surface Anatomy

## Three surfaces. Two colors. Numbers everywhere.

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.

### Portfolio

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.

### Stock Detail

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 Entry

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.

Confetti Moment

### The trade gets its own celebration.

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`
Order filled
+2 AAPL
$369.44 · 9:41 AM
★ Robinhood Gold
5% APY on your
uninvested cash
$0 commissions extended 3% IRA match $1,000 instant deposit
Try Gold free for 30 days
Robinhood Gold

### The only place the app goes dark.

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`
After-Hours

### A small moon, a different ruleset.

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`
After Hours
AAPL
Apple Inc.
$184.92
+$0.20 (+0.11%) AH
Extended-hours · Limit orders only · 4:00 PM – 8:00 PM ET
Design System Reference

## The whole vocabulary, in one place.

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.

View Source ↗

### Color

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.

Semantic — Always-on
Gain Green
#00C805
Gain Deep
#00A004
Gain Tint
#E7FBE7
Loss Orange
#FF5000
Loss Tint
#FFEDE3
Neutral
Canvas
#FFFFFF
Ink
#000000
Muted
#787878
Dim
#A8A8A8
Border
#F0F0F0
Gold & After Hours
RH Gold
#CBA258
Gold Soft
#F0DDB5
Gold BG
#1A1A1A
Moon Orange
#FF8A00
Moon Tint
#FFEEDC
Charts
Gain Area
α 0.35→0
Loss Area
α 0.30→0
Gain Stroke
2pt
Loss Stroke
2.2pt
Chart Bed
#F7F7F7

### Typography

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

### Radius

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.

Chart
0
Tag
4px
Period
6px
Tile
8px
Card
12px
Gold
18px
Pill
∞
Keypad
50%

### iOS Spec Strip

The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.

Tab bar
83pt
4 tabs: Home, Browse, Search, Account.
Chart height
140pt
Edge-to-edge. Area fill at 0.25→0 alpha.
Buy/Sell bar
14pt inset
Floating bottom. Buy always green primary.
Keypad
3×4
50% radius circles. Backspace bottom-right.
tnum
required
Every numeric token. No exceptions.
Confetti
60–80
First trade of day. Honors Reduce Motion.
Period tabs
6
1D / 1W / 1M / 3M / 1Y / ALL.
Refresh
15s
Quote poll. WebSocket on detail screens.

### Components

Two pills, three tags, one chart. The kit is small on purpose.

##### Buttons

Review Order Watchlist Sell Try Gold free

##### Inputs

+1.20% -0.34% Gold AH

##### Cards

A
AAPL
Apple · 12 shares
$184.72
+1.20%
★ Gold
5% APY on cash
View source ↗