Design System
Analysis of Robinhood

A confident, flat, dark-first system where acid-lime detonates against warm near-black and parchment neutrals — one proprietary grotesque held at weight 400, set with aggressive negative tracking, on full-pill buttons and shadowless surfaces.

Type rendered in Hanken Grotesk as the nearest-Google substitute for Robinhood's proprietary Capsule Sans Text.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Hierarchy is built from size and negative tracking, not weight — nearly every tier sits at 400. Display tiers tighten to -1 to -1.5px; small labels track tighter still.

03 — Components

Button Variants

button-primary
Acid-lime fill, near-black text, full 36px capsule. The brand's one saturated color, used only on primary actions.
button-dark
Near-black #110e08 fill with white text — the inverse CTA used on light/parchment bands.
button-secondary
Transparent with a 1px ink outline; same 36px pill geometry as the primary.
badge-pill
Fully-round chip on a warm sunken fill for status and metadata.
04 — Components

Cards & Surfaces

Surfaces separate by flat color blocks and 1px hairlines rather than elevation. Asset tiles invert to black with a lime ticker mark.

05 — Components

Inverted Band

The signature layout move: full-bleed black sections with white display type and a single lime CTA, alternating with parchment and white bands to pace the scroll.

Send your agent
to the market.

Commission-free trading, 24/5 markets, and a brand that trusts one color to carry the whole story.

06 — Components

Form Elements

text-input
textarea
07 — Foundations

Spacing Scale

A 4 / 8 base, with 16px and 32px doing most of the work — note the 0 32px padding on every pill button.

08 — Foundations

Border Radius

The page is dominated by the 36px pill applied to all buttons; minor insets use 3–5px and larger cards round to 20px.

09 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The brand default: Robinhood is essentially flat and uses no shadows in its page UI.
Level 1 — a barely-there 1px lift, reserved for the rare overlay or floating control.
Level 2 — a deeper drop for modals/popovers only; off-brand for the marketing surfaces.
10 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxBands collapse to a single column; display type steps down toward ~48px; pill CTAs stretch toward full width.
Tablet768–1023pxMulti-column tiles reduce to two columns; hero headline reduces; section padding tightens.
Laptop1024–1279pxFull multi-column grids return within the centered max-width column.
Desktop≥ 1280pxContent caps at ~1200px and centers; full-bleed color bands run edge to edge behind it.

Layout logic: a wide centered column of full-bleed, alternating-tone bands — black, then parchment or white — stacked vertically, with the lime accent appearing only on CTAs and key marks.

Pricing Tiers

Illustrative tiers shown in the Robinhood idiom — flat cards, a dark "featured" plan, lime accents on the highlight. (Sample content; Robinhood's homepage has no pricing table.)

Basic
$0/mo
Commission-free stocks & ETFs.
  • Unlimited trades
  • Fractional shares
  • Standard market hours
GoldMost popular
$5/mo
Higher rates and pro tools.
  • Boosted cash yield
  • Level II market data
  • Bigger instant deposits
  • 24/5 trading
Advisory
0.25%/yr
Managed portfolios on autopilot.
  • Expert-built portfolios
  • Automatic rebalancing
  • Tax-aware investing

Data Table

A watchlist-style table in the system's flat idiom — hairline rows, lime status pills, dark pager. (Sample content.)

SymbolNamePriceStatusToday
AAPLApple Inc.$214.30Up+1.8%
TSLATesla, Inc.$249.10Flat+0.1%
NVDANVIDIA Corp.$126.40Up+3.2%
BTCBitcoin$61,820Up+2.4%
SPYS&P 500 ETF$548.90Flat+0.3%
1–5 of 412
123

Auth Forms

Sign-in patterns rendered with the system's pill buttons, hairline inputs, and ink labels. (Sample content.)

Sign in

Welcome back

OR
Create account

Start investing

OR