What is Robinhood's primary brand color?

Robinhood's primary is lime-yellow #ccff00 — an electric high-chroma OKLCH 0.93 / 0.23 hit that lands as exactly one filled pill per band (the 'Sign up' CTA). Across the captured homepage the hex appears 24 times: 10 as borderColor, 7 as backgroundColor, 5 as text on dark surfaces, and 2 inside gradient stops. There is no secondary brand color — no Coinbase blue equivalent, no Stripe indigo. Hover and active state aren't documented on the marketing surfaces; the brand keeps the lime scarce enough that no inline-emphasis variant is needed. The warm-black ink #110e08 and white #ffffff handle every other interactive role.

What typography does Robinhood use, and what should I use if Martina Plantijn isn't available?

Robinhood pairs three families with strict role boundaries. Martina Plantijn (a Plantijn-family editorial serif) carries the hero headline at 110px / 400 weight with -0.5px tracking, and a 72px display variant beneath. Phonic — a custom sans — handles every body, span, and h2 at 16px / 400 weight with -0.25px tracking; the bold variant lives at weight 700 for inline emphasis. Capsule Sans Text carries the pill CTA, nav link, and paragraph copy beneath product screenshots at 13–16px / 400. If Martina is unavailable, EB Garamond or Source Serif 4 at weight 400 with -0.5px letter-spacing is the closest open substitute; Phonic falls back to Inter at weight 400 with -0.25px tracking; Capsule Sans Text maps to Geist or Inter at the button size.

Why does Robinhood use a serif headline instead of a sans-serif?

The serif choice is Robinhood's strongest typographic differentiator. Coinbase, Stripe, Kraken, and Mercury all default to a sans display tier — geometric calm signals fintech trust. Robinhood inverts the category convention with Martina Plantijn at 110px / 400 weight, which reads closer to a financial-magazine masthead than a trading dashboard. The brand is leaning into editorial gravity rather than data-density, and pairing the serif with a high-chroma lime CTA produces the contrast: warm typographic gravitas plus one electric action color. Don't substitute a slab or geometric sans here — Inter or DM Serif Display change the brand voice entirely.

Why is the canvas a warm-black instead of pure #000000?

Robinhood's canvas sits at #110e08 — a coffee-tinted near-black with OKLCH lightness 0.165 and a small chroma 0.013 at hue 85°. The hex appears 636 times across the captured page: 319 as text color, 312 as border color, 4 as background, and 1 as gradient stop. Pure #000000 also appears (192 occurrences, 94 text / 94 border / 4 bg) but only as a secondary ink role on white surfaces such as the top nav. The warmth comes from a tiny yellow shift in the hue — measurable but barely perceptible — and softens the contrast against the lime CTA. A pure black canvas paired with #ccff00 would read more aggressive; the warm shift keeps the page editorial.

Why does Robinhood use a single 36px pill radius?

The captured surfaces declare exactly one corner-radius value: 36px, with frequency 8 across the page. That single token covers every CTA pill (44px height × 120px width × 36px radius = a fully rounded pill) and the small icon plates inside the Protection Guarantee tiles. No intermediate radii — no 4px, 8px, 12px — appear in the extracted CSS. The pattern is intentional: pill-shape for every interactive surface, sharp 0px for cards and bands. Where Coinbase rotates 4 / 8 / 12 / 16 / 24 / 100px radii, Robinhood compresses the scale to two values and trusts type and color to do the rest.

What's missing from this DESIGN.md spec?

Several areas, captured in the Known Gaps section. The dashboard product surfaces (order entry, portfolio detail, options chains, crypto wallet) live behind login walls and aren't represented; this spec covers the marketing top of funnel only. The text-input token is documented from screenshot inference because no form field was visible on the captured hero. Hover and pressed states for the lime CTA weren't extracted — only the default fill is documented. Gradient stops behind the hero and crypto bands are treated as photography rather than tokens. Sub-brand accent shifts for Robinhood Gold, Crypto, and Futures aren't captured; the core marketing surface uses lime as the only voltage. Motion specs and the precise easing on the phone-frame mockup floats are out of scope.

Robinhood Design System

Robinhood's retail-investing design system as a DESIGN.md file.

About Robinhood DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source robinhood.com

Fintech & Crypto
Banking & Payments

Robinhood's design language opens on warm black. The canvas sits at "#110e08" — a coffee-tinted near-black with a warmth that pure "#000000" never carries — and the hero headline lands in Martina Plantijn at 110px in regular weight. The serif choice is the brand's strongest typographic signal: where Coinbase, Stripe, and Kraken default to geometric sans display, Robinhood reaches for an editorial serif more at home in a magazine masthead than a trading dashboard. One brand voltage carries every primary action: lime-yellow "#ccff00", a high-chroma OKLCH 0.93 / 0.23 hit that fills the "Sign up" pill and nothing else. Below the hero, product mockups float as phone-frame screenshots stacked over the warm-black canvas, then a deeper warm-gray "Robinhood Protection Guarantee" band closes the page with four icon-led bullets in a 2-by-2 grid.

This page packages the spec into a single DESIGN.md file. Inside: 18 color tokens grouped into one brand voltage, six warm-gray ink steps, and a small surface ladder; 10 typography levels spanning Martina Plantijn display, Phonic running text, and Capsule Sans Text product chrome; one pill radius at 36px; eight spacing values on an 8px base; and 19 components — the lime pill CTA, the serif hero headline, the dark product-scene card, the protection-guarantee icon tile, the warm-black nav, the phone-frame mockup, and the dark CTA band. Every hex is quoted; every Phonic and Martina weight is named so an agent can reproduce the rhythm without guessing.

Feed the file to Claude, Cursor, or GitHub Copilot. The agent will reproduce Robinhood's particular dialect — warm-black canvas, serif display headline, lime voltage scarce to a single pill per band, two-family sans split between Phonic body and Capsule Sans Text buttons — instead of a generic dark fintech theme. If Martina Plantijn is unavailable, EB Garamond or Source Serif 4 at weight 400 with -0.5px tracking is the closest open path; Phonic falls back to Inter at weight 400 with -0.25px tracking, and Capsule Sans Text maps to Geist at the button size. Pull tokens directly into a Tailwind config or shadcn registry — the pill radius and the single-voltage rule are the two non-negotiables.

What makes it distinct

Single voltage CTAlime
Serif display headlineMartina Plantijn at 110px / 400 weight inverts the geometric-sans convention most retail trading brands default to
Warm-black canvas
Phonic body / Capsule Sans buttonstwo distinct sans families split duty across reading copy and product chrome
36px pill geometryone corner radius (frequency 8) for every interactive surface; no intermediate steps between 0px and the pill

Live at robinhood.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

robinhood.com

Explore Robinhood

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Robinhood design system FAQ

Common questions about Robinhood's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Robinhood — official site

The retail-investing platform whose marketing surface this DESIGN.md captures.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Robinhood in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→