---
title: "Ramp design system"
variant: extended
source: https://ramp.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/ramp-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Ramp · Design System

> Calm finance, powered by a vivid signal.

**Theme:** light · **Industry:** fintech · **Source:** https://ramp.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Ramp pairs a bright, spacious canvas with sharp dark typography and a vivid lime CTA, presenting finance software through polished product interfaces. Editorial headlines, broad section spacing, and restrained surfaces keep a long, feature-rich homepage feeling clear and approachable.

## North star

Keep the page quiet and spacious, reserving Ramp Lime for the actions and moments that need immediate attention.

## Overview

The page is built on a white canvas, with warm off-white panels giving product cards, demos, and recommendation areas a subtle tonal boundary. Near-black text carries oversized, regular-weight headlines; muted gray supports secondary copy and links without competing for attention. A vivid lime accent is reserved for primary actions and selected highlights, so it reads as a deliberate signal rather than a background theme. Lausanne’s clean sans-serif forms keep headings and body copy visually related, with generous scale contrast and little decorative type treatment. The layout alternates centered statements, asymmetrical feature splits, and compact card grids across a long scroll, with substantial whitespace between major stories. Product UI imagery, finance workflow mockups, and a few photographic/video panels provide evidence and texture. Fine gray borders and softly rounded corners define cards; the overall treatment remains flat, with layering supplied by composition and media rather than heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and navigation background; also provides clean space around product media and content. |
| Soft Graphite | `#6d6c6b` | `--color-soft-graphite` | semantic | Muted body copy, supporting descriptions, and subdued link text. |
| Warm Porcelain | `#f4f2f0` | `--color-warm-porcelain` | surface | Warm section and card surface, visible behind feature tiles and recommendation content. |
| Deep Ink | `#0c0a08` | `--color-deep-ink` | brand | Primary headings, navigation labels, body emphasis, and text on lime buttons. |
| Quiet Hairline | `#e8e8e8` | `--color-quiet-hairline` | semantic | Fine card, control, and section outlines that separate content without adding visual weight. |
| Ramp Lime | `#e4f222` | `--color-ramp-lime` | accent | Primary CTA fill and selective emphasis; keep usage sparse against the white canvas. |
| Night Umber | `#1a1713` | `--color-night-umber` | neutral | Dark gradient and dark interface details, including the narrow announcement treatment. |
| Charcoal Olive | `#1e1d1a` | `--color-charcoal-olive` | neutral | Dark card and gradient details, chiefly inside product or campaign media. |
| Muted Slate | `#696765` | `--color-muted-slate` | semantic | Secondary text tone appearing in limited supporting content. |
| Pale Stone | `#d2cecb` | `--color-pale-stone` | surface | Low-contrast borders and card details; use as a subtle separator rather than a major fill. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f2f0` (Warm Porcelain) · `--color-text` → `#0c0a08` (Deep Ink) · `--color-text-muted` → `#6d6c6b` (Soft Graphite) · `--color-border` → `#e8e8e8` (Quiet Hairline) · `--color-accent` → `#e4f222` (Ramp Lime) · `--color-on-accent` → `#0c0a08` (Deep Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0c0a08` | `#ffffff` | 19.76:1 | AAA |
| `#0c0a08` | `#f4f2f0` | 17.7:1 | AAA |
| `#6d6c6b` | `#ffffff` | 5.24:1 | AA |
| `#6d6c6b` | `#f4f2f0` | 4.69:1 | AA |
| `#e4f222` | `#ffffff` | 1.23:1 | fail |
| `#e4f222` | `#f4f2f0` | 1.1:1 | fail |

### Gradients

- `linear-gradient(lab(100 0 0) 60%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgba(255, 255, 255, 0) 55%, rgb(255, 255, 255) 89.09%)`
- `linear-gradient(rgba(23, 18, 14, 0.2) 0%, rgba(23, 18, 14, 0.6) 60%, rgba(23, 18, 14, 0.82) 100%)`
- `linear-gradient(in oklab, rgba(244, 242, 240, 0) 0%, rgb(244, 242, 240) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lausanne | `--font-body` | webfont | 400 | Site-wide typeface for display headings, body copy, navigation, links, captions, and buttons. | Inter |

- **Lausanne:** Measured at regular weight throughout; use clean sans-serif forms, mostly sentence case, with uppercase reserved for small captions.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1 | 0 | — | Lausanne | Large campaign-style statements and standout headline moments. |
| h1 | 48px | 400 | 1.04 | 0 | — | Lausanne | Primary hero headline and major page-level statements. |
| h2 | 40px | 400 | 1.05 | 0 | — | Lausanne | Section introductions and prominent feature headlines. |
| h3 | 28px | 400 | 1.14 | 0 | — | Lausanne | Feature card and product-story headings. |
| h4 | 24px | 400 | 1.17 | 0 | — | Lausanne | Smaller subheads within feature and content blocks. |
| body | 14px | 400 | 1.43 | 0 | — | Lausanne | Standard explanatory copy, testimonials, and supporting descriptions. |
| caption | 10px | 400 | 2.2 | 0.018em | uppercase | Lausanne | Compact uppercase labels, metadata, and eyebrow text. |
| button | 14px | 400 | 1 | 0 | — | Lausanne | Primary and secondary CTA labels. |
| nav | 14px | 400 | 1 | 0 | — | Lausanne | Top navigation links and announcement bar text. |
| link | 16px | 400 | 1.5 | 0 | — | Lausanne | Inline actions, report links, and feature destinations. |

OpenType features in use: `"ss01"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 12, 16, 20, 24, 32, 64, 128 px.
- Section rhythm 64px · element gap 8px · card padding 20px · max content width 1312px.

