Light interfaceMeasured ramp.com

Ramp

A bold, no-nonsense finance tool that uses a striking lime-green accent to stand out.

This page is styled with Ramp’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#F4F2F0
Cards, panels, menus

Text#0C0A08
Headings and body

Muted text#0C0A08
Secondary info

Line#E5E5E5
Dividers and outlines

Accent#E4F222
Main button, links, selection

On accent#0C0A08
Text on the accent

Contrast

Text on background 19.8:1Muted on background 19.8:1Text on accent 16.0:1

Every colour found on their site

#0C0A08#FFFFFF#F4F2F0#1F1F1D#1A1919#E4F222

Typography

Headings use Lausanne (company-only; shown here with the free look-alike Inter Tight). Body text uses Lausanne (company-only; shown with Inter Tight).

h1	Lausanne · 64px · 400 · -0.01px	Time is money. Save both.
h2	Lausanne · 28px · 400	Join 70,000 of the world’s most ambitious companies growing
h3	Lausanne · 24px · 400	Cards & Expenses that handle themselves
p	Lausanne · 14px · 400	New: AI Token Spend Management — see, understand, and contro
li	Lausanne · 16px · 400	Products

Corners & shadows

Corner sizes used

12px

6px

4px

pill

10px

Shadows

Shadow 1

Shadow 2

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Ramp’s live website. Click to enlarge.

Buttons · 3

Ramp button: See a demo — #E4F222 · corners 6px · 34px

Ramp button: Get started — #1A1919 · corners 6px · 34px

Ramp button: View Demo — #F4F2F0 · corners 6px · 43px

Navigation bar · 1

Ramp Navigation bar: New: AI Token Spend Management — see, un — no fill · square · Lausanne 16px

Buttons · 4

Ramp Buttons: See a demo — fill #E4F222 · corners 6px · Lausanne 14px

Ramp Buttons: Get started — fill #1A1919 · corners 6px · Lausanne 14px

Ramp Buttons: Get started for free — fill #E4F222 · corners 6px · Lausanne 16px

Ramp Buttons: View Demo — fill #F4F2F0 · corners 6px · Lausanne 16px

Inputs and search · 1

Ramp Inputs and search: What’s your work email? — no fill · corners 10px · Lausanne 16px

Cards and panels · 2

Ramp Cards and panels: $1M+ — fill #1F1F1D · corners 12px · Lausanne 16px

Ramp Cards and panels: Cards & Expenses that handle themselves — fill #F4F2F0 · corners 12px · Lausanne 16px

Icons

3 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

Ramp product screen: 1320 × 1659 — 1320 × 1659

Ramp product screen: 2400 × 1260 — 2400 × 1260

Ramp product screen: 1080 × 846 — 1080 × 846

Ramp product screen: 2052 × 1710 — 2052 × 1710

Ramp product screen: 2842 × 1564 — 2842 × 1564

Ramp product screen: 968 × 1390 — 968 × 1390

Ramp product screen: 1445 × 611 — 1445 × 611

Ramp product screen: 167 × 296 — 167 × 296

Ramp product screen: 1600 × 854 — 1600 × 854

Do & don’t

What makes it Ramp

Striking lime-green accent used sparingly against near-black text
Warm off-white and near-black buttons side by side
Minimal borders, relying on contrast and spacing instead of lines

Use the lime-green accent sparingly for one standout action or highlight
Pair near-black buttons with the lime accent for contrast
Keep layouts spacious with minimal border lines

Don’t

Don't use the lime accent everywhere, it should stay rare and special
Don't add visual clutter or extra borders
Don't mix in other bright colours that compete with the lime accent

For AltLeads: Borrow the single bold lime accent to flag the one metric or action (like a hot lead) that needs attention right now.

Copy the tokens

Paste into any project to try this look.

/* Ramp · values measured from https://ramp.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #F4F2F0;
  --text: #0C0A08;
  --muted: #0C0A08;
  --line: #E5E5E5;
  --accent: #E4F222;
  --on-accent: #0C0A08;
  --radius-button: 6px;
  --radius-card: 12px;
  --radius-small: 4px;
  --button-height: 34px;
  --font-heading: "Lausanne", "Inter Tight", system-ui, sans-serif;
  --font-body: "Lausanne", "Inter Tight", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0.008) 0px 232px 65px 0px, rgba(0, 0, 0, 0.03) 0px 35px 59px 0px, rgba(0, 0, 0, 0.09) 0px 20px 50px 0px, rgba(0, 0, 0, 0.067) 0px 37px 37px 0px, r;
}