Minimal spend-management fintech: a bright white canvas with warm near-black ink, set entirely in Lausanne at one 400 weight, one acid-lime #e4f222 accent on every button, flat shadowless surfaces and a whitespace-first, left-aligned hero.
Browse Ramp in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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.
lausanne, "lausanne Fallback", -apple-system, sans-serif (single neo-grotesque everywhere).#0c0a08.| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.