Use a centered content frame capped at the measured 1312px, with broad side margins at desktop widths. The homepage alternates a left-aligned hero and feature narratives with centered section introductions, multi-column product cards, and asymmetrical image/text splits. Measured spacing is based on a 4px unit, with a comfortable density, 64px section gap, and 8px element gap; preserve the generous breathing room between stories. Keep the hero media broad and prominent, then vary card-grid density to match the content.

## Shape & elevation

- Radius: button `6px` · input `6px` · card `16px` · media `12px` · nav `6px` · link `12px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `16px` · pill `9999px`
- Shadow `inset` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is mostly flat, with separation coming from white space, warm off-white surfaces, and thin gray borders. Cards use measured rounded corners, while buttons and navigation controls are more compactly rounded. Avoid heavy drop shadows; depth comes from layered product mockups, media panels, and occasional inset treatment.

## Imagery

Lead with large finance-product interface compositions: cards, receipts, expense workflows, policy screens, and dashboards arranged as layered mockups. Use warm neutral frames and restrained shadows so the UI remains legible. Mix in customer photography, testimonial portraits, and a video still where the story benefits from human context. Partner and integration marks appear as small supporting assets, not as dominant illustration.

## Components

### Announcement strip

A narrow dark band above the white navigation, with centered update copy and an understated text link.

### Primary CTA

Lime fill #e4f222, Deep Ink text #0c0a08, Lausanne regular, and compact rounded corners; use for the main conversion action.

### Hero email form

A wide, lightly outlined email field paired directly with a lime submit button, presented beneath the main headline.

### Product feature cards

Warm Porcelain surfaces and thin Quiet Hairline borders hold short titles, interface screenshots, and small directional affordances.

### Feature narrative split

Pair a concise text column and link with a large product UI, video, or campaign visual; alternate sides across stories.

### Testimonial cards

Use compact customer quotes, names, and roles in a spacious multi-column collection with light dividers and minimal framing.

### Measured component styles

- **Primary button** (“Switch in days, not months”): background #e4f222 · text #0c0a08 · radius 6px · padding 16px · 400 16px Lausanne
- **Secondary button** (“View Demo”): background #f4f2f0 · text #0c0a08 · radius 6px · padding 16px · 400 16px Lausanne
- **Link** (“Cards & Expenses that handle themselves”): background #f4f2f0 · text #0c0a08 · border 1px solid #e8e8e8 · radius 12px · padding 0px · 400 16px Lausanne
- **Input**: transparent background · text #0c0a08 · radius 10px · padding 0px 16px 0px 20px · 400 16px Lausanne
- **Card** (“Shannon McCormick International Workplac”): transparent background · text #0c0a08 · border 1px solid #e5e7eb · radius 16px · padding 20px · 400 16px Lausanne
- **Navigation item** (“New: AI Token Spend Management — see, un”): transparent background · text #0c0a08 · radius 0px · padding 0px · 400 16px Lausanne

## Do

- Use white as the dominant page canvas.
- Reserve Ramp Lime for primary actions and rare emphasis.
- Set headings in regular-weight Lausanne or a close sans-serif substitute.
- Create clear tonal grouping with Warm Porcelain surfaces.
- Leave broad whitespace between major sections.
- Use real product-interface compositions as the main visual evidence.

## Don't

- Do not turn the entire page lime or dark.
- Do not introduce unmeasured brand colours.
- Do not rely on heavy shadows for card separation.
- Do not crowd the hero with extra decorative elements.
- Do not make every section a uniform card grid.
- Do not use bold, condensed, or all-caps display typography.

## Agent prompt

Build a new Ramp-style fintech SaaS page with a predominantly white canvas (#ffffff), Deep Ink typography (#0c0a08), and Warm Porcelain panels (#f4f2f0). Use Ramp Lime (#e4f222) sparingly for primary CTAs, with dark text and compact rounded corners. Keep the interface calm and editorial: large regular-weight sans-serif headlines, muted supporting copy in #6d6c6b, and subtle separators in #e8e8e8. Organize content in a centered, measured-width frame with generous whitespace, alternating feature splits and varied card grids rather than repeating one layout. Make product UI imagery the main proof point, supported by occasional photography or video. Favor flat surfaces and thin borders over shadows. Preserve readable hierarchy and a comfortable scroll rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and email CTA above a wide product-media stage. | email capture, primary signup CTA, live activity ticker | large headline, lime button, layered product mockup, dotted media detail |
| 2 | logo-cloud | Introductory proof statement beside a multi-row logo field and customer image card. | customer proof, report link | brand-logo grid, testimonial media card, large savings figure |
| 3 | feature-grid | Section heading and CTAs above a two-row grid of product feature cards. | feature discovery, demo link | two-column lead cards, three compact cards, product screenshots |
| 4 | recommendations | Centered form and copy over a full-width atmospheric background. | business-context input, personalized recommendation | centered heading, large text field, soft photographic backdrop |
| 5 | comparison | Centered heading followed by a wide visual comparison of disconnected tools. | problem illustration, workflow comparison | scattered interface windows, white canvas, minimal framing |
| 6 | feature-split | Introductory centered statement followed by alternating text, visual, and quote columns. | learn more link, customer quote, watch video affordance | large campaign panel, split content, testimonial copy |
| 7 | video | Large video panel beside a headline and supporting story copy. | video playback, learn more link, customer story | wide video still, split layout, minimal text column |
| 8 | feature-split | Text and testimonial column paired with a large policy-interface visual. | learn more link, customer quote | policy document mockup, asymmetric split, light product framing |
| 9 | cta | Full-width horizontal CTA band with copy on one side and action on the other. | personalized demo CTA | warm neutral band, lime-tinged highlight, dark action button |
| 10 | feature-grid | Centered section heading above a two-column row of image-led feature cards. | feature exploration, enterprise solution links | workflow image, global spend illustration, paired feature panels |
| 11 | testimonials | Centered heading followed by a broad, multi-column collection of testimonial cards. | social proof, demo link | customer names and roles, quote cards, light dividers |

## Source CSS custom properties (selected)

```css
--text-primary: lab(2.83994% .367254 .969091);
--text-primaryReverse: lab(100% 0 0);
--text-hushed: lab(2.83994% .367254 .969091/.6);
--text-hushedReverse: lab(100% 0 0/.6);
--border-primary: lab(83.0178% 1.03405 2.01975);
--spacer-m: 64px;
--spacer-l: 128px;
--fides-overlay-primary-color: #2b2e35;
--fides-overlay-background-color: #f7fafc;
--fides-overlay-embed-background-color: transparent;
--fides-overlay-font-color: #4a5568;
--fides-overlay-font-color-dark: #2d3748;
--fides-overlay-hover-color: #edf2f7;
--fides-overlay-gpc-applied-background-color: #38a169;
--fides-overlay-gpc-applied-text-color: #fff;
--fides-overlay-gpc-overridden-background-color: #e53e3e;
--fides-overlay-gpc-overridden-text-color: #fff;
--fides-overlay-brand-link-logo-color: #2b2e35;
--fides-overlay-background-dark-color: #e2e8f0;
--fides-overlay-background-error-color: #f7c2c2;
--fides-overlay-skeleton-gradient-from-color: rgba(0,0,0,.06);
--fides-overlay-skeleton-gradient-to-color: rgba(0,0,0,.15);
--fides-overlay-inactive-font-color: #a0aec0;
--fides-overlay-primary-button-background-color: #2b2e35;
--fides-overlay-primary-button-background-hover-color: #4f525b;
--fides-overlay-primary-button-text-color: #fff;
--fides-overlay-primary-button-border-color: transparent;
--fides-overlay-secondary-button-background-color: #f7fafc;
--fides-overlay-secondary-button-background-hover-color: #edf2f7;
--fides-overlay-neutral-background-color: #edf2f7;
--fides-overlay-secondary-button-text-color: #2d3748;
--fides-overlay-secondary-button-border-color: #2b2e35;
--fides-overlay-secondary-button-border-color-disabled: #a0aec0;
--fides-overlay-title-font-color: #4a5568;
--fides-overlay-body-font-color: #4a5568;
--fides-overlay-link-font-color: #2d3748;
--fides-overlay-primary-active-color: #2b2e35;
--fides-overlay-inactive-color: #e2e8f0;
--fides-overlay-disabled-color: #e1e7ee;
--fides-overlay-row-divider-color: #e2e8f0;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/ramp-com