Robinhood

name Robinhood

colors background: "#ffffff" foreground: "#000000" brand: "#00c805" # Robinhood Green muted: "#8c8c8c" border: "#f0f0f0" card: "#ffffff" accent: "#00c805" secondary: "#167057" # Deep Forest Green dark: background: "#000000" foreground: "#ffffff" muted: "#666666" border: "#1a1a1a" card: "#121212" accent: "#00c805"

typography fontFamily: sans: "Capsule Sans, Inter, system-ui, sans-serif" body: fontSize: "14px" lineHeight: "1.4" heading: fontWeight: "700" letterSpacing: "-0.01em"

rounded default: "4px" md: "8px" lg: "16px" full: "9999px"

Design System: Robinhood

Overview

Robinhood's design system is "Democratizing Finance." It is a high-energy, mobile-first environment that uses its signature "Electric Green" to make the complex world of stocks and crypto feel accessible and even fun.

Design Philosophy

• Electric Energy: Uses a high-vibrancy green to represent growth, profit, and the brand's disruptive nature.

• Simplified Complexity: Breaks down complex financial charts and data into simple, color-coded visualizations (Green for Up, Red for Down).

• Consumer-Grade Polish: The UI feels more like a social media app than a traditional brokerage, prioritizing engagement and ease of use.

• Trust through Clarity: Uses clean typography and a monochrome foundation to ensure critical numbers are always legible.

Colors

• Robinhood Green (#00C805): The "Profit" color. It is vibrant and digital, becoming the primary signal for "Go" or "Up."

• Stark Contrast: Primarily uses pure Black and White to ensure the green and red status colors pop.

• Dynamic Theming: The entire app shifts its hue (e.g., to a muted forest green or red) based on the current market status or portfolio performance.

Typography

• Capsule Sans: A custom geometric sans-serif that is clean, modern, and friendly.

• Hierarchy: Uses bold weights for portfolio totals and stock prices to ensure they are the primary focal point.

Components

• The "Line" Chart: A minimalist, color-coded chart that is the most recognizable element of the app.

• Action Buttons: Large, high-radius buttons (often pills) with bold, high-contrast text.

• Portfolio Summary Card: A high-impact area at the top of the feed showing the current "Score."

Visual Effects

• Haptic Animations: Interactions feel physical and responsive, with subtle "snapping" and "bouncing" effects.

• Color Transitions: The background or accent colors shift smoothly as stock prices update in real-time.

• Confetti: Used as a celebratory effect for completing first trades or reaching milestones.