oh-my-design-cli 1.6.7 → 1.7.1

package/web/references/robinhood/DESIGN.md

@@ -0,0 +1,604 @@
+---
+id: robinhood
+name: Robinhood
+country: US
+category: fintech
+homepage: "https://robinhood.com"
+primary_color: "#00C805"
+logo:
+  type: simpleicons
+  slug: "robinhood"
+verified: "2026-06-06"
+added: "2026-06-06"
+omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#00C805"
+    primary-hover: "#00B004"
+    primary-tint: "#E6FBE9"
+    canvas-dark: "#0E0E0E"
+    canvas: "#FFFFFF"
+    ink: "#1B1B1B"
+    loss: "#FF5000"
+    warning: "#FFB000"
+    info: "#2E6FF2"
+    gray-50: "#F7F7F7"
+    gray-100: "#EFEFEF"
+    gray-200: "#E0E0E0"
+    gray-400: "#A8A8A8"
+    gray-500: "#8C8C8C"
+    gray-600: "#6B6B6B"
+    gray-700: "#4A4A4A"
+    gray-800: "#2C2C2C"
+    gray-900: "#1B1B1B"
+  typography:
+    family: { sans: "Capsule Sans", mono: "Capsule Sans Mono" }
+    display-hero: { size: 56, weight: 700, lineHeight: 1.07, tracking: -0.02, use: "Marketing hero headlines" }
+    display-lg:   { size: 40, weight: 700, lineHeight: 1.15, tracking: -0.02, use: "Section headers" }
+    heading-lg:   { size: 30, weight: 700, lineHeight: 1.27, tracking: -0.01, use: "Feature titles, modal headers" }
+    heading:      { size: 24, weight: 600, lineHeight: 1.33, tracking: -0.01, use: "Card headings, sub-sections" }
+    subtitle:     { size: 18, weight: 600, lineHeight: 1.44, use: "List headers, nav titles" }
+    body-lg:      { size: 18, weight: 400, lineHeight: 1.56, use: "Marketing body, explanations" }
+    body:         { size: 16, weight: 400, lineHeight: 1.50, use: "Standard reading text" }
+    body-sm:      { size: 14, weight: 400, lineHeight: 1.43, use: "Secondary information" }
+    caption:      { size: 12, weight: 400, lineHeight: 1.33, use: "Timestamps, disclosures, fine print" }
+    number:       { size: 40, weight: 700, tracking: -0.01, use: "Portfolio value, tabular numerals" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 96 }
+  rounded: { sm: 8, md: 12, lg: 20, full: 9999 }
+  shadow:
+    card: "0px 1px 3px rgba(0,0,0,0.06)"
+    toast: "0px 8px 24px rgba(0,0,0,0.20)"
+    modal: "0px 16px 48px rgba(0,0,0,0.24)"
+  components:
+    button-primary: { type: button, bg: "#00C805", fg: "#0E0E0E", radius: 9999, padding: "16px 28px", font: "16px/600 Capsule Sans", use: "Primary CTA, dark text on bright green" }
+    button-secondary: { type: button, bg: "#FFFFFF", fg: "#1B1B1B", radius: 9999, padding: "16px 28px", font: "16px/600 Capsule Sans", use: "Outline secondary, 1.5px #E0E0E0 border" }
+    button-tertiary: { type: button, bg: "#FFFFFF", fg: "#00B004", padding: "12px 8px", font: "16px/600 Capsule Sans", use: "Inline links, low-emphasis" }
+    button-destructive: { type: button, bg: "#FF5000", fg: "#FFFFFF", radius: 12, padding: "16px 28px", font: "16px/600 Capsule Sans", use: "Sell confirmation, destructive flows" }
+    input-text: { type: input, bg: "#FFFFFF", fg: "#1B1B1B", radius: 10, padding: "14px 16px", font: "16px/400 Capsule Sans", use: "Standard form input, 1.5px #E0E0E0 border, focus #00C805" }
+    card-standard: { type: card, bg: "#FFFFFF", radius: 16, padding: "20px", use: "Holding, watchlist, account cards, 1px #E0E0E0 border" }
+    card-featured: { type: card, bg: "#0E0E0E", fg: "#FFFFFF", radius: 20, padding: "28px", use: "Promotional, Gold upsell, portfolio hero" }
+    list-row: { type: listItem, radius: 0, padding: "14px 16px", use: "Ticker rows, transaction history, bottom 1px #EFEFEF border" }
+    badge-gain: { type: badge, fg: "#00B004", radius: 8, padding: "3px 8px", font: "13px/600 Capsule Sans Mono", use: "Positive movement indicator" }
+    badge-loss: { type: badge, fg: "#FF5000", radius: 8, padding: "3px 8px", font: "13px/600 Capsule Sans Mono", use: "Negative movement indicator" }
+    badge-neutral: { type: badge, bg: "#EFEFEF", fg: "#4A4A4A", radius: 8, padding: "3px 8px", font: "12px/600 Capsule Sans", use: "NEW, category labels" }
+    badge-gold: { type: badge, fg: "#0E0E0E", radius: 8, padding: "3px 8px", font: "12px/700 Capsule Sans", use: "Robinhood Gold marker, gold gradient" }
+    tab-segmented: { type: tab, bg: "#EFEFEF", fg: "#8C8C8C", radius: 9999, padding: "6px 14px", font: "13px/600 Capsule Sans", active: "Active #FFFFFF bg + #1B1B1B text", use: "Chart timeframe selector" }
+    tab-bottom: { type: tab, bg: "#FFFFFF", fg: "#A8A8A8", font: "11px/500 Capsule Sans", active: "Active #00C805 icon + label", use: "Primary mobile navigation" }
+    toast-default: { type: toast, bg: "#1B1B1B", fg: "#FFFFFF", radius: 12, padding: "14px 18px", font: "14px/500 Capsule Sans", use: "Transient confirmation" }
+    dialog-modal: { type: dialog, bg: "#FFFFFF", radius: 20, padding: "28px", use: "Confirmations, disclosures" }
+    dialog-sheet: { type: dialog, bg: "#FFFFFF", radius: 20, padding: "24px 20px", use: "Trade ticket, order review, pickers, top corners only" }
+    toggle-default: { type: toggle, bg: "#00C805", radius: 9999, use: "Boolean settings, #E0E0E0 off, #FFFFFF thumb" }
+  components_harvested: true
+---
+
+# Design System Inspiration of Robinhood
+
+## 1. Visual Theme & Atmosphere
+
+Robinhood is the American brokerage that turned investing from a gated, mahogany-paneled ritual into something that looks and feels like a consumer app. The brand's visual signature is a single, electric act of defiance: **Robinhood Green (`#00C805`)** — a bright, almost radioactive green that exists nowhere in legacy finance. Where incumbents (Fidelity green, Schwab blue, Vanguard maroon) chose colors that signal old-money permanence, Robinhood chose a color that signals *now* — energetic, optimistic, unmistakably young. The green doesn't whisper trust; it announces access.
+
+The 2024 rebrand, developed with **COLLINS**, moved the brand into a more premium, confident register. The hero surfaces lean **dark** — deep near-blacks (`#0E0E0E`, `#1B1B1B`) under which the green vibrates with maximum intensity — punctuated by clean white marketing sections. This dark-mode-first instinct mirrors the trading product itself, where charts and tickers live on black canvases and the green/red of gains and losses carries the entire emotional payload of the interface.
+
+The custom typeface **Capsule Sans** is the quiet counterweight to the loud green. Commissioned as a refinement of Maison Neue (Milieu Grotesque), it's a warm, highly-legible geometric grotesque tuned for small mobile sizes, with a custom hooked `R` anchoring the wordmark. It reads as engineered precision without coldness — exactly the tension a brokerage app needs to feel both serious about money and approachable about beginning.
+
+**Key Characteristics:**
+- Robinhood Green (`#00C805`) as the singular brand and interactive accent — electric, not institutional
+- Dark-first hero surfaces (`#0E0E0E` / `#1B1B1B`) where green reads brightest
+- Capsule Sans — custom geometric grotesque, tuned for mobile legibility, custom `R`
+- Financial dualism: green for gains, red for losses, carried as semantic infrastructure
+- Generous whitespace and large numeric displays — money as the hero element
+- Restrained, near-flat depth; emphasis through contrast and color, not heavy shadow
+- Mobile-first at a 390px baseline, scaling to confident full-bleed desktop marketing
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Robinhood Green** (`#00C805`): The brand. Primary CTAs, active states, brand marks, positive financial movement, links, focus accents. The single loudest element in the system.
+- **Green Pressed** (`#00B004`): Hover/pressed state for green CTAs — a half-step darker for tactile feedback.
+- **Green Tint** (`#E6FBE9`): Subtle green-washed backgrounds, success surfaces, informational highlights on light mode.
+- **Near-Black Canvas** (`#0E0E0E`): Primary dark surface. Hero sections, trading-style backdrops, where green is most electric.
+- **Pure White** (`#FFFFFF`): Light-mode page background, card surfaces, text on dark.
+
+### Brand (Logo/Marketing)
+- **Robinhood Green** (`#00C805`): The official brand color — used for the feather/wordmark mark and headline accents.
+- **Ink Black** (`#1B1B1B`): Secondary brand surface and the darkest practical text color. Warm near-black.
+
+### Semantic (Financial)
+- **Gain Green** (`#00C805`): Positive returns, "up" tickers, buy confirmations. Shares the brand hue intentionally — growth *is* the brand.
+- **Loss Red** (`#FF5000`): Negative returns, "down" tickers, sell/destructive actions. A warm orange-red, not a clinical red, to stay on-brand and avoid alarm-system harshness.
+- **Warning Amber** (`#FFB000`): Pending states, attention-needed, market-closed notices.
+- **Info Blue** (`#2E6FF2`): Neutral informational accents, educational callouts (Robinhood Learn).
+
+### Neutral Scale
+- **Gray 50** (`#F7F7F7`): Lightest gray — secondary page background, section bands.
+- **Gray 100** (`#EFEFEF`): Card fills, disabled surfaces, dividers on white.
+- **Gray 200** (`#E0E0E0`): Default border color, input borders, separators.
+- **Gray 400** (`#A8A8A8`): Placeholder text, disabled icon fills.
+- **Gray 500** (`#8C8C8C`): Caption text, secondary labels, metadata.
+- **Gray 600** (`#6B6B6B`): Body text on light surfaces.
+- **Gray 700** (`#4A4A4A`): Emphasized body, sub-headings.
+- **Gray 800** (`#2C2C2C`): Strong labels.
+- **Gray 900** (`#1B1B1B`): Primary heading text on light surfaces.
+
+### Surface & Borders
+- **Border Default**: `#E0E0E0` (gray200). Card borders, input outlines, dividers on light.
+- **Border Dark**: `#2C2C2C`. Dividers and outlines on dark surfaces.
+- **Surface Dark Elevated**: `#1B1B1B`. Cards sitting on the `#0E0E0E` canvas.
+- **Overlay Scrim**: `rgba(0,0,0,0.6)`. Modal/sheet backdrops.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `"Capsule Sans", "Capsule Sans Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif`
+- **Display**: `"Capsule Sans Display", "Capsule Sans", sans-serif` — tighter optical cut for large headlines
+- **Monospace / Numeric**: `"Capsule Sans Mono", "SF Mono", SFMono-Regular, Menlo, monospace` — tabular figures for tickers and amounts
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Capsule Sans Display | 56px | 700 | 60px (1.07) | -0.02em | Marketing hero headlines |
+| Display Large | Capsule Sans Display | 40px | 700 | 46px (1.15) | -0.02em | Section headers |
+| Heading Large | Capsule Sans | 30px | 700 | 38px (1.27) | -0.01em | Feature titles, modal headers |
+| Heading | Capsule Sans | 24px | 600 | 32px (1.33) | -0.01em | Card headings, sub-sections |
+| Subtitle | Capsule Sans | 18px | 600 | 26px (1.44) | normal | List headers, nav titles |
+| Body Large | Capsule Sans | 18px | 400 | 28px (1.56) | normal | Marketing body, explanations |
+| Body | Capsule Sans | 16px | 400 | 24px (1.50) | normal | Standard reading text |
+| Body Small | Capsule Sans | 14px | 400 | 20px (1.43) | normal | Secondary information |
+| Caption | Capsule Sans | 12px | 400 | 16px (1.33) | normal | Timestamps, disclosures, fine print |
+| Number Display | Capsule Sans Mono | 40px+ | 700 | tight | -0.01em | Portfolio value — tabular numerals |
+| Ticker Numeric | Capsule Sans Mono | 14-16px | 500 | 1.2 | normal | Price/percent cells — tabular |
+
+### Principles
+- **Tabular numerals everywhere money lives**: Portfolio values, prices, percentages, and ticker cells use mono/tabular figures so digits never shift width as values update.
+- **Tight display tracking**: Large headlines pull in to `-0.02em` for a confident, engineered feel; body text stays at normal tracking for legibility.
+- **Weight restraint**: Capsule Sans ships multiple weights but the UI leans on 400 (body), 600 (emphasis/subtitles), 700 (headings and financial amounts). Avoid 300 in product UI — it loses legibility at mobile sizes.
+- **Mobile-tuned legibility**: The typeface was refined specifically to hold up at small sizes; never set product body text below 14px.
+
+## 4. Component Stylings
+
+### Buttons
+
+Robinhood buttons are pill-to-soft-rounded, high-contrast, and lean on the green as the single primary signal. Marketing surfaces favor full pills; product surfaces favor a softer 8–12px radius.
+
+**Primary (Green)**
+- Background: `#00C805`
+- Text: `#0E0E0E` (dark text on bright green for max legibility and contrast)
+- Border: none
+- Radius: 9999px (marketing) / 12px (product)
+- Padding: 16px 28px
+- Font: 16px / 600 / Capsule Sans
+- Hover: background `#00B004`
+- Pressed: background `#00A004` + slight scale 0.98
+- Disabled: background `#A8A8A8`, text `#FFFFFF`
+- Use: Primary CTA ("Get started", "Buy", "Sign up") — min-height 52px
+
+**Primary on Dark**
+- Background: `#00C805`
+- Text: `#0E0E0E`
+- Border: none
+- Radius: 9999px
+- Padding: 16px 28px
+- Font: 16px / 600 / Capsule Sans
+- Use: Hero CTA on `#0E0E0E` canvas — green pops at maximum intensity
+
+**Secondary (Outline)**
+- Background: transparent
+- Text: `#1B1B1B` (light mode) / `#FFFFFF` (dark mode)
+- Border: 1.5px solid `#E0E0E0` (light) / `#2C2C2C` (dark)
+- Radius: 9999px / 12px
+- Padding: 16px 28px
+- Font: 16px / 600 / Capsule Sans
+- Hover: border `#A8A8A8`, subtle bg `#F7F7F7`
+- Use: "Learn more", secondary action paired with a green primary
+
+**Tertiary (Text)**
+- Background: none
+- Text: `#00B004` (light) / `#00C805` (dark)
+- Border: none
+- Padding: 12px 8px
+- Font: 16px / 600 / Capsule Sans
+- Use: Inline links and low-emphasis actions
+
+**Destructive (Sell)**
+- Background: `#FF5000`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 12px
+- Padding: 16px 28px
+- Font: 16px / 600 / Capsule Sans
+- Use: Sell confirmation, destructive flows — paired explicitly, never default
+
+### Inputs
+
+**Text Field (default)**
+- Background: `#FFFFFF` (light) / `#1B1B1B` (dark)
+- Text: `#1B1B1B` / `#FFFFFF`
+- Border: 1.5px solid `#E0E0E0` / `#2C2C2C`
+- Radius: 10px
+- Padding: 14px 16px
+- Font: 16px / 400 / Capsule Sans
+- Placeholder: `#A8A8A8`
+- Focus: border `#00C805` + 0 0 0 3px `rgba(0,200,5,0.15)` ring
+- Use: Standard form input
+
+**Underline (amount entry)**
+- Background: transparent
+- Text: `#1B1B1B`
+- Border: bottom 2px solid `#E0E0E0`
+- Radius: 0
+- Padding: 8px 0
+- Font: 32px / 700 / Capsule Sans Mono (tabular)
+- Focus: bottom border `#00C805`
+- Use: Large dollar-amount entry on trade tickets
+
+**Error**
+- Border: 1.5px solid `#FF5000`
+- Focus ring: `rgba(255,80,0,0.15)`
+- Helper text below: `#FF5000`, 13px / 400
+- Use: Invalid field — paired with one actionable sentence
+
+### Cards
+
+**Standard**
+- Background: `#FFFFFF` (light) / `#1B1B1B` (dark)
+- Border: 1px solid `#E0E0E0` (light) / none (dark)
+- Radius: 16px
+- Padding: 20px
+- Shadow: `0px 1px 3px rgba(0,0,0,0.06)` (light) / none (dark)
+- Use: Holding, watchlist, account cards — the workhorse surface
+
+**Featured / Hero Card**
+- Background: `#0E0E0E`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 20px
+- Padding: 28px
+- Accent: green data/CTA on dark
+- Use: Promotional / Gold upsell / portfolio hero
+
+**List Row**
+- Background: transparent
+- Border: bottom 1px solid `#EFEFEF` (light) / `#2C2C2C` (dark)
+- Radius: 0
+- Padding: 14px 16px
+- Use: Ticker rows, transaction history — name left, tabular price/percent right
+
+### Badges / Pills
+
+**Gain**
+- Background: `rgba(0,200,5,0.12)`
+- Text: `#00B004`
+- Radius: 8px
+- Padding: 3px 8px
+- Font: 13px / 600 / Capsule Sans Mono
+- Use: "+2.4%" positive movement indicator
+
+**Loss**
+- Background: `rgba(255,80,0,0.12)`
+- Text: `#FF5000`
+- Radius: 8px
+- Padding: 3px 8px
+- Font: 13px / 600 / Capsule Sans Mono
+- Use: "-1.8%" negative movement indicator
+
+**Neutral / Tag**
+- Background: `#EFEFEF`
+- Text: `#4A4A4A`
+- Radius: 8px
+- Padding: 3px 8px
+- Font: 12px / 600 / Capsule Sans
+- Use: "NEW", category labels
+
+**Gold (premium)**
+- Background: linear-gradient `#C9A227 → #E8C84A`
+- Text: `#0E0E0E`
+- Radius: 8px
+- Padding: 3px 8px
+- Font: 12px / 700 / Capsule Sans
+- Use: Robinhood Gold marker
+
+### Tabs
+
+**Segmented (timeframe)**
+- Background: `#EFEFEF` (light) / `#1B1B1B` (dark)
+- Text: `#8C8C8C`
+- Radius: 9999px
+- Padding: 6px 14px
+- Active: `#FFFFFF` bg + `#1B1B1B` text (light); on dark, active text `#00C805`, no fill
+- Font: 13px / 600 / Capsule Sans
+- Use: Chart timeframe (1D / 1W / 1M / 3M / 1Y / ALL)
+
+**Bottom Tab (mobile nav)**
+- Background: `#FFFFFF` / `#0E0E0E`
+- Active: `#00C805` icon + label
+- Inactive: `#A8A8A8`
+- Font: 11px / 500 / Capsule Sans
+- Use: Primary mobile navigation
+
+### Toasts
+
+**Default**
+- Background: `#1B1B1B`
+- Text: `#FFFFFF`
+- Radius: 12px
+- Padding: 14px 18px
+- Shadow: `0px 8px 24px rgba(0,0,0,0.20)`
+- Font: 14px / 500 / Capsule Sans
+- Use: Transient confirmation ("Order placed"). Order *fills* get a dedicated screen, not a toast.
+
+### Dialogs
+
+**Centered Modal**
+- Background: `#FFFFFF` / `#1B1B1B`
+- Radius: 20px
+- Padding: 28px
+- Shadow: `0px 16px 48px rgba(0,0,0,0.24)`
+- Use: Confirmations, disclosures
+
+**Bottom Sheet**
+- Background: `#FFFFFF` / `#0E0E0E`
+- Radius: 20px (top corners only)
+- Padding: 24px 20px
+- Drag handle: 36px × 4px `#E0E0E0`, centered top
+- Use: Trade ticket, order review, pickers — the primary mobile overlay pattern
+
+### Toggles
+
+**Default**
+- Background: `#00C805` (on) / `#E0E0E0` (off)
+- Radius: 9999px
+- Thumb: `#FFFFFF` 20px circle, `0px 1px 2px rgba(0,0,0,0.15)` shadow
+- Use: Boolean settings, notification preferences
+
+
+**Tier 1 sources:** https://robinhood.com (live production site, verified via live DOM getComputedStyle).
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Common values: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 96px
+- Product horizontal padding: 16px (mobile), 20px (tablet)
+- Marketing section vertical rhythm: 96px+ between major bands
+
+### Grid & Container
+- Product baseline: 390px mobile width, single-column
+- Marketing: 12-column grid, max content width ~1200px, centered
+- Charts: full-bleed width, fixed aspect ratio, edge-to-edge on mobile
+- Lists: full-width rows, name left-aligned, tabular numerics right-aligned
+
+### Whitespace Philosophy
+- **Money is the hero**: Portfolio value sits in large type with generous surrounding space — the single most important number on any screen gets room to breathe.
+- **Marketing is spacious; product is efficient**: Landing pages use editorial whitespace and full-bleed imagery; the trading product is tighter and data-dense where it counts.
+- **Green is rationed**: Empty space lets the one green element command attention. Crowding the green dilutes the brand signal.
+
+### Border Radius Scale
+- Compact (8px): Badges, pills, inline tags
+- Standard (10–12px): Inputs, product buttons, small cards
+- Comfortable (16px): Standard cards
+- Large (20px): Hero cards, modals, bottom sheets
+- Pill (9999px): Marketing CTAs, segmented controls, toggles
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Dark surfaces, inline elements, list rows |
+| Subtle (Level 1) | `0px 1px 3px rgba(0,0,0,0.06)` | Cards on light, slight lift |
+| Standard (Level 2) | `0px 4px 12px rgba(0,0,0,0.10)` | Dropdowns, popovers |
+| Elevated (Level 3) | `0px 8px 24px rgba(0,0,0,0.20)` | Toasts, floating panels |
+| Modal (Level 4) | `0px 16px 48px rgba(0,0,0,0.24)` | Dialogs, bottom sheets |
+
+**Shadow Philosophy**: Robinhood is near-flat by instinct. On dark surfaces, elevation is communicated by *surface lightness* (a `#1B1B1B` card on a `#0E0E0E` canvas) rather than shadow. On light surfaces, shadows are soft, neutral, single-layer. Depth never competes with the green — color and contrast carry hierarchy, not drop shadows.
+
+### Blur Effects
+- Sticky nav applies a backdrop blur (`backdrop-filter: blur(12px)`) over a translucent dark/light fill on scroll.
+- Bottom-sheet scrims use a plain `rgba(0,0,0,0.6)` dim, no blur, to keep trade data crisp behind.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Robinhood Green (`#00C805`) for the single most important action on a screen
+- Put dark text (`#0E0E0E`) on green buttons — never white, which fails contrast
+- Use tabular/mono figures for all prices, percentages, and portfolio values
+- Let green appear against dark (`#0E0E0E`) where it reads most electric
+- Show gains in green (`#00C805`), losses in warm red (`#FF5000`)
+- Keep marketing CTAs as full pills; product buttons at 10–12px radius
+- Give the headline portfolio number generous surrounding whitespace
+
+### Don't
+- Don't use multiple greens — there is one brand green; don't invent shades for decoration
+- Don't put white text on the green button (contrast and brand violation)
+- Don't use a harsh pure-red (`#FF0000`) for losses — the system red is warm `#FF5000`
+- Don't crowd the green with competing accent colors — ration it
+- Don't set product body text below 14px or use weight 300 in UI
+- Don't add heavy multi-layer shadows — depth comes from surface lightness and contrast
+- Don't mix variable-width and tabular numerals in the same data column
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile (Primary) | <600px | Single column, 390px product baseline, full-bleed charts |
+| Tablet | 600–1024px | Two-column marketing, wider cards, side margins |
+| Desktop | >1024px | 12-col grid, max ~1200px content, full-bleed hero imagery |
+
+### Touch Targets
+- Buttons: min-height 52px (primary), 44px (compact)
+- List rows: minimum 56px row height for tickers/transactions
+- Segmented timeframe controls: 36px tall, generous horizontal hit area
+
+### Collapsing Strategy
+- Desktop marketing hero collapses to a single-column stacked layout on mobile
+- Trade actions live in a bottom sheet on mobile, a right-side panel on desktop
+- Sticky bottom CTA bar (Buy/Sell) with safe-area insets on mobile product
+- Horizontal scrolling carousels for discover/watchlist sections
+
+### Image Behavior
+- Charts: full-width, responsive, fixed aspect ratio, edge-to-edge on mobile
+- Brand/marketing imagery: full-bleed, often on dark backgrounds with green accents
+- Company logos in lists: 36–40px circular, consistent sizing
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Robinhood Green (`#00C805`)
+- CTA Hover: Green Pressed (`#00B004`)
+- CTA Text: Near-Black (`#0E0E0E`)
+- Dark Canvas: Near-Black (`#0E0E0E`)
+- Light Background: White (`#FFFFFF`)
+- Surface band: Gray 50 (`#F7F7F7`)
+- Heading text: Ink (`#1B1B1B`)
+- Body text: Gray 600 (`#6B6B6B`)
+- Caption text: Gray 500 (`#8C8C8C`)
+- Placeholder: Gray 400 (`#A8A8A8`)
+- Border: Gray 200 (`#E0E0E0`)
+- Gain/Positive: Green (`#00C805`)
+- Loss/Negative: Warm Red (`#FF5000`)
+- Warning: Amber (`#FFB000`)
+
+### Example Component Prompts
+- "Create a portfolio header: dark `#0E0E0E` bg, white label 14px weight 400, value 40px weight 700 in Capsule Sans Mono tabular, green `#00C805` '+$1,240.50 (+2.4%)' below in 16px mono."
+- "Build a primary CTA: `#00C805` bg, `#0E0E0E` text, 16px weight 600, min-height 52px, full pill radius. Hover `#00B004`, pressed scale 0.98."
+- "Design a ticker row: full-width 56px, company logo 36px circle left + symbol 16px weight 600 + name 13px `#8C8C8C`. Right: price 16px mono + percent pill (gain `rgba(0,200,5,0.12)` bg `#00B004` text / loss `rgba(255,80,0,0.12)` bg `#FF5000` text)."
+- "Create an amount-entry field: transparent bg, 2px bottom border `#E0E0E0`, value 32px weight 700 Capsule Sans Mono, focus bottom border `#00C805`."
+- "Design a chart timeframe segmented control: `#EFEFEF` track, pill radius, items 1D/1W/1M/3M/1Y/ALL. Active: white fill + `#1B1B1B` text. Inactive `#8C8C8C`, 13px weight 600."
+
+### Iteration Guide
+1. Use the Capsule Sans stack; fall back to Helvetica Neue / system sans
+2. Primary interactive and brand color is `#00C805` — only one green, rationed
+3. Green buttons carry dark `#0E0E0E` text, never white
+4. Financial numbers: tabular/mono figures, 700 weight for headline values
+5. Gains green `#00C805`, losses warm red `#FF5000` — never harsh `#FF0000`
+6. Dark surfaces use lightness for elevation; light surfaces use soft single shadows
+7. Mobile-first at 390px, 16px horizontal padding; marketing goes full-bleed
+
+---
+
+## 10. Voice & Tone
+
+Robinhood speaks like a confident friend who demystifies money without dumbing it down — direct, encouraging, jargon-light, and quietly anti-establishment. The founding promise is in the name: democratizing finance for all. Copy is plain-spoken and active, favoring short imperatives. It celebrates beginning ("Start with as little as $1") and access ("Investing for everyone") over wealth-flex bravado. Disclosures are present and precise — this is a regulated brokerage — but kept out of the way of the primary message.
+
+| Context | Tone |
+|---|---|
+| CTAs | Short imperative verbs (`Get started`, `Buy`, `Learn more`, `Sign up`) |
+| Headlines | Bold, declarative, access-oriented (`Investing for everyone`, `Join a new generation of investors`) |
+| Success | Plain past-tense confirmation (`Order placed`, `Transfer complete`). No exclamation overload. |
+| Error messages | Specific, blameless, actionable. Never a bare `Something went wrong`. |
+| Onboarding | Second-person, encouraging, one idea per step (`Start with as little as $1`) |
+| Financial amounts | Exact, comma-separated, currency symbol prefixed: `$1,240.50` — never rounded on primary surfaces |
+| Disclosures | Plain-English regulatory tone; accurate but unobtrusive footnotes |
+
+**Forbidden moves.** No condescension or finance-bro swagger. No "guaranteed returns" language (regulatory and brand violation). No rounding money on primary surfaces. Avoid `Oops` and cute error voice on money screens — clarity over personality where dollars are involved.
+
+## 11. Brand Narrative
+
+Robinhood was founded in 2013 by **Vladimir Tenev** and **Baiju Bhatt**, two Stanford physics graduates who had built high-frequency trading infrastructure for Wall Street firms and realized the actual cost of executing a trade was near zero — yet incumbent brokerages charged retail investors $5–$10 per trade. The thesis was a direct moral argument encoded in the name: the tools of finance had been hoarded by the wealthy, and Robinhood would take from that asymmetry and give access back to everyone. **Commission-free trading** was the wedge; the app launched publicly in 2015 to a waitlist of nearly a million people.
+
+The brand's entire visual language descends from that founding rejection. Legacy finance dressed itself in navy, maroon, and serif gravitas — colors and fonts engineered to signal *we have always been here and always will be*. Robinhood chose **electric green (`#00C805`)**, a color with no heritage in finance, precisely because it had no heritage. It reads as a startup, a growth chart, a "go" signal — optimism rendered as a single hue. The feather mark evokes the legend's arrow and lightness; the name does the rest of the storytelling.
+
+The 2024 rebrand with **COLLINS** matured this energy without abandoning it. As Robinhood expanded from a single commission-free-stocks app into a multi-product platform — options, crypto, retirement, Robinhood Gold, a cash card, and emerging agentic and prediction-market features — the identity needed to hold both the scrappy access story and a more premium, durable register. The dark surfaces, the refined custom Capsule Sans, and the disciplined rationing of the green are the answer: still defiant, now grown up.
+
+What Robinhood refuses: the mahogany seriousness of legacy brokerages, the intimidation of Bloomberg-terminal density, and the gatekeeping of high account minimums. It occupies a deliberate middle — serious enough to be trusted with real money, accessible enough that a 22-year-old's first-ever dollar of investing feels like it belongs to them.
+
+## 12. Principles
+
+1. **One green, rationed.** There is a single brand green (`#00C805`). It marks the most important action and positive movement — nothing else. Inventing decorative green shades dilutes the entire signal.
+2. **Money is the hero element.** The headline portfolio number gets the largest type, tabular figures, and the most surrounding whitespace on any screen. Everything else supports it.
+3. **Access over flex.** Copy and design celebrate beginning ("$1 to start") over displays of wealth. The brand is for the person making their first trade, not bragging about their last.
+4. **Dark makes green electric.** Hero and emotional moments live on `#0E0E0E` so the green reads at maximum intensity. Light mode is for clarity; dark mode is for impact.
+5. **Numbers are typography.** Prices, percentages, and balances use tabular/mono figures with the same care as display headlines — digits never jitter as values update.
+6. **Restraint is the grown-up move.** Near-flat depth, one accent color, disciplined type weights. The 2024 maturity came from removing, not adding.
+7. **Gains and losses are infrastructure.** Green-up / warm-red-down is a semantic contract that runs through every surface; it is never repurposed for decoration.
+8. **Trust through precision, warmth through tone.** Numbers are exact and disclosures honest (the trust); voice is plain and encouraging (the warmth). Both, always.
+
+## 13. Personas
+
+*Personas below are fictional archetypes informed by publicly described US retail-investing segments, not individual people.*
+
+**Marcus, 24, Austin.** First job out of college, software support. Robinhood is the first investing app he's ever opened — he started with $50 in an index ETF after seeing a friend's screenshot. Checks his portfolio 3–4 times a day, mostly for the dopamine of the green number. Intimidated by traditional brokerage interfaces; chose Robinhood because it "looked like an app, not a bank." Reads the percent change before anything else. Would churn instantly if the app felt like work.
+
+**Priya, 31, Jersey City.** Product designer with a stable income, contributing to a Roth IRA and dabbling in options. Uses Robinhood Gold for the higher interest on uninvested cash. Values the clean dark-mode charts and fast order entry. Skeptical of hype — ignores meme-stock noise — but appreciates that the interface respects her enough to surface real data without condescension. Tabular-clean numerics and honest disclosures are why she trusts it.
+
+**Dré, 19, Atlanta.** College sophomore, treats investing like a learning hobby. Started through Robinhood Learn articles, buys fractional shares of companies he uses daily. Mobile-only, never touches a desktop. The "$1 to start" framing is exactly why he's here — no other broker made it feel possible. Sensitive to anything that reads as a sales pitch; trusts the app because it has never made him feel small for starting tiny.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (no holdings)** | Friendly one-line `#6B6B6B` body explaining the screen plus a green primary CTA (`Get started` / `Make your first trade`). Encouraging, never `No data`. |
+| **Empty (filtered)** | Single `#8C8C8C` caption line (`No results match your filter`). No CTA — user resets the filter. |
+| **Loading (first paint)** | Skeleton blocks at `#EFEFEF` (light) / `#1B1B1B` (dark) matching final layout. Portfolio values show `--` until resolved — never a fake skeleton number. |
+| **Loading (refresh)** | Subtle green `#00C805` pull spinner. Content stays visible with prior values; no blocking overlay. |
+| **Error (inline field)** | 1.5px `#FF5000` border + `rgba(255,80,0,0.15)` focus ring, one actionable sentence below in `#FF5000` 13px. |
+| **Error (toast)** | `#1B1B1B` bg, white 14px 500 text, ~4s auto-dismiss, bottom inset. One sentence, no cute voice. |
+| **Error (blocking)** | Reserved for outage/market-data failure. Centered `#1B1B1B` 18px weight 600 message + green retry button. No illustration on money screens. |
+| **Success (order placed)** | Toast for routine submission. **Order filled** gets a dedicated confirmation screen — green checkmark, exact filled price/quantity, tabular amount. Fills are not toasts. |
+| **Gain/Loss live update** | Value and percent recolor in place: green `#00C805` up, warm red `#FF5000` down, with a brief flash, never a cross-fade between numbers. |
+| **Skeleton** | `#EFEFEF` / `#1B1B1B` blocks at exact final dimensions, 1.2s shimmer with low-opacity highlight. Component-matched radius. Never on live financial amounts. |
+| **Disabled** | Button bg `#A8A8A8`, text white, no pointer. Inputs keep `#E0E0E0` border so geometry stays stable when re-enabled. |
+| **Market closed** | Amber `#FFB000` caption banner (`Market closed`) above the trade ticket; trade button stays available for queued/extended-hours orders where applicable. |
+
+## 15. Motion & Easing
+
+**Durations** (named, not raw milliseconds):
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle flips, immediate state changes |
+| `motion-fast` | 150ms | Hover, focus, press overlays, small reveals |
+| `motion-standard` | 250ms | Default — sheet opens, tab switches, card expand |
+| `motion-slow` | 400ms | Emphasized — success checkmark, onboarding advances |
+| `motion-page` | 320ms | Full-screen route transitions |
+
+**Easings:**
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Appearing — sheets, toasts, screen pushes |
+| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Leaving — dismissals, pops |
+| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way — collapsibles, tab content |
+| `ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Reserved — order-filled success checkmark only |
+
+**Signature motions.**
+
+1. **Value tick.** When a price or portfolio value updates, the digit animates in place with a brief color flash (green up `#00C805` / warm red down `#FF5000`) over `motion-fast`. Money is never cross-faded between two values — a flickering number looks like a bug, not a market.
+2. **Chart draw-in.** On load, the price line draws left-to-right over `motion-slow` with `ease-standard`, the area gradient fading up beneath it. Reinforces "growth" as a felt motion, not just a color.
+3. **Bottom-sheet trade ticket.** Rises from `y+40px` with `motion-standard / ease-enter` and a synchronized scrim fade to `rgba(0,0,0,0.6)`. Dismissal uses `motion-fast / ease-exit` — leaving feels lighter than entering.
+4. **Order-filled checkmark.** The one place `ease-spring` is licensed: the confirmation checkmark draws over `motion-slow` with a single confident overshoot. Everywhere else, standard easing — overshoot on routine UI would feel unserious for money.
+5. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse toward `motion-instant`, slides become fades, and the chart renders fully drawn. Stays usable; just less kinetic.
+
+<!--
+OmD v0.1 Sources
+
+Token grounding (WebSearch + WebFetch, 2026-06-06):
+- Robinhood Green #00C805 — confirmed primary brand color across multiple brand
+  references and the 2024 COLLINS rebrand coverage.
+- Capsule Sans — confirmed custom typeface (refinement of Maison Neue / Milieu
+  Grotesque) with a custom 'R' wordmark, tuned for mobile legibility, via the
+  COLLINS x Robinhood rebrand writeups (the-brandidentity.com, Robinhood newsroom
+  "A visual identity that better reflects our vision").
+- robinhood.com (WebFetch) — confirmed marketing voice ("Investing for everyone",
+  "Join a new generation of investors", "Get started"/"Learn more" CTAs,
+  commission-free positioning, agentic/crypto/prediction-market expansion).
+
+Sources:
+- https://newsroom.aboutrobinhood.com/a-visual-identity-that-better-reflects-our-vision/
+- https://the-brandidentity.com/project/collins-robinhood-combine-make-investing-accessible-affordable-engaging
+- https://1000logos.net/robinhood-logo/
+- https://robinhood.com
+
+Not independently token-verified (editorial/secondary): exact neutral-gray ramp
+values, semantic loss-red #FF5000, focus-ring opacities, radius/padding specifics,
+and motion tokens are reasoned brand-consistent values for agent use, not published
+Robinhood design-system tokens. Brand color #00C805, Capsule Sans, dark-first
+aesthetic, gain-green/loss-red dualism, and marketing voice are grounded in sources.
+
+Personas (§13) are fictional archetypes informed by publicly described US retail-
+investing segments. Founding narrative (Tenev/Bhatt, 2013, commission-free thesis)
+is widely documented public history.
+-->

package/web/references/runwayml/DESIGN.md

@@ -10,6 +10,51 @@ logo:
   slug: runwayml
 verified: "2026-05-15"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    black: "#000000"
+    deep-black: "#030303"
+    surface-dark: "#1a1a1a"
+    white: "#ffffff"
+    near-white: "#fefefe"
+    cool-cloud: "#e9ecf2"
+    border-dark: "#27272a"
+    charcoal: "#404040"
+    near-charcoal: "#3f3f3f"
+    cool-slate: "#767d88"
+    mid-slate: "#7d848e"
+    muted-gray: "#a7a7a7"
+    cool-silver: "#c9ccd1"
+    light-silver: "#d0d4d4"
+    tailwind-gray: "#6b7280"
+    dark-link: "#0c0c0c"
+    footer-gray: "#999999"
+  typography:
+    family: { sans: "abcNormal", mono: "abcNormal" }
+    display-hero: { size: 48, weight: 400, lineHeight: 1.00, tracking: -1.2, use: "Hero, film-title presence" }
+    section:      { size: 40, weight: 400, lineHeight: 1.00, tracking: -1, use: "Feature section titles" }
+    subheading:   { size: 36, weight: 400, lineHeight: 1.00, tracking: -0.9, use: "Secondary section markers" }
+    card-title:   { size: 24, weight: 400, lineHeight: 1.00, use: "Article and card headings" }
+    feature-title: { size: 20, weight: 400, lineHeight: 1.00, use: "Small headings" }
+    body:         { size: 16, weight: 400, lineHeight: 1.40, tracking: -0.16, use: "Standard body, nav links" }
+    label:        { size: 14, weight: 500, lineHeight: 1.43, tracking: 0.35, use: "Metadata, uppercase section labels" }
+    small:        { size: 13, weight: 400, lineHeight: 1.30, tracking: -0.16, use: "Compact descriptions" }
+    micro:        { size: 11, weight: 450, lineHeight: 1.30, use: "Uppercase tags, tiny labels" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
+  shadow:
+    none: "none"
+  components:
+    button-default: { type: button, bg: "#000000", fg: "#ffffff", radius: 4, padding: "8px 12px", font: "14px/600 abcNormal", use: "Restrained button, blends into editorial flow" }
+    button-link: { type: button, bg: "#000000", fg: "#ffffff", radius: 4, padding: "4px 8px", font: "14px/600 abcNormal", use: "Inline link-style button" }
+    input-default: { type: input, bg: "#1a1a1a", fg: "#ffffff", radius: 4, padding: "8px 12px", font: "14px/400 abcNormal", use: "Minimal dark input, 1px #27272a border" }
+    card-photo: { type: card, radius: 8, padding: "0px", use: "Mixed-size image grid card, image fills frame, no shadow" }
+    card-dark: { type: card, bg: "#1a1a1a", fg: "#ffffff", radius: 8, padding: "16px", use: "Functional dark card, 1px #27272a border" }
+    card-alert: { type: card, bg: "#1a1a1a", radius: 16, padding: "24px", use: "Alert-style container, 1px #27272a border, larger radius" }
+    badge-default: { type: badge, fg: "#ffffff", radius: 4, padding: "2px 8px", font: "11px/600 abcNormal", use: "Uppercase label-style, 1px #27272a border" }
+  components_harvested: true
 ---
 
 # Design System Inspiration of Runway