# Ramp — Design System
> Ramp's fintech-warm system. Ochre primary on near-black surface, dense tables with tabular numerics for financial data.
- **Canonical:** https://uiuxskills.com/library/ramp
- **Source:** https://ramp.com
- **Category:** Fintech & Crypto
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:42.262Z

---

---
version: alpha
name: Ramp
description: Spend management and corporate card platform for modern finance teams.
tone: >-
  Direct, efficient, and authoritative. The tone focuses on time-saving benefits and operational
  clarity, avoiding marketing fluff in favor of concrete outcomes.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F9FAFB"
  on-surface: "#111827"
  outline: "#E5E7EB"
  error: "#DC2626"
  success: "#16A34A"
  on-primary: "#FFFFFF"
  focus-ring: "#2563EB"
  hushed: "#6B7280"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.hushed}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FEE2E2"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Ramp is a high-efficiency, AI-driven spend management platform designed for ambitious companies. Its visual identity is clean, professional, and functional, emphasizing speed and automation through a minimalist aesthetic that prioritizes operational clarity.

## Colors

The color palette is strictly monochromatic with targeted semantic accents, ensuring that the interface remains focused on data and utility rather than decorative elements.

*   Primary (#000000): Deep ink for headlines, primary buttons, and core UI elements.
*   Surface (#FFFFFF): The foundational background for all application and marketing surfaces.
*   Surface-container (inferred) (#F9FAFB): A subtle light gray used to delineate cards and section containers.
*   On-surface (inferred) (#111827): The primary text color, optimized for high-contrast readability.
*   Outline (#E5E7EB): Used for borders, dividers, and input fields to maintain structure without visual noise.
*   Hushed (#6B7280): Secondary text color for metadata, labels, and helper text.
*   Focus-ring (inferred) (#2563EB): The high-visibility indicator for all interactive focus states.
*   Error (inferred) (#DC2626): Semantic color reserved for critical errors and violations.
*   Success (inferred) (#16A34A): Semantic color for positive outcomes and growth metrics.
*   On-primary (inferred) (#FFFFFF): Text color for buttons and dark-themed elements.

## Typography

Ramp uses the Inter typeface exclusively, relying on a clear hierarchy of sizes to guide the user through complex financial data.

*   Display levels (inferred): Used for hero headlines and major section titles.
*   Headline levels (inferred): Used for sub-headers and grouping content.
*   Body-md (inferred): The standard font size for all paragraph text.
*   Body-sm (inferred): Used for secondary body text.
*   Label-md (inferred): Standard weight and size for button labels.
*   Label-sm (observed): Used for small UI labels and badge text.

## Layout

Ramp employs a centered, responsive layout strategy that utilizes generous whitespace to prevent information overload. The grid is designed to collapse complex multi-column sections into single-column stacks on mobile devices. The section order follows a logical narrative flow: nav, hero, social-proof, features, testimonials, and footer. The hero composition is consistently centered, pairing a concise headline with a primary call-to-action.

## Elevation & Depth

Depth is used sparingly to maintain a flat, modern aesthetic. Elevation is applied only to distinguish interactive cards from the background, using a subtle three-tier scale.

*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard lift for interactive cards and popovers.
*   elevation.lg: Pronounced lift for modal or drawer overlays.

## Shapes

The brand maintains a consistent, modern corner radius strategy. It avoids overly soft or aggressive curves, opting for a functional, professional look that feels approachable but precise.

Inputs use `rounded.md` (4px) to provide a crisp, defined target, while larger containers like cards use `rounded.lg` (8px) to soften their footprint within the layout.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.primary}` with `{typography.label-md}`, providing a high-contrast, authoritative call to action. Secondary buttons are transparent with a `{colors.outline}` border, used for lower-priority actions to reduce visual clutter.

### Card
Cards are defined by `{colors.surface}` backgrounds and `{rounded.lg}` corners. They are intended to house distinct sets of information, with `{colors.outline}` borders used to separate them from the background when necessary.

### Input Field
Inputs utilize `{rounded.md}` and `{colors.outline}` for a clean, professional look. They must transition to a `{colors.focus-ring}` border color when active to ensure accessibility and clear interaction feedback.

### Badge
Badges use `{colors.surface-container}` as a background with `{typography.label-sm}`. Semantic variants like `badge-error` and `badge-success` should be used sparingly to highlight status changes or critical alerts.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Use `{colors.error}` for non-critical UI elements. |
| Apply `{typography.body-md}` for all standard paragraph text. | Avoid using more than two font weights on a single page. |
| Use `{rounded.lg}` for all card containers to maintain consistency. | Do not apply heavy shadows to cards; keep elevation subtle. |
| Use `{colors.hushed}` for secondary metadata and helper text. | Never use `{typography.display-lg}` for body content. |
| Ensure all interactive elements have a clear `{colors.focus-ring}` state. | Do not mix `rounded.full` and `rounded.sm` on the same component. |
| Use `{spacing.md}` as the base unit for component padding. | Avoid using low-contrast text colors on `{colors.surface}` backgrounds. |
| Use `{typography.label-md}` for button labels. | Use decorative borders that do not match `{colors.outline}`. |
| Apply `{colors.success}` for positive growth metrics. | Use large radius values on small input fields. |

## Content Style

CTA labels are imperative and action-oriented, favoring short, punchy verbs like "Get started" or "Make the switch" to drive conversion.

Headings are direct and benefit-focused, emphasizing time savings and operational efficiency. They avoid marketing jargon in favor of concrete outcomes.

Copy density is kept low, utilizing short, scannable paragraphs and frequent bullet points to ensure the user can quickly extract the value of the platform.

## Imagery & Icons

The imagery style is mixed, combining clean product screenshots with stippled illustrations and high-quality customer photography to humanize the brand. Icons are minimalist and stroke-based, maintaining a consistent line weight that aligns with the brand's functional, enterprise-grade aesthetic.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Ramp, a minimal enterprise spend management platform. Match its direct, efficiency-focused tone — concrete outcomes over marketing language. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name (`{colors.primary}`, `{typography.body-md}`, `{rounded.lg}`) — never hardcode hex values, font sizes, or pixel radii.
2. Use only the component variants defined under `components:`. Do not invent a `button-danger` or `card-flat` variant; surface the gap to the user instead.
3. Follow the Layout narrative for structure decisions: centered layout, multi-column collapsing to single-column at 768px, section order (nav → hero → social-proof → features → testimonials → footer).
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., heavy card shadows, display-lg for body text), state the conflict before proceeding.
5. Tokens marked "(inferred)" in the spec prose are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, those values take precedence.

## Output contract

**Must:**
- Use named tokens for every color, spacing, radius, elevation, and typography value.
- Render hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{spacing.md}` as the base padding unit; use `{spacing.xs}` through `{spacing.2xl}` for all gaps and paddings.
- Use `{colors.focus-ring}` on all interactive focus states without exception.
- Match CTA copy style: short imperative verbs, benefit-focused headings, low copy density.

**Must NOT:**
- Invent colors, type scales, or radius values outside the spec.
- Use generic utility defaults (e.g., `gray-500`, `rounded-md` as a literal string) when a brand token covers the role.
- Apply `{colors.error}` or `{elevation.lg}` decoratively — both are reserved for semantic and overlay use only.
- Mix `{rounded.full}` and `{rounded.sm}` on the same component.
- Add emoji, filler text, or unsolicited marketing copy.
- Rewrite existing page copy, button labels, or navigation items, or alter information architecture as a side effect of token application.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface-container}`; for text on those surfaces, use `{colors.on-surface}`; for secondary labels, use `{colors.hushed}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px per the Layout section.
- Elevation should default to `{elevation.sm}` unless the component is a modal or drawer (`{elevation.lg}`) — keep depth subtle.