# Ramp — Marketing Site Design Spec

> Source: ramp.com (live DOM, computed styles), 2026-07-13 (desktop 1512px).
> Coverage: public homepage (hero + email capture + product sections). Dashboard: pending login (`needs-dashboard`). Responsive: breakpoints from stylesheets only; mobile rendering not verified.

## 1. Visual Theme & Atmosphere

Confident, minimal fintech built on a bright white canvas, warm near-black ink and one electric acid-lime accent. The whole page is set in a single neo-grotesque (Lausanne) and structured by huge, tight headlines with generous whitespace rather than borders or color blocks. Recognition is instant from two things: the acid-lime `#e4f222` button that carries every primary action, and the oversized Lausanne display type reading almost black. It deliberately avoids gradients, shadows and decoration — the surface is flat, editorial and precise, punctuated only by small uppercase mono-styled labels and live product/finance UI. Feels: bright, precise, editorial, confident.

## 2. Color Palette & Roles

### Core
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#0c0a08` | Primary text, headings, button labels (warm near-black; the dominant color) |
| canvas | `#ffffff` | Page background, cards |
| lime | `#e4f222` | Signature accent — every primary button fill |
| black | `#000000` | Occasional pure-black detail |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| surface-warm | `#f4f2f0` / `#f4f2ef` | Warm off-white insets, section tint |
| border-warm | `#d2cecb` | Hairline borders, muted rules/icons |
| border-cool | `#e5e7eb` | Cooler hairline dividers |
| dark-900 | `#141414` | Deep dark UI |
| dark-800 | `#1d1d1d` | Dark sections / product-shell bg |
| dark-700 | `#232323` / `#272727` | Dark surface steps |

Rule: chrome is a warm neutral (ink on white); saturated color is exactly one hue — acid-lime `#e4f222` — reserved for primary CTAs. No secondary accent.

## 3. Typography Rules

- Font stack: `lausanne, "lausanne Fallback", -apple-system, sans-serif` (single neo-grotesque everywhere).
- Body: 16px / 24px / 400 / `#0c0a08`.
- One weight — 400 — carries the whole page (headline included); Lausanne's cut reads medium-heavy at display sizes.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 64 | 400 | -0.01px (~0) |
| Subhead | 18 / 24 | 400 | normal |
| Section (h2) | 32–40 | 400 | normal |
| Body | 16 / 24 | 400 | normal |
| Nav / UI | 16 | 400 | normal |
| Eyebrow label | 10 | 400 | +0.18px, uppercase |

Patterns: near-zero tracking on huge display type; tiny 10px uppercase eyebrow labels with slight positive tracking. No bold weights — weight stays 400 throughout, letting the type face (not weight) carry hierarchy via size.

## 4. Component Stylings

### Buttons
- **Primary (lime)**: bg `#e4f222`, text `#0c0a08`, no border, radius 6px, height 34px (nav) → 51px (hero), padding `0 20px` / `12px 16px`, 14–16px/400, no shadow. The single button style — used for "See a demo", "Get started for free".
- **Ghost / text ("Sign in")**: transparent, text `#0c0a08`, no radius, inline; hover underline/opacity.
- Nav dropdown triggers: plain text `#0c0a08` with a caret.

### Inputs
- Hero email capture: a rounded container (radius 10px) with a hairline border, transparent 60px-tall field (padding `0 16px 0 24px`, placeholder muted) and the lime button nested at the right. Field text `#0c0a08`.

### Cards / sections
- Flat white or warm `#f4f2f0` blocks, hairline borders `#d2cecb`/`#e5e7eb`, no drop shadow; large radii on framed product panels (~10–16px).

### Eyebrow / meta labels
- 10px uppercase Lausanne, tracking +0.18px, ink; often paired with a small pill showing a live figure (e.g. a processing rate percentage) on a warm `#f4f2f0` chip.

### Nav
- h 62px, white, no bottom border; wordmark left, center dropdown links (Products/Partners/Solutions/Resources) + Customers/Pricing, right `Sign in` ghost + lime `See a demo` pill.

## 5. Layout Principles

- Wide, whitespace-first layout; hero copy is left-aligned (not centered), flush to a ~100px left margin.
- Spacing on a generous grid; large vertical section rhythm.
- Hero anatomy: tiny uppercase eyebrow + live figure pill → 64px Lausanne headline → 18px subhead → bordered email-capture with nested lime CTA → full-width product/video panel below.
- Structure comes from type scale and whitespace, not borders or color fills; dark `#1d1d1d` product-shell panels provide contrast.

## 6. Depth & Elevation

- Radii: buttons 6px, inputs/containers 10px, framed panels ~10–16px.
- Control heights: nav button 34px, hero button 51px, hero field 60px.
- Elevation: essentially flat — no drop shadows observed on buttons or cards; separation is by whitespace and hairline borders (`#d2cecb`/`#e5e7eb`).

## 7. Motion

- Restrained; micro-transitions (~150–200ms) on hover for buttons/links. The homepage features autoplaying product/finance UI animation in the hero panel rather than page-level scroll effects.
- No heavy scroll-jacking library detected in the header; motion is confined to product demo panels.

## 8. Backgrounds, Effects & WebGL

- Flat white canvas; warm off-white `#f4f2f0` and dark `#1d1d1d` section blocks. No gradient washes, no glow, no grain on the marketing chrome. The only motion/imagery is embedded product UI (animated card/expense/dashboard demos) inside framed panels. No canvas/WebGL or background video observed on the chrome itself.

## 9. Do's and Don'ts

### Do
- Keep the canvas bright white with warm near-black ink `#0c0a08`.
- Use exactly one accent — acid-lime `#e4f222` — and only on primary buttons.
- Set everything in Lausanne (one neo-grotesque), weight 400; let size, not weight, carry hierarchy.
- Make headlines huge (64px) with near-zero tracking; keep eyebrows tiny (10px) uppercase with +0.18px tracking.
- Use 6px button radius, 10px input/container radius; keep surfaces flat with hairline borders, no shadows.
- Left-align hero copy with generous whitespace; pair labels with a live-figure pill on a warm chip.
- Use warm off-white `#f4f2f0` for insets and `#1d1d1d` for dark product-shell contrast.

### Don't
- Don't add a second accent color, gradients, or glow — lime is the only saturated hue.
- Don't use bold weights or a second type family — weight stays 400 in Lausanne.
- Don't lean on drop shadows; keep elevation flat with whitespace + hairlines.
- Don't center the hero or crowd it — whitespace is the layout.
- Don't round buttons to full pills — buttons are 6px.

## 10. Responsive Behavior

- Breakpoints in stylesheets (typical 768 / 1024 / 1280). Nav collapses to a menu button; the 64px headline scales down and the hero email-capture stacks.
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#0c0a08` · Muted `#d2cecb` · Border `#e5e7eb` · Accent lime `#e4f222`
- Font: `Lausanne, sans-serif` · Body: 16px · Radius: 6px button / 10px input · Control height: 34–51px
- Focus: hairline container border, ink text · Hover: subtle darken on lime CTA

<ramp_design_language>
Use the Ramp design language: a bright white canvas with warm near-black ink #0c0a08, set entirely in Lausanne (one neo-grotesque) at a single 400 weight so size — not weight — carries hierarchy (64px display headlines at ~zero tracking, tiny 10px uppercase eyebrow labels at +0.18px tracking). There is exactly one accent, acid-lime #e4f222, used only on primary button fills (ink text, 6px radius, 34–51px tall, no border, no shadow); everything else is ghost text. Surfaces are flat — warm off-white #f4f2f0 insets and dark #1d1d1d product-shell blocks — separated by whitespace and hairline borders #d2cecb/#e5e7eb, never drop shadows. Layout is whitespace-first and left-aligned: tiny uppercase eyebrow + live-figure pill, huge Lausanne headline, 18px subhead, a bordered email-capture (10px radius) with the lime CTA nested inside, then framed panels of animated product UI. Motion is restrained (~150ms hover); the only movement is embedded finance-UI demos, no scroll effects or gradients. Feels: bright, precise, editorial, confident. Avoid: a second accent or type family, bold weights, gradients/glow/shadows, full-pill buttons, and centered or crowded hero copy.
</ramp_design_language>