A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
9type steps
2radius steps
8pxspacing base
Robinhood, in one page
Robinhood is a brokerage rendered as a clean tech consumer product. The canvas is white, the chart is the hero, and the entire interface revolves around a single recurring motif: a giant line graph showing your portfolio value, rendered in Robinhood Green when up and Robinhood Red when down. Where Schwab, Fidelity, and the rest of legacy brokerage feel like 1990s financial software with spreadsheet density, Robinhood reduces the act of "checking your portfolio" to a single screen — a number, a curve, and a buy/sell button. The radical commitment to simplicity is the brand.
The accent is Robinhood Green (#00C805) — a vivid, slightly-yellow lime green pulled from the original 2014 brand identity. It carries the upward portfolio movement, the chart line when the day is green, the "Trading" badge on profitable positions, and the buy-button gradient. Its counter is Robinhood Red (#FF5000) — actually orange, not pure red, deliberately differentiated from the legacy financial-software red because Robinhood wanted to feel friendlier even on the downside. Together green/orange render every chart, every position card, every notification: portfolio is up (green) or portfolio is down (orange).
Typography is Capsule Sans Text, the proprietary face Robinhood commissioned from type foundry XYZ Type around 2021 as part of their broader brand evolution. It's a contemporary geometric sans with a slight humanist warmth — a tall x-height, open apertures, generous letter spacing on numerics. Before Capsule, Robinhood used a customized version of Apercu and Helvetica; the move to Capsule was about owning the typographic system. Tabular figures throughout: every price, every percentage, every share count uses tabular numerals so columns of numbers align visually — this matters on a brokerage app where the user's eye is constantly scanning vertical columns of prices.
Key Characteristics:
- White canvas (
#FFFFFF) with#F7F7F7for subtle section fills — clean tech-product aesthetic - Robinhood Green (
#00C805) for upward movement; Robinhood Red (#FF5000) — actually orange — for downward - Giant portfolio chart on the Home tab — line graph filling 30-40% of the viewport, with a draggable scrubber
- 1D / 1W / 1M / 3M / YTD / 1Y / 5Y / ALL chart-range chips below the chart
- "Buying power" + portfolio value displayed in giant Capsule Sans 40-48pt at the top of every Investing screen
- Bottom tab bar: Investing / Search / Crypto / Cash / Account — 5 tabs, labeled
- Position cards as compact horizontal rows with ticker / shares / market value / day change
- Capsule Sans Text everywhere; tabular numerals on all prices and percentages
- Minimal shadows — almost flat — the chart is the visual hero, UI chrome recedes
- Dark mode is a true black variant — the chart's green line is even more electric on black
Do's and don'ts
Do
- Use
#00C805(Robinhood Green) for all upward portfolio movement, buy CTAs, profitable positions - Use
#FF5000(Robinhood Red — orange) for downward movement and loss states — note this is orange, NOT red - Use a true red
#E62232only for hard error states (order failed, system error) — keep it distinct from the loss orange - Render every $-amount and every percentage in Capsule Sans Text with tabular numerals
- Use Capsule Sans Display (40pt+ Bold) for the hero portfolio value at the top of the Investing tab
- Track ticker symbols (AAPL, GOOGL) at +0.3pt letter spacing — they're branded micro-monograms
- Make the chart line 2pt stroke in the day's color (green or orange) with no fill below
- Keep the Trade button black with white text — the universal CTA is achromatic; green/orange are reserved for Buy/Sell within the trade flow
- Use pure black
#000000for primary text — Robinhood's clean tech-product aesthetic depends on this - Keep shadows minimal (0.04 opacity) — the app is essentially flat; the chart is the only visual lift
Don't
- Don't use green for a down number or orange for an up number — color is bound to direction
- Don't use legacy red
#FF0000for losses — Robinhood Red is specifically orange (#FF5000) - Don't add gradients to the chart line area — modern Robinhood is just the line, no fill
- Don't render numbers in proportional figures — always tabular numerals
- Don't crowd position rows below 56pt — the data density is already at its limit
- Don't use chart line color for non-chart UI — keep green/orange semantic to portfolio movement
- Don't soften primary text to gray —
#000000is the brand-correct black - Don't use heavy shadows or elevation — Robinhood is flat
- Don't add a fill or border to the day-change pill — it's just colored text inline
- Don't dim inactive tab icons too aggressively —
#9B9EA3is the correct inactive gray (still readable)
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Robinhood design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Robinhood Green: #00c805
- Green Dim: #21ce99
- Green Pressed: #00a904
- Green Background: #e6f9e0
- Robinhood Red: #ff5000
- Red Background: #ffede5
- Canvas White: #ffffff
- Surface Gray: #f7f7f7
- Surface Gray 2: #efefef
- Divider: #e6e6e6
Type:
- families: Capsule Sans Text, Capsule Sans Display, Inter
- scale: 10, 11, 13, 15, 16, 17, 18, 22, 40
- weights: 400, 500, 600, 700
Shape:
- radius: 8, 12
Spacing: 8, 12, 14, 32
Rules:
- Use `#00C805` (Robinhood Green) for all upward portfolio movement, buy CTAs, profitable positions
- Use `#FF5000` (Robinhood Red — orange) for downward movement and loss states — note this is orange, NOT red
- Use a true red `#E62232` only for hard error states (order failed, system error) — keep it distinct from the loss orange
- Render every $-amount and every percentage in Capsule Sans Text with tabular numerals
- Use Capsule Sans Display (40pt+ Bold) for the hero portfolio value at the top of the Investing tab
- Track ticker symbols (AAPL, GOOGL) at +0.3pt letter spacing — they're branded micro-monograms
Avoid:
- Don't use green for a down number or orange for an up number — color is bound to direction
- Don't use legacy red `#FF0000` for losses — Robinhood Red is specifically orange (`#FF5000`)
- Don't add gradients to the chart line area — modern Robinhood is just the line, no fill
- Don't render numbers in proportional figures — always tabular numerals
- Don't crowd position rows below 56pt — the data density is already at its limit
- Don't use chart line color for non-chart UI — keep green/orange semantic to portfolio movement
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Robinhood Green (
#00C805): Up days, buy CTAs, profitable positions, success states. - Green Dim (
#21CE99): Older heritage green still seen on splash and some chart fills. - Green Pressed (
#00A904): Active/pressed state on Buy buttons. - Green Background (
#E6F9E0): Tinted background for "Day's gain" pills, success banners.
Counter
- Robinhood Red (
#FF5000): Down days, sell CTAs (subtle), loss states. NOTE: This is actually a saturated orange, not red — deliberately differentiated. - Red Background (
#FFEDE5): Tinted background for "Day's loss" pills.
Canvas, Surfaces & Dividers
- Canvas White (
#FFFFFF): Primary canvas everywhere on light mode. - Surface Gray (
#F7F7F7): Section backgrounds, watchlist row press states. - Surface Gray 2 (
#EFEFEF): Input field fill, settings rows. - Divider (
#E6E6E6): Hairline row dividers in lists. - Shadow Black (
rgba(0,0,0,0.04)): Very subtle shadows only — Robinhood is essentially flat.
Text
- Text Primary (
#000000): Primary text — position titles, prices, screen titles. - Text Secondary (
#5C6166): Secondary text — share counts, dates, ticker symbols when grayed. - Text Tertiary (
#9B9EA3): Tertiary text — placeholders, disabled labels. - Text Muted (
#C2C5CA): Skeleton state, very faded labels.
Semantic
- Success Green (
#00C805): Same as primary — purchase complete, alert success. - Error Red (
#E62232): TRUE red — used for hard error states (order failed), distinct from the Robinhood Red orange. - Warning Yellow (
#FFB800): Pending order, market closed indicator. - Info Blue (
#1D6FF2): Used sparingly for educational links and tooltips.
Crypto Accents
- Bitcoin Orange (
#F7931A): On Bitcoin position cards and the Crypto tab. - Ethereum Purple (
#627EEA): On Ethereum position cards.
Dark Mode
Robinhood introduced dark mode in 2019. The dark canvas is a deep black, and the green line glows electrically.
- Dark Canvas (
#000000): Primary dark background. - Dark Surface 1 (
#181B1F): Cards, sheets, watchlist rows. - Dark Surface 2 (
#23272D): Pressed states, chip fills. - Dark Divider (
#2D3138): Hairlines. - Dark Text Primary (
#FFFFFF): Inverted text. - Dark Text Secondary (
#A4A8AD): Inverted secondary. - Robinhood Green (dark) (
#00C805): Identical — the green reads electric on black.
Type scaleRead the full spec
Font Family
- Primary:
Capsule Sans Text(proprietary, drawn by XYZ Type for Robinhood ~2021) - Display variant:
Capsule Sans Display— used for hero portfolio values at 40pt+ - Weights available: Regular (400), Medium (500), Semibold (600), Bold (700)
- Tabular figures: enabled by default on all price / percentage / share / count text — non-negotiable
- Fallback stack:
-apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', sans-serif - Google Fonts substitute:
Inter(closest match), withtabular-numsfont-feature-setting
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Portfolio Hero | Capsule Sans Display | 40pt | 700 | 1.0 | -0.5pt | "$24,847.93" at top of Investing tab — TABULAR |
| Day Change Hero | Capsule Sans Text | 16pt | 500 | 1.2 | 0pt | "+$847.93 (+3.52%) Today" beneath the portfolio value |
| Screen Title | Capsule Sans Text | 22pt | 700 | 1.15 | -0.2pt | "Investing", "Crypto", "Cash" — left-aligned at top |
| Section Header | Capsule Sans Text | 18pt | 600 | 1.2 | -0.1pt | "Stocks", "Crypto", "Options", "Lists" |
| Position Title | Capsule Sans Text | 16pt | 600 | 1.3 | 0pt | "Apple Inc." — full company name |
| Ticker Symbol | Capsule Sans Text | 13pt | 500 | 1.3 | 0.3pt | "AAPL" — tracked slightly wider |
| Position Value | Capsule Sans Text | 17pt | 500 | 1.2 | 0pt | "$1,247.92" — TABULAR |
| Position Change | Capsule Sans Text | 13pt | 500 | 1.3 | 0pt | "+$24.13 (+1.97%)" — TABULAR, colored green/orange |
| Chart Axis Label | Capsule Sans Text | 11pt | 500 | 1.0 | 0.2pt | "9:30 AM" timestamps on the chart axis |
| Body | Capsule Sans Text | 15pt | 400 | 1.4 | 0pt | About-the-stock paragraph, news previews |
| Body Small | Capsule Sans Text | 13pt | 400 | 1.4 | 0pt | News article meta, settings descriptions |
| Button Primary | Capsule Sans Text | 16pt | 600 | 1.0 | 0pt | "Trade", "Buy", "Sell" |
| Range Chip | Capsule Sans Text | 13pt | 600 | 1.0 | 0.3pt | "1D / 1W / 1M" chart-range labels |
| Tab Label | Capsule Sans Text | 10pt | 600 | 1.0 | 0.2pt | Bottom tab bar labels |
| All-Caps Section | Capsule Sans Text | 11pt | 700 | 1.2 | 0.6pt | "BUYING POWER", "TODAY'S RETURN" — small caps headers |
Principles
- Tabular numerals everywhere: Every price, percentage, share count, and money figure uses tabular-nums. This is the single most important typography rule on the app — columns of numbers must align visually as the user scrolls a watchlist.
- Capsule Sans Display for hero portfolio values: The 40pt top-of-screen number uses the Display variant (slightly tighter, more confident); body text uses Capsule Sans Text.
- Tracked-wide ticker symbols: AAPL, GOOGL, BTC render at 13pt with +0.3pt letter spacing — Robinhood treats ticker symbols as branded micro-monograms.
- Pure black on white for primary: Robinhood uses
#000000for primary text, not a softened gray — this is a clean, modern tech-product choice, deliberate counterpoint to legacy brokerages. - Green/orange semantic always: Numeric color is bound to direction (up = green, down = orange), never decorative — never use green on a down number.
Components and layoutRead the full spec
Buttons
Primary Trade CTA ("Trade", "Buy AAPL")
- Background:
#000000(NOT green — Robinhood uses black for the universal Trade button; green is reserved for upward movement) - Text:
#FFFFFF, Capsule Sans 16pt weight 600 - Padding: 14pt vertical, 24pt horizontal
- Corner radius: 8pt
- Height: 48pt minimum
- Pressed: background
#1A1A1A, scale 0.98 - Haptic:
.impactOccurred(.medium)on Buy / Sell confirm
Buy Button (within Trade modal)
- Background:
#00C805(Robinhood Green) - Text:
#FFFFFF, Capsule Sans 16pt weight 600 - Same dimensions as primary
- Pressed:
#00A904
Sell Button (within Trade modal)
- Background:
#FF5000(Robinhood Red — orange) - Text:
#FFFFFF, Capsule Sans 16pt weight 600 - Same dimensions
Chart Range Chip (1D / 1W / 1M)
- Container: 36pt × 28pt
- Background: transparent
- Text:
#5C6166Capsule Sans 13pt weight 600 letter-spaced +0.3pt - Active state: text color flips to the chart line color (
#00C805if up,#FF5000if down); a 2pt underline appears beneath in the same color - Tap target: 44pt minimum width
Secondary Outline Button ("Set Alert", "Add to List")
- Background: transparent
- Border: 1pt
#E6E6E6 - Text:
#000000, Capsule Sans 15pt weight 500 - Padding: 12pt vertical, 20pt horizontal
- Corner radius: 8pt
Cards & Containers
Portfolio Hero Block (top of Investing)
- Container: full-width, no card chrome, just space
- Layout: "BUYING POWER" all-caps label in Capsule Sans 11pt 700 +0.6pt letter-spacing
#5C6166→ portfolio value "$24,847.93" in Capsule Sans Display 40pt 700#000000tabular → day change "+$847.93 (+3.52%) Today" in Capsule Sans 16pt 500#00C805(green) or#FF5000(orange) - 24pt horizontal margin
- Vertical spacing: 8pt between label and value, 4pt between value and day change
Portfolio Chart
- Width: full-bleed (extends to screen edges)
- Height: 200-240pt
- Line: 2pt stroke,
#00C805(green) if today's change is positive,#FF5000(orange) if negative - No fill below the line (early Robinhood used a gradient fill; modern Robinhood is just the line)
- X-axis: 11pt timestamps at 9:30 AM, 12:00 PM, 4:00 PM (market hours) when 1D is selected
- Y-axis: no labels (the values are inferred from the hero number)
- Scrubber: when user drags across the chart, a vertical line appears, the hero portfolio value updates to that timestamp's value, and a small price bubble follows the touch point
- Chart range chips below the chart, horizontally arranged with the active chip underlined
Position Row (Stocks list)
- Height: 56pt minimum
- Leading: 32pt × 32pt rounded square (8pt radius) ticker icon — either a colored badge with the ticker symbol or, more commonly, a fetched company logo
- Middle: company name in Capsule Sans 16pt 600
#000000above ticker symbol + share count in Capsule Sans 13pt 500#5C6166("AAPL · 4 shares") - Trailing: market value in Capsule Sans 17pt 500
#000000(TABULAR) above day change in Capsule Sans 13pt 500 in green or orange (TABULAR), right-aligned - Divider: 0.5pt
#E6E6E6bottom
Watchlist Card
- Same as position row but with NO share count — just ticker, company name, current price, day change
- Often grouped under a "Lists" section with collapsible headers
News Card
- Container: rounded rectangle, 12pt radius, 1pt
#E6E6E6border - Layout: square thumbnail 80pt left-aligned + headline in Capsule Sans 15pt 600 + source + time in Capsule Sans 13pt 400
#5C6166 - Tap: opens article in in-app webview
Navigation
Large Nav Bar
- Robinhood's nav bar is collapsing: screen title sits at 22pt 700 left-aligned at the top of every screen content area
- 16pt horizontal margin, 8pt top safe-area inset
- Trailing icon: usually a search magnifying glass (24pt) and an account/profile circle (32pt)
Bottom Tab Bar
- Height: 56pt + safe area
- Background:
#FFFFFF(light) /#000000(dark) with 0.5pt#E6E6E6top divider - 5 tabs: Investing (chart icon), Search (magnifying glass), Crypto (currency-bitcoin icon), Cash (dollar/wallet), Account (person circle)
- Icon size: 24pt outline / fill on selected
- Active state: icon + label both flip to
#000000 - Inactive:
#9B9EA3 - Labels: Capsule Sans 10pt weight 600 letter-spaced +0.2pt — visible always
- Tap haptic:
.selectionChanged()
Sticky Trade Footer (Stock Detail bottom)
- Height: 64pt + safe area
- Background:
#FFFFFF(light) /#000000(dark) - 1 single "Trade" button — 100% width minus 32pt horizontal margins, 48pt height, black background, white text, 8pt corner radius
- Tapping opens the Buy/Sell modal sheet
Input Fields
Search Bar
- Background:
#F7F7F7(Surface Gray) - Height: 44pt
- Corner radius: 12pt
- Leading icon:
magnifyingglass16pt#5C6166 - Placeholder: "Search by ticker, name, or category" in Capsule Sans 15pt 400
#9B9EA3 - Text on focus:
#000000
Order Entry Field (Buy/Sell modal)
- Numeric keypad input — the dollar amount or share count
- Display: enormous Capsule Sans Display 48-64pt at the top of the modal
- Auto-shrinks as digits add (similar pattern to Cash App but smaller scale)
Distinctive Components
The Portfolio Chart Scrubber
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Portfolio hero caps at 36pt; chart height reduces to 180pt |
| iPhone 13/14/15 | 390pt | Standard 40pt hero; 220pt chart |
| iPhone 15/16 Pro | 393pt | Dynamic Island respected; chart sits below it |
| iPhone 15/16 Pro Max | 430pt | Portfolio hero at 48pt; 240pt chart |
| iPad | 768pt+ | 2-column layout: chart + portfolio on left, watchlist on right |
Dynamic Type
- Body, secondary text, list rows scale with Dynamic Type
- The portfolio hero (40pt) scales but clamps at 56pt to preserve layout
- Chart axis labels (11pt) are fixed — they're layout-sensitive
- Tab labels (10pt) are fixed
- Position values honor scaling but clamp at 22pt
Orientation
- Portrait only on phones — Robinhood is portrait-locked except on iPad where landscape exposes the chart full-width with the watchlist as a side panel
Touch Targets
- Position row: full 56pt hit area
- Chart scrubber: full chart height as the hit zone — touch anywhere to scrub
- Chart range chips: 44pt minimum hit width even though visual is 36pt
- Trade CTA: 48pt height, full-width minus 32pt
- Tab bar: 56pt full row with 24pt icons centered
Safe Area Handling
- Top: large screen title sits 16pt below safe-area top
- Bottom: tab bar pins above home indicator; sticky Trade footer respects it
- Sides: 16pt content insets; chart goes edge-to-edge
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-robinhood {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #007803;
--link-hover-color: #004502;
--border-color: #d1d1d1;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #595959;
--button-bg: #00c805;
--button-text-color: #000000;
--button-hover-bg: #009504;
--button-border: none;
--button-border-radius: 12px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #e0e0e0;
--button-secondary-border: 1px solid #d1d1d1;
--prompt-bg: #f2f2f2;
--prompt-text-color: #000000;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 12px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- line 82.7%
- trello 82.5%
- happn 79.5%
- sanu 78.9%
- microsoft teams 78.9%
Where this came from
- Source document
ios/design-md/finance/robinhood/DESIGN.md· 24.5 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.