What is Ramp's primary brand color?

Ramp's voltage is yellow — #ffe74c — used as the single filled CTA across every marketing surface. It appears as `button-cta-chip` (a small rounded rectangle, 12px radius, sized below the body text rather than above it), as the hover indicator on dark-card composites, and as the highlighter accent behind portrait captions. There is no secondary brand accent. Near-black ink #212121 carries all body type, the warm sand canvas #f4f2f0 carries every page band, and the five named gradient atmospheres (midnight, dusk, daylight, solar #f4d35e, blaze #e07a3c) appear only inside product-UI tile backgrounds — never as button fills.

What typography does Ramp use, and what should I use if Lausanne isn't available?

Ramp runs Lausanne — a proprietary grotesque from Nizar Kazan — at weight 400 across every tier from 48px hero down to 10px micro-caps. There is no thin variant, no bold variant. Hierarchy comes from size alone: 48px hero with -0.01px tracking, 40px section opener with -0.005px tracking, 28px sub-section, 24px card title, 20px body lead, 16px default body, 14px UI label, 13px helper, 10px uppercase eyebrow with 0.18px tracking. The single-weight discipline cuts against category convention — most fintech systems run weight 300 for display and 600+ for body. If Lausanne is unavailable, Inter weight 400 with the same negative tracking on display sizes is the canonical open-source substitute; Geist Sans 400 matches the optical width more closely.

Why is Ramp's primary CTA so small?

The yellow chip is sized below the surrounding body text rather than above it — typically 12px text inside an 8px vertical padding, totaling roughly 30px tall against 16–20px body. This is intentional: the marketing argument is that finance teams already know the product category exists, and the page's job is to read like an editorial about back-office automation rather than a landing funnel asking for a sign-up. The chip uses `{rounded.lg}` 12px (not pill, not square) and stays on the warm sand canvas without elevation. Bumping the chip larger or switching to pill geometry breaks the editorial register.

What are Ramp's five named gradients?

Ramp ships five linear-gradient atmospheres as first-class brand tokens: `midnight` (#000000 to #112d5b, top to bottom — used on the corporate card photography), `dusk` (#e4ebf6 to #c3d3ef to #5683d2 to #001b4a — used on dashboard composites with sky tone), `daylight` (#d2dff3 to #f2f5f9 — used on policy-document composites), `solar` (a saturated gold around #f4d35e — used on the controller-portrait crop), and `blaze` (a warm orange around #e07a3c — used as a chart-line color and on the receipt-mosaic band). They live in `--background-image-midnight` through `--background-image-blaze` CSS variables. The gradients never fill buttons or appear as page backgrounds — they only fill product-tile interiors.

What is Ramp's product-tile mosaic and why is it the dominant layout?

Almost every Ramp feature band renders as a 2x2 (or 1x2) grid of 12px-radius rectangles. Each tile is a white #ffffff card with a 1px hairline border #e2e8f0, padded 32px 24px 32px 32px, holding a 14px Lausanne eyebrow label, a 24px title, and a composited product-UI screenshot beneath. The tile is the brand's primary depth medium — Ramp uses essentially no shadow tier. The mosaic compresses a long marketing argument into a single scannable grid: cards-and-expenses, procure-to-pay, accounting-automation, banking, integrations — five product capabilities visible in one viewport without scrolling. Breaking the mosaic for a hero composite or a long-form prose section breaks the brand's information-density signature.

What's missing from this DESIGN.md spec?

A handful of areas live outside this capture: the authenticated product surface at app.ramp.com runs a separate token set with denser table chrome and a dashboard-specific status palette (the marketing-page semantic colors only cover the cookie-banner error and success tones at #e53e3e and #38a169); the customer-photography crop system uses art-directed portraits with name-highlighter overlays that aren't documented as components; the in-product AI-agent panel (the dark card with the lime-against-charcoal hover dot) has only one example here rather than the full state matrix; precise easing tokens for the tile hover lift and the corporate-card-rotation animation aren't extracted; the printed-magazine annual-report typography (which uses a different display family) is its own brand expression.

Ramp Inspired Design System

Ramp's design system as a DESIGN.md file.

About Ramp Inspired DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source ramp.com

Fintech & Crypto
Banking & Payments

Ramp's marketing surface inverts the loudest pattern in fintech. Where Stripe paints the upper third of every page with a five-stop gradient mesh and Wise leans on a vivid lime CTA at 24px pill radius, Ramp does the opposite — a single warm sand canvas #f4f2f0, near-black Lausanne ink #212121 at one weight (400), and one tiny yellow chip #ffe74c that carries every primary call to action. The yellow is small, square-ish at 12px radius, sized below the surrounding type rather than above it. The argument is restraint as authority: a back-office platform that doesn't shout. Nothing on the marketing page asks for visual rent except the yellow chip and the product tiles beneath it.

This page packages the full system into a single DESIGN.md file. Inside: 19 colors covering the yellow CTA voltage, five named atmospheric gradients (midnight, dusk, daylight, solar, blaze) used as full-bleed product backdrops, four neutral surface tints, and the ink ladder from #212121 down to a 50% alpha helper; 9 typography tokens spanning Lausanne 14px caption through 48px hero — all at weight 400 with -0.01px tracking on display sizes only; 24 components covering buttons, the signature product-tile card, the inset email-input pill, navigation, the yellow status badge, and the dark-card composite used on the AI-agent panels. Every token name traces back to a `--lausanne-*` or `--color-*` CSS variable extracted from the live site.

Feed the file to Claude, Cursor, or GitHub Copilot. The agent will reproduce Ramp's specific quietness — one yellow chip, one type weight, sand canvas over white, 12px radius on everything that isn't a circle — rather than the generic high-contrast fintech default. Lausanne is proprietary; the canonical open-source substitute is Inter at weight 400 with -0.01px tracking on display sizes, or Geist Sans 400 for closer optical width. Avoid system-ui defaults; the brand's restraint depends on Lausanne's narrow x-height and the warm canvas pulling the type into print-like density.

What makes it distinct

Single yellow CTA chip#ffe74c is the only filled brand affordance, sized smaller than competing fintech pills
Lausanne weight 400 across every tierno thin display variant, no bold, hierarchy comes from size alone
Warm sand canvas #f4f2f0 over pure whitethe brand reads as a printed magazine, not a SaaS console
Product-tile mosaicevery feature band is a 2x2 grid of bordered #ffffff cards with 12px radius
Five named atmospheresmidnight, dusk, daylight, solar, blaze each ship as full linear gradients

Live at ramp.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

ramp.com

Explore Ramp Inspired

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Ramp Inspired design system FAQ

Common questions about Ramp Inspired's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Pricing blocks for shadcn/ui

Production-ready React pricing sections — including warm-canvas patterns inspired by Ramp.

Use Ramp Inspired in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→