oh-my-design-cli 1.6.6 → 1.7.0

package/web/references/ramp/DESIGN.md

@@ -0,0 +1,634 @@
+---
+id: ramp
+name: Ramp
+country: US
+category: fintech
+homepage: "https://ramp.com"
+primary_color: "#E5FE54"
+logo:
+  type: favicon
+  slug: "https://www.google.com/s2/favicons?domain=ramp.com&sz=128"
+verified: "2026-06-06"
+added: "2026-06-06"
+omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    primary: "#e5fe54"
+    lime-hover: "#d4ed3f"
+    lime-100: "#f4fcc9"
+    lime-50: "#fbfee8"
+    ink: "#1c1b17"
+    ink-700: "#3d3c37"
+    ink-600: "#56554f"
+    canvas: "#f7f7f5"
+    surface: "#ffffff"
+    grey-500: "#74726b"
+    grey-400: "#9c9a92"
+    grey-300: "#c9c7bf"
+    grey-200: "#e3e1da"
+    grey-100: "#efeee9"
+    success: "#1a7f4b"
+    error: "#d93f3f"
+    warning: "#e08a1e"
+    info: "#2f6fe0"
+    on-primary: "#1c1b17"
+  typography:
+    family: { sans: "Lausanne", serif: "Burgess", mono: "Lausanne Mono" }
+    display-hero:   { size: 72, weight: 400, lineHeight: 1.06, tracking: -0.02, use: "Marketing hero headlines (Burgess serif)" }
+    display-lg:     { size: 52, weight: 400, lineHeight: 1.12, tracking: -0.02, use: "Section openers, editorial (serif)" }
+    heading-1:      { size: 40, weight: 500, lineHeight: 1.15, tracking: -0.015, use: "Page titles in product" }
+    heading-2:      { size: 30, weight: 500, lineHeight: 1.27, tracking: -0.01, use: "Section headers" }
+    heading-3:      { size: 22, weight: 500, lineHeight: 1.36, tracking: -0.01, use: "Card titles, sub-sections" }
+    subtitle:       { size: 18, weight: 500, lineHeight: 1.44, use: "Navigation, list headers" }
+    body-lg:        { size: 17, weight: 400, lineHeight: 1.59, use: "Marketing body, descriptions" }
+    body:           { size: 15, weight: 400, lineHeight: 1.53, use: "Standard UI reading text" }
+    body-sm:        { size: 13, weight: 400, lineHeight: 1.46, use: "Secondary info, table cells" }
+    caption:        { size: 12, weight: 400, lineHeight: 1.33, tracking: 0.01, use: "Timestamps, fine print, labels" }
+    overline:       { size: 11, weight: 600, lineHeight: 1.27, tracking: 0.08, use: "Eyebrow labels, uppercase section tags" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 6, md: 8, lg: 16, full: 9999 }
+  shadow:
+    ambient: "rgba(28,27,23,0.05) 0px 1px 2px"
+    standard: "rgba(28,27,23,0.18) 0px 8px 24px"
+    elevated: "rgba(28,27,23,0.18) 0px 12px 40px"
+  components:
+    button-primary: { type: button, bg: "#e5fe54", fg: "#1c1b17", radius: 8, padding: "0 20px", font: "15px / 500", use: "Primary CTA — Get started, Get a demo (44px)" }
+    button-ink: { type: button, bg: "#1c1b17", fg: "#ffffff", radius: 8, padding: "0 20px", font: "15px / 500", use: "Strong action on light surfaces, default product CTA" }
+    button-secondary: { type: button, bg: "#ffffff", fg: "#1c1b17", radius: 8, padding: "0 20px", font: "15px / 500", use: "Secondary action, 1px #c9c7bf border" }
+    button-ghost: { type: button, fg: "#3d3c37", radius: 8, padding: "0 12px", font: "15px / 500", use: "Low-emphasis inline (Cancel, Back)" }
+    button-danger: { type: button, bg: "#d93f3f", fg: "#ffffff", radius: 8, padding: "0 20px", font: "15px / 500", use: "Destructive confirmation" }
+    input: { type: input, bg: "#ffffff", fg: "#1c1b17", radius: 8, padding: "11px 14px", font: "15px / 400", use: "Standard form input, 1px #c9c7bf border, lime focus ring" }
+    input-filled: { type: input, bg: "#f7f7f5", fg: "#1c1b17", radius: 8, padding: "11px 14px", font: "15px / 400", use: "Dense forms, search bars" }
+    card: { type: card, bg: "#ffffff", radius: 12, padding: "24px", use: "Workhorse surface — metrics, lists, panels, 1px #e3e1da border" }
+    card-savings: { type: card, bg: "#f4fcc9", radius: 12, padding: "24px", use: "Savings callout, lime-tinted, 1px #e5fe54 border" }
+    card-dark: { type: card, bg: "#1c1b17", fg: "#ffffff", radius: 16, padding: "32px", use: "Marketing feature card, lime accents pop on black" }
+    badge-lime: { type: badge, bg: "#e5fe54", fg: "#1c1b17", radius: 6, padding: "3px 8px", font: "12px / 600", use: "NEW / AI brand-emphasis tags" }
+    badge-success: { type: badge, fg: "#1a7f4b", radius: 6, padding: "3px 8px", font: "12px / 600", use: "Approved, reconciled, savings confirmed" }
+    badge-neutral: { type: badge, bg: "#efeee9", fg: "#56554f", radius: 6, padding: "3px 8px", font: "12px / 600", use: "Categories, metadata, default status" }
+    tab: { type: tab, fg: "#74726b", font: "15px / 500", use: "In-page section switching", active: "#1c1b17 text, 2px bottom border #1c1b17" }
+    segmented: { type: tab, bg: "#efeee9", radius: 8, padding: "6px 14px", font: "14px / 500", use: "View toggles (Month / Quarter / Year)", active: "#ffffff bg, #1c1b17 text" }
+    toast: { type: toast, bg: "#1c1b17", fg: "#ffffff", radius: 10, padding: "12px 16px", font: "14px / 500", use: "Transient confirmation, lime accent" }
+    dialog: { type: dialog, bg: "#ffffff", radius: 16, padding: "28px", use: "Confirmations, create-card flow, approval prompts" }
+    toggle: { type: toggle, bg: "#1c1b17", radius: 9999, use: "Boolean settings, white thumb, off #c9c7bf" }
+  components_harvested: true
+---
+
+# Design System Inspiration of Ramp
+
+## 1. Visual Theme & Atmosphere
+
+Ramp is the corporate-card and spend-management platform that made expense software feel like a premium productivity tool rather than an accounting chore. The brand's entire visual thesis is built on one audacious contrast: a near-black ink (`#1C1B17`) set against an electric lime-yellow (`#E5FE54`) so saturated it almost vibrates. This is not the cautious navy-and-grey of legacy fintech. It's confident, almost aggressive — a color that says "we move fast and we save you money," paired with typography that reads like an editorial business magazine.
+
+The page opens on a clean off-white canvas (`#F7F7F5`) or pure black hero sections, with the lime accent deployed sparingly and with intent — never as decoration, always as a signal of action or savings. Ramp's design language borrows from Swiss editorial design and modern brand studios: generous whitespace, tight type, oversized numerals announcing dollar amounts saved, and a serif/sans pairing that gives the brand a literary, considered voice unusual in the SaaS-fintech space.
+
+The custom typeface stack is the brand's quiet engine. **Lausanne** (a clean, neo-grotesque sans by Nizar Kazan / Weltkern) carries the UI, navigation, and body — precise, neutral, Helvetica-adjacent but warmer. **Burgess** (a contemporary serif) appears in display headlines and editorial moments, giving Ramp a high-end, almost magazine-cover gravitas. The pairing communicates the brand's positioning: finance software that is both rigorous (sans) and intelligent (serif).
+
+**Key Characteristics:**
+- Lime-yellow (`#E5FE54`) as the signature accent — high-voltage, used only for CTAs and savings signals
+- Near-black ink (`#1C1B17`) as the dominant brand color — warm, slightly green-tinted black
+- Lausanne (sans) for UI/body + Burgess (serif) for editorial display headlines
+- Off-white canvas (`#F7F7F5`) with high-contrast black hero sections
+- Oversized numerals announcing dollar savings — money as the hero element
+- Editorial Swiss layout: generous whitespace, tight tracking, asymmetric grids
+- Restrained color — black, off-white, lime, and a few muted neutrals; no rainbow palettes
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Ramp Lime** (`#E5FE54`): The signature accent. Primary CTAs, savings highlights, active selection, hover fills, brand moments. Electric yellow-green — the single most recognizable Ramp asset. Used sparingly and only where it signals action or value.
+- **Ramp Ink** (`#1C1B17`): The dominant brand color. Primary text, black hero backgrounds, dark buttons, footer. A warm near-black with a subtle green undertone (RGB 28, 27, 23) — never pure `#000000`.
+- **Off-White Canvas** (`#F7F7F5`): Page background, light surfaces. A soft, warm paper-white that reduces glare and reads premium against the black sections.
+- **Pure White** (`#FFFFFF`): Card surfaces, elevated panels, input fills on light backgrounds.
+
+### Lime Scale
+- **Lime 500** (`#E5FE54`): Core brand lime — CTA fills, key accents.
+- **Lime 600** (`#D4ED3F`): Hover/pressed state for lime CTAs — slightly deeper.
+- **Lime 100** (`#F4FCC9`): Soft lime-tinted background for highlight cards, savings callouts.
+- **Lime 50** (`#FBFEE8`): Faintest lime wash for subtle section backgrounds.
+
+### Neutral Scale
+- **Ink 900** (`#1C1B17`): Primary text, strongest headings.
+- **Ink 700** (`#3D3C37`): Emphasized body text, sub-headings.
+- **Ink 600** (`#56554F`): Standard body text on light surfaces.
+- **Grey 500** (`#74726B`): Secondary text, captions, metadata.
+- **Grey 400** (`#9C9A92`): Placeholder text, disabled labels.
+- **Grey 300** (`#C9C7BF`): Default borders, dividers.
+- **Grey 200** (`#E3E1DA`): Subtle dividers, input backgrounds, hover surfaces.
+- **Grey 100** (`#EFEEE9`): Section background tint, disabled surfaces.
+- **Off-White** (`#F7F7F5`): Page canvas.
+
+### Semantic
+- **Success Green** (`#1A7F4B`): Positive financial indicators, savings confirmed, approved states. Deliberately distinct from the brand lime so it reads as "status" not "brand."
+- **Error Red** (`#D93F3F`): Errors, declined transactions, destructive actions, overspend warnings.
+- **Warning Amber** (`#E08A1E`): Pending approvals, attention-needed, budget threshold alerts.
+- **Info Blue** (`#2F6FE0`): Informational accents, links in dense documentation contexts.
+
+### Surface & Borders
+- **Border Default**: `#E3E1DA` (grey200). Standard card borders, dividers.
+- **Border Strong**: `#C9C7BF` (grey300). Emphasized borders, active input outlines.
+- **Border on Dark**: `rgba(255,255,255,0.12)`. Dividers on black hero/footer sections.
+- **Overlay Scrim**: `rgba(28,27,23,0.6)`. Modal backdrop — warm ink-tinted dark.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display/Headlines (serif)**: `"Burgess", "Times New Roman", Georgia, serif` — editorial display moments, hero headlines, large pull-quotes.
+- **UI/Body (sans)**: `"Lausanne", "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` — navigation, body, buttons, tables, the entire product UI.
+- **Monospace/Numeric**: `"Lausanne Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, monospace` — financial figures in dense tables, ledger views (tabular alignment).
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Burgess (serif) | 72px | 400 | 76px (1.06) | -0.02em | Marketing hero headlines |
+| Display Large | Burgess (serif) | 52px | 400 | 58px (1.12) | -0.02em | Section openers, editorial |
+| Heading 1 | Lausanne | 40px | 500 | 46px (1.15) | -0.015em | Page titles in product |
+| Heading 2 | Lausanne | 30px | 500 | 38px (1.27) | -0.01em | Section headers |
+| Heading 3 | Lausanne | 22px | 500 | 30px (1.36) | -0.01em | Card titles, sub-sections |
+| Subtitle | Lausanne | 18px | 500 | 26px (1.44) | normal | Navigation, list headers |
+| Body Large | Lausanne | 17px | 400 | 27px (1.59) | normal | Marketing body, descriptions |
+| Body | Lausanne | 15px | 400 | 23px (1.53) | normal | Standard UI reading text |
+| Body Small | Lausanne | 13px | 400 | 19px (1.46) | normal | Secondary info, table cells |
+| Caption | Lausanne | 12px | 400 | 16px (1.33) | 0.01em | Timestamps, fine print, labels |
+| Overline | Lausanne | 11px | 600 | 14px (1.27) | 0.08em (UPPERCASE) | Eyebrow labels, section tags |
+| Number Display | Lausanne | 56px+ | 500 | tight (1.0) | -0.02em | Dollar savings — tabular nums |
+
+### Principles
+- **Serif for story, sans for system**: Burgess serif headlines carry the brand narrative on marketing surfaces; Lausanne sans carries the entire functional product. Never use serif inside dense product tables.
+- **Tight tracking on display**: Large headlines use negative letter-spacing (-0.015 to -0.02em) for a crisp editorial feel. Body text stays at normal tracking.
+- **Numbers as heroes**: Dollar amounts (savings, balances) use oversized Lausanne 500 with tabular numerals, right-aligned in tables, often the largest element on a marketing screen.
+- **Uppercase overlines**: Eyebrow/section labels use 11px uppercase Lausanne with 0.08em tracking — a recurring editorial signature.
+- **Restraint in weight**: Lausanne ships many weights; the UI uses 400 (body), 500 (headings/emphasis), and 600 (overlines, strong labels). Bold 700 is rare.
+
+## 4. Component Stylings
+
+### Buttons
+
+Ramp buttons are flat, confident, and tightly spaced. Radius is moderate (8px) — neither pill nor sharp. The lime CTA is the brand's hero element and uses ink-colored text for maximum contrast on the bright fill.
+
+**Primary (Lime)**
+- Background: `#E5FE54`
+- Text: `#1C1B17`
+- Border: none
+- Radius: 8px
+- Padding: 0 20px
+- Font: 15px / 500 / Lausanne
+- Height: 44px
+- Hover: background `#D4ED3F`
+- Pressed: background `#C7DF34`
+- Disabled: background `#EFEEE9`, text `#9C9A92`
+- Use: Primary CTA — "Get started", "Get a demo". The single most important action on a screen.
+
+**Primary (Ink)**
+- Background: `#1C1B17`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 8px
+- Padding: 0 20px
+- Font: 15px / 500 / Lausanne
+- Height: 44px
+- Hover: background `#3D3C37`
+- Use: Strong action on light surfaces where lime would be too loud; default product CTA.
+
+**Secondary (Outline)**
+- Background: transparent
+- Text: `#1C1B17`
+- Border: 1px solid `#C9C7BF`
+- Radius: 8px
+- Padding: 0 20px
+- Font: 15px / 500 / Lausanne
+- Height: 44px
+- Hover: background `#EFEEE9`, border `#1C1B17`
+- Use: Secondary action paired with a Primary button.
+
+**Tertiary (Ghost)**
+- Background: transparent
+- Text: `#3D3C37`
+- Border: none
+- Radius: 8px
+- Padding: 0 12px
+- Font: 15px / 500 / Lausanne
+- Hover: background `#EFEEE9`
+- Use: Low-emphasis inline action (Cancel, Back, table-row actions).
+
+**On-Dark (Lime on Black)**
+- Background: `#E5FE54`
+- Text: `#1C1B17`
+- Radius: 8px
+- Font: 15px / 500 / Lausanne
+- Use: CTA inside black hero/footer sections — the brand's signature hero button.
+
+**Danger**
+- Background: `#D93F3F`
+- Text: `#FFFFFF`
+- Radius: 8px
+- Padding: 0 20px
+- Font: 15px / 500 / Lausanne
+- Use: Destructive confirmation (delete card, revoke access).
+
+Size scale (height · font · radius): `small` 32px · 13px / 500 · 6px; `medium` (default) 44px · 15px / 500 · 8px; `large` 52px · 17px / 500 · 10px.
+
+### Inputs
+
+**Default**
+- Background: `#FFFFFF`
+- Text: `#1C1B17`
+- Border: 1px solid `#C9C7BF`
+- Radius: 8px
+- Padding: 11px 14px
+- Font: 15px / 400 / Lausanne
+- Placeholder: `#9C9A92`
+- Focus: border `#1C1B17`, ring `0 0 0 3px rgba(229,254,84,0.4)` (lime focus glow)
+- Use: Standard form input — most-used variant.
+
+**Filled (subtle)**
+- Background: `#F7F7F5`
+- Text: `#1C1B17`
+- Border: 1px solid transparent
+- Radius: 8px
+- Padding: 11px 14px
+- Font: 15px / 400 / Lausanne
+- Focus: background `#FFFFFF`, border `#1C1B17`
+- Use: Dense forms, search bars, settings panels.
+
+**Error**
+- Background: `#FFFFFF`
+- Text: `#1C1B17`
+- Border: 1px solid `#D93F3F`
+- Radius: 8px
+- Padding: 11px 14px
+- Font: 15px / 400 / Lausanne
+- Use: Validation failure — paired with inline help text in `#D93F3F` 13px.
+
+### Cards
+
+**Standard**
+- Background: `#FFFFFF`
+- Border: 1px solid `#E3E1DA`
+- Radius: 12px
+- Padding: 24px
+- Shadow: `0 1px 2px rgba(28,27,23,0.05)`
+- Use: The workhorse surface — metrics, lists, settings panels.
+
+**Savings Highlight**
+- Background: `#F4FCC9` (lime100)
+- Border: 1px solid `#E5FE54`
+- Radius: 12px
+- Padding: 24px
+- Shadow: none
+- Use: Savings callouts, "you saved $X" moments — the lime-tinted hero card.
+
+**Dark Feature**
+- Background: `#1C1B17`
+- Text: `#FFFFFF`
+- Border: none
+- Radius: 16px
+- Padding: 32px
+- Shadow: `0 8px 24px rgba(28,27,23,0.18)`
+- Use: Marketing feature cards, premium product highlights — lime accents pop on black.
+
+**Compact (list item)**
+- Background: `#FFFFFF`
+- Border: 1px solid `#E3E1DA`
+- Radius: 8px
+- Padding: 14px 16px
+- Shadow: none
+- Use: Transaction rows, dense list items.
+
+### Badges
+
+**Lime (Brand)**
+- Background: `#E5FE54`
+- Text: `#1C1B17`
+- Radius: 6px
+- Padding: 3px 8px
+- Font: 12px / 600 / Lausanne
+- Use: "NEW", "AI", brand-emphasis tags.
+
+**Success**
+- Background: `rgba(26,127,75,0.12)`
+- Text: `#1A7F4B`
+- Radius: 6px
+- Padding: 3px 8px
+- Font: 12px / 600 / Lausanne
+- Use: Approved, reconciled, savings confirmed.
+
+**Warning**
+- Background: `rgba(224,138,30,0.14)`
+- Text: `#B36E14`
+- Radius: 6px
+- Padding: 3px 8px
+- Font: 12px / 600 / Lausanne
+- Use: Pending approval, threshold alert.
+
+**Error**
+- Background: `rgba(217,63,63,0.12)`
+- Text: `#C23434`
+- Radius: 6px
+- Padding: 3px 8px
+- Font: 12px / 600 / Lausanne
+- Use: Declined, over budget, flagged.
+
+**Neutral**
+- Background: `#EFEEE9`
+- Text: `#56554F`
+- Radius: 6px
+- Padding: 3px 8px
+- Font: 12px / 600 / Lausanne
+- Use: Categories, metadata, default status.
+
+### Tabs
+
+**Underline (default)**
+- Container: bottom border 1px `#E3E1DA`
+- Inactive: text `#74726B`, 15px / 500
+- Active: text `#1C1B17`, 2px bottom border `#1C1B17`
+- Use: In-page section switching (Transactions / Cards / Reports).
+
+**Segmented**
+- Background: `#EFEEE9`
+- Radius: 8px
+- Padding: 4px (track) / 6px 14px (item)
+- Inactive: text `#74726B`
+- Active: background `#FFFFFF`, text `#1C1B17`, shadow `0 1px 2px rgba(28,27,23,0.08)`
+- Font: 14px / 500 / Lausanne
+- Use: View toggles (Month / Quarter / Year).
+
+### Toasts
+
+**Default**
+- Background: `#1C1B17`
+- Text: `#FFFFFF`
+- Radius: 10px
+- Padding: 12px 16px
+- Shadow: `0 8px 24px rgba(28,27,23,0.2)`
+- Font: 14px / 500 / Lausanne
+- Accent: lime `#E5FE54` icon or left-bar for success
+- Use: Transient confirmation ("Card created", "Receipt matched").
+
+### Dialogs
+
+**Centered Modal**
+- Background: `#FFFFFF`
+- Radius: 16px
+- Padding: 28px
+- Shadow: `0 12px 40px rgba(28,27,23,0.18)`
+- Backdrop: `rgba(28,27,23,0.6)`
+- Use: Confirmations, create-card flow, approval prompts.
+
+### Toggles
+
+**Default**
+- Track: `#1C1B17` (on) / `#C9C7BF` (off)
+- Thumb: `#FFFFFF` 18px circle, shadow `0 1px 2px rgba(28,27,23,0.2)`
+- Radius: 9999px
+- Note: "on" uses ink-black, not lime — lime is reserved for primary actions, not stateful settings.
+- Use: Boolean settings (auto-approve, notifications).
+
+
+**Tier 1 sources:** https://ramp.com (live production site, verified via live DOM getComputedStyle).
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4px
+- Common values: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px
+- Section vertical rhythm: 96-128px between marketing sections (generous editorial breathing room)
+- Card internal padding: 24px standard, 32px for feature cards
+
+### Grid & Container
+- Max content width: 1200px (marketing), 1440px (product app shell)
+- Marketing: 12-column grid, 24px gutters, asymmetric editorial layouts encouraged
+- Product: persistent left sidebar (~240px) + fluid content area
+- Horizontal page padding: 24px mobile, 64px+ desktop
+
+### Whitespace Philosophy
+- **Editorial generosity**: Marketing pages use magazine-level whitespace — headlines breathe, sections are widely separated. The opposite of dense legacy fintech.
+- **Product density when earned**: Transaction tables and ledger views are dense and tabular; the app trusts power users with information.
+- **Numbers get room**: Large dollar figures are surrounded by deliberate negative space to land with impact.
+
+### Border Radius Scale
+- Compact (6px): Badges, small chips, inline tags
+- Standard (8px): Buttons, inputs, compact cards, segmented controls
+- Comfortable (12px): Standard cards, list containers
+- Large (16px): Modals, dark feature cards
+- Pill (9999px): Toggles, filter chips, avatar groups
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, 1px border | Page background, bordered cards, inputs |
+| Subtle (Level 1) | `0 1px 2px rgba(28,27,23,0.05)` | Standard cards, slight lift |
+| Standard (Level 2) | `0 4px 12px rgba(28,27,23,0.08)` | Dropdowns, popovers, hover-lifted cards |
+| Elevated (Level 3) | `0 8px 24px rgba(28,27,23,0.18)` | Dark feature cards, floating panels, toasts |
+| Modal (Level 4) | `0 12px 40px rgba(28,27,23,0.18)` | Dialogs, modals, command palette |
+
+**Shadow Philosophy**: Ramp shadows are warm (ink-tinted, never pure black) and restrained. On light surfaces, the brand prefers a crisp 1px border over a soft shadow — flatness reads as precision and modernity. Depth is reserved for genuinely floating elements. The drama in Ramp's design comes from color contrast (lime on black), not from elevation stacks.
+
+### Blur Effects
+- Sticky nav applies subtle backdrop blur (`backdrop-filter: blur(12px)`) with semi-opaque off-white on scroll.
+- Command palette / search overlays use a light backdrop blur over the scrim.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use lime `#E5FE54` only for primary CTAs and savings/value signals — keep it rare and intentional
+- Pair lime fills with ink `#1C1B17` text, never white text (contrast + brand consistency)
+- Use ink `#1C1B17` (warm near-black), never pure `#000000`, for text and dark surfaces
+- Pair Burgess serif headlines with Lausanne sans body for editorial gravitas
+- Right-align and use tabular numerals for all financial figures
+- Prefer 1px borders over shadows on light cards
+- Use uppercase Lausanne overlines (11px, 0.08em tracking) for section eyebrows
+
+### Don't
+- Don't scatter lime across the UI — it loses its signal value if overused
+- Don't use lime as a background for long text (poor legibility) or for stateful toggles
+- Don't use white text on lime fills — always ink text
+- Don't use Burgess serif inside dense product tables — Lausanne only
+- Don't use pure black `#000000` — the brand black is warm `#1C1B17`
+- Don't add heavy multi-layer shadows — Ramp's depth is flat and border-driven
+- Don't use the brand lime as a semantic "success" color — success is `#1A7F4B`
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, stacked sections, 24px padding, hamburger nav |
+| Tablet | 640-1024px | 2-column grids, condensed sidebar, larger touch targets |
+| Desktop | 1024-1440px | Full 12-col grid, persistent sidebar, editorial layouts |
+| Wide | >1440px | Centered 1200-1440px max-width, expanded whitespace |
+
+### Touch Targets
+- Buttons: minimum 44px height on touch devices
+- Table rows: minimum 48px row height for tap-friendly transaction lists
+- Nav/menu items: minimum 44px tap height
+
+### Collapsing Strategy
+- Product sidebar collapses to icon-rail then off-canvas drawer on tablet/mobile
+- Multi-column dashboards stack to single column below 640px
+- Dense data tables become card-stacked rows on mobile (label-value pairs)
+- Sticky bottom CTA bar on mobile marketing pages
+
+### Image Behavior
+- Card product shots and screenshots: full-width, maintain aspect ratio, rounded 12-16px corners
+- Customer logos: greyscale `#74726B`, uniform height (~28px), in a logo strip
+- Hero imagery often replaced by oversized typographic numerals rather than photos
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Ramp Lime (`#E5FE54`) with ink text (`#1C1B17`)
+- CTA Hover: Lime 600 (`#D4ED3F`)
+- Dark CTA / strong action: Ink (`#1C1B17`), white text
+- Page background: Off-White (`#F7F7F5`)
+- Card surface: White (`#FFFFFF`)
+- Heading text: Ink (`#1C1B17`)
+- Body text: Ink 600 (`#56554F`)
+- Caption/secondary: Grey 500 (`#74726B`)
+- Placeholder: Grey 400 (`#9C9A92`)
+- Border: Grey 200 (`#E3E1DA`)
+- Success: Green (`#1A7F4B`)
+- Error: Red (`#D93F3F`)
+- Warning: Amber (`#E08A1E`)
+
+### Example Component Prompts
+- "Create a savings card: lime100 (`#F4FCC9`) bg, 1px lime (`#E5FE54`) border, 12px radius, 24px padding. Overline 'TOTAL SAVED' 11px uppercase Lausanne 600, 0.08em tracking, #56554F. Amount '$1.2M' 56px Lausanne 500, #1C1B17, tabular numerals. No shadow."
+- "Build a primary CTA: lime `#E5FE54` bg, ink `#1C1B17` text, 15px Lausanne 500, 44px height, 8px radius, 0 20px padding. Hover: bg `#D4ED3F`."
+- "Design a transaction row: white bg, 1px `#E3E1DA` border, 8px radius, 48px min-height, 14px 16px padding. Left: 28px merchant logo + name (15px Lausanne 500, #1C1B17) + category badge (neutral, #EFEEE9). Right: amount (15px Lausanne 500, tabular, right-aligned, #1C1B17)."
+- "Create a dark feature card: ink `#1C1B17` bg, 16px radius, 32px padding. Serif Burgess headline 30px #FFFFFF. Body 17px Lausanne 400 rgba(255,255,255,0.7). Lime `#E5FE54` text-link CTA."
+- "Design an input with lime focus: white bg, 1px `#C9C7BF` border, 8px radius, 11px 14px padding, 15px Lausanne. Focus: border `#1C1B17` + ring 0 0 0 3px rgba(229,254,84,0.4)."
+
+### Iteration Guide
+1. Lime `#E5FE54` is precious — use it only for the single primary action or a savings signal
+2. All blacks are warm ink `#1C1B17`, never `#000000`
+3. Headlines on marketing can be Burgess serif; all product UI is Lausanne sans
+4. Financial numbers: Lausanne 500, tabular numerals, right-aligned
+5. Prefer 1px borders to shadows on light surfaces; reserve shadow for floating elements
+6. Section eyebrows: 11px uppercase Lausanne 600, 0.08em tracking
+7. Default radius 8px (controls), 12px (cards), 16px (modals/dark cards)
+
+## 10. Voice & Tone
+
+Ramp speaks like a sharp, time-respecting finance operator: direct, metric-driven, confident, never fluffy. The brand sells time and money saved, so copy leads with numbers ("close books 75% faster", "save an average of 5%"). Sentences are short and declarative. No exclamation marks, no startup-cute. There's a dry confidence — the product is assumed to be obviously better, so the copy states outcomes rather than pleading.
+
+| Context | Tone |
+|---|---|
+| CTAs | Imperative, two words ("Get started", "Get a demo", "Book a call"). |
+| Headlines | Outcome-led, often a number ("Save more. Close faster."). Serif, editorial. |
+| Success toasts | Past-tense, single clause ("Card created", "Receipt matched"). |
+| Error messages | Specific, blameless, actionable ("This card is over its monthly limit. Increase the limit or use another card."). |
+| Empty states | One line explaining the value, one action ("No transactions yet. Issue a card to get started."). |
+| Savings moments | Lead with the dollar figure, large and bold. The number is the message. |
+| Legal / compliance | Plain, precise, no jargon padding — but formal where regulation requires. |
+
+**Forbidden tone.** No "Oops!", no exclamation-heavy enthusiasm, no vague "powerful, seamless, robust" filler adjectives. Never bury the number. Avoid hedging ("approximately", "up to" when an exact figure is known on the user's own data).
+
+## 11. Brand Narrative
+
+Ramp was founded in 2019 by **Eric Glyman** and **Karim Atiyeh** (who had previously built and sold Paribus to Capital One). The founding insight inverted the entire corporate-card industry: every incumbent card issuer made more money when customers spent more, so their "rewards" quietly incentivized waste. Ramp built the opposite — a corporate card and spend-management platform whose explicit product goal is to help companies **spend less**. The brand promise is encoded in the name: Ramp helps you ramp *down* costs and ramp *up* efficiency.
+
+That contrarian thesis shapes the entire visual system. The electric lime `#E5FE54` is the color of "found money" — energetic, slightly disruptive, impossible to ignore — set against a serious editorial ink-and-serif foundation that signals Ramp is a rigorous financial tool, not a toy. The design rejects two clichés simultaneously: the cold navy institutionalism of legacy finance (Amex, Concur, SAP) and the rounded pastel friendliness of consumer fintech. Ramp occupies a distinct middle — premium, editorial, fast, and confident.
+
+Ramp grew explosively, becoming one of the fastest-growing SaaS companies in history and reaching a multi-billion-dollar valuation within a few years, backed by investors including Founders Fund, Stripe, Thrive Capital, and Sequoia. By 2024-2025 the brand leaned hard into AI — "Ramp Intelligence" — positioning itself as the platform where finance work gets automated away. The design absorbed this without changing its core: the lime still means action, the serif still means intelligence, and the numbers still tell the story.
+
+What Ramp refuses: the apologetic, dense, jargon-laden UX of legacy ERP/expense tools; the playful illustration-heavy style of consumer apps; and any design move that hides the dollar figure. In Ramp's world, the savings number is always the hero.
+
+## 12. Principles
+
+1. **The number is the hero.** Dollar amounts saved or moved are the largest, most deliberate element on any screen. Never bury a financial figure in body text.
+2. **Lime is a signal, not a color.** `#E5FE54` appears only where it means "act here" or "value found." Used everywhere, it means nothing. Restraint is what makes it powerful.
+3. **Warm black, never cold.** The brand black is `#1C1B17`. Pure `#000000` reads as default and cheap; the warm ink reads as considered.
+4. **Serif for intelligence, sans for system.** Burgess carries the brand's editorial voice; Lausanne carries the functional product. Mixing them wrongly (serif in a table) breaks the system.
+5. **Flat is precise.** Prefer 1px borders to shadows. Depth is earned only by genuinely floating elements. Flatness communicates modernity and rigor.
+6. **Editorial whitespace on marketing, earned density in product.** Marketing breathes like a magazine; the app trusts power users with dense, tabular data.
+7. **State outcomes, don't sell them.** The copy assumes the product wins. It reports results ("75% faster") rather than persuading.
+8. **Contrast over decoration.** The brand's drama comes from lime-on-black contrast, not gradients, illustrations, or shadow stacks.
+
+## 13. Personas
+
+*Personas below are fictional archetypes informed by publicly described corporate-spend-management user segments, not individual people.*
+
+**Maya, 34, San Francisco.** VP of Finance at a 200-person Series B startup. Lives in the Ramp dashboard during month-end close. Cares about one thing: closing the books faster with fewer manual reconciliations. She wants dense, scannable transaction tables, fast filtering, and clear approval queues. Editorial flourishes are wasted on her — but the "you saved $X this month" number genuinely lands, because she reports it to the CFO. Power user; keyboard shortcuts; impatient with latency.
+
+**Daniel, 41, Austin.** Operations lead at a fast-growing logistics company. Issues and manages dozens of employee cards. Needs to set spending limits, see who spent what, and freeze a card in two clicks. Doesn't think of himself as a "finance person" — he needs the UI to be obvious and the dangerous actions (freeze, revoke) to be clearly destructive-styled. Trusts the lime CTA to be the "right next step."
+
+**Priya, 29, New York.** Marketing manager who is just a *spender* on the platform — she submits receipts and requests card limits. Touches Ramp a few times a week, mostly on mobile. Wants the receipt-upload and reimbursement flow to be frictionless and fast. The brand's polish (serif headlines, clean cards) makes her trust that the expense process won't be a nightmare. Judges the whole product by how painless one receipt upload is.
+
+## 14. States
+
+| State | Treatment |
+|---|---|
+| **Empty (first use)** | Single line of `#56554F` body text explaining the value, plus one primary action. ("No cards yet. Issue your first card to start tracking spend." + lime/ink CTA.) Never a cartoon illustration; a simple line icon at most. |
+| **Empty (filter cleared)** | One line of `#74726B` caption ("No transactions match these filters."). A ghost "Clear filters" link, no big button. |
+| **Loading (first paint)** | Skeleton blocks at `#EFEEE9` matching final layout. Financial figures render as `—` until resolved, never as skeleton bars. |
+| **Loading (refresh)** | Subtle top progress bar in lime `#E5FE54`. Content stays visible with prior values. Non-blocking. |
+| **Error (inline field)** | `#D93F3F` 1px border on input, helper text below in `#D93F3F` 13px. One actionable sentence. |
+| **Error (toast)** | Ink `#1C1B17` background, white 14px text, red `#D93F3F` left-bar accent, 4s auto-dismiss. |
+| **Error (screen-blocking)** | Reserved for outages. Off-white screen, centered `#1C1B17` 18px/500 message, ink retry button. No illustration. |
+| **Success (inline)** | Brief `#F4FCC9` (lime100) flash behind the updated row, 300ms fade. For routine confirmations like a saved setting. |
+| **Success (action confirmed)** | Toast with lime `#E5FE54` checkmark icon, ink background, white text. For card-created, receipt-matched. |
+| **Savings milestone** | Dedicated celebratory card — lime100 bg, oversized dollar figure (56px Lausanne 500), one line of context. The brand's signature positive moment. |
+| **Skeleton** | `#EFEEE9` blocks at exact final dimensions, 1.2s shimmer with 6% white highlight, rounded at component radius. Never on dollar figures (show `—`). |
+| **Disabled** | Buttons drop to `#EFEEE9` bg / `#9C9A92` text. Inputs keep their `#C9C7BF` border so geometry is stable if re-enabled. |
+| **Destructive confirm** | Red `#D93F3F` button required to confirm freeze/revoke/delete; the action is never the default-focused button in the dialog. |
+
+## 15. Motion & Easing
+
+**Durations:**
+
+| Token | Value | Use |
+|---|---|---|
+| `motion-instant` | 0ms | Toggle flips, checkbox state |
+| `motion-fast` | 120ms | Hover, focus rings, button press |
+| `motion-standard` | 220ms | Default — dropdowns, card hover-lift, tab switches |
+| `motion-slow` | 360ms | Emphasized — modal open, savings number count-up start |
+| `motion-page` | 300ms | Route transitions, sidebar navigation |
+
+**Easings:**
+
+| Token | Curve | Use |
+|---|---|---|
+| `ease-enter` | `cubic-bezier(0.16, 1, 0.3, 1)` | Things appearing — modals, dropdowns, toasts (soft decelerate) |
+| `ease-exit` | `cubic-bezier(0.4, 0, 1, 1)` | Things leaving — dismissals, collapses |
+| `ease-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | Two-way — hover-lift, tab content, accordions |
+| `ease-emphasis` | `cubic-bezier(0.22, 1, 0.36, 1)` | Savings number count-up, milestone reveals (smooth, confident) |
+
+**Signature motions.**
+
+1. **Savings count-up.** Dollar figures animate by counting up from a lower value to the final number over `motion-slow` with `ease-emphasis`. The number arriving is the emotional payoff — the single most important animation in the brand. Tabular numerals keep the layout stable during count-up.
+2. **Card hover-lift.** On hover, interactive cards lift with a `0 4px 12px rgba(28,27,23,0.08)` shadow and a 1px translateY over `motion-standard / ease-standard`. Subtle, premium, never bouncy.
+3. **Lime CTA press.** The primary lime button darkens to `#C7DF34` and scales to 0.98 over `motion-fast` — a crisp, tactile commit, no overshoot.
+4. **Modal entrance.** Modals scale from 0.96 to 1.0 and fade in over `motion-slow / ease-enter`, backdrop scrim fades `rgba(28,27,23,0)` → `rgba(28,27,23,0.6)` in sync.
+5. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`. The savings count-up snaps directly to the final figure; crossfades replace slides. Fully usable, just static.
+
+<!--
+OmD v0.1 Sources — Ramp
+
+Token grounding:
+- Brand lime/yellow-green #E5FE54: Ramp's signature accent, widely documented brand
+  asset and consistent with the catalog brief hint (#E5FE54-ish). Lime scale steps
+  (600/100/50) are interpolated for a usable system.
+- Brand black #1C1B17 (RGB 28,27,23): verified via brandcolorcode.com/ramp
+  (2026-06-06) as Ramp's listed brand black — a warm, slightly green-tinted near-black.
+- Typography Lausanne (sans) + Burgess (serif): verified via WebSearch / Fonts In Use
+  (fontsinuse.com "Ramp identity") — "Ramp uses Lausanne and Burgess fonts in their
+  visual identity, applied on the card, the website, the application, and videos."
+- Voice/tone: grounded in ramp.com marketing copy (WebFetch 2026-06-06) — metric-led,
+  outcome-driven, "close books 75% faster", AI-automation positioning.
+
+Founders (Eric Glyman, Karim Atiyeh, ex-Paribus/Capital One), 2019 founding, and
+investor list (Founders Fund, Stripe, Thrive, Sequoia) are widely documented public
+facts used for narrative context, not Ramp design-system statements.
+
+Neutral scale, semantic colors, component geometry (radii, paddings, heights),
+elevation tokens, and motion tokens are an internally consistent system synthesized
+to match Ramp's observable editorial-fintech aesthetic; exact in-app token values
+were not published by Ramp and should be treated as a faithful reconstruction.
+
+Personas (§13) are fictional archetypes informed by publicly described corporate
+spend-management user segments. Any resemblance to specific individuals is unintended.
+-->

package/web/references/rayark/DESIGN.md

@@ -10,6 +10,28 @@ logo:
   slug: "https://www.google.com/s2/favicons?domain=rayark.com&sz=128"
 verified: "2026-06-01"
 omd: "0.1"
+tokens:
+  source: prose-derived
+  extracted: "2026-06-09"
+  colors:
+    ground: "#1a1c1d"
+    accent: "#5fe0ee"
+    on-dark: "#ffffff"
+    on-accent: "#000000"
+  typography:
+    family: { sans: "Noto Sans", mono: "Noto Sans" }
+    nav:    { size: 20, weight: 400, use: "Navigation links, white on dark" }
+    body:   { size: 16, weight: 400, use: "Running text" }
+    button: { size: 16, weight: 700, use: "Primary CTA label" }
+  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
+  rounded: { sm: 3, md: 3, lg: 3, full: 9999 }
+  shadow:
+    none: "none"
+  components:
+    button-primary: { type: button, bg: "#5fe0ee", fg: "#000000", radius: 3, padding: "0 16px", font: "16/700", use: "Primary CTA 'Play Now', 2px solid #ffffff border, 40px height" }
+    nav-top: { type: tab, bg: "transparent", fg: "#ffffff", font: "20/400", use: "Transparent header, white nav links, 70px height" }
+    surface: { type: card, bg: "#1a1c1d", fg: "#ffffff", font: "16/400", use: "Near-black page canvas" }
+  components_harvested: true
 ---
 # Design System Inspiration of Rayark