# Ramp · Design system migration spec

> Source: https://ramp.com  ·  Curated by OpenDesign  ·  en

> A masterclass in professional SaaS design, demonstrating how a restricted palette and clean typography can create a highly trustworthy and efficient user experience.

## 1. Identity DNA

Ramp's design system operates like the engine of a high-performance enterprise platform: every component is engineered for professional efficiency and automated clarity. Its identity is defined by a clean, high-contrast neutral foundation that prioritizes task completion and financial precision.

**One-liner:** A premium SaaS platform for financial automation and corporate spend management.
**Keywords:** professional · efficient · automated · enterprise-grade
**Analogy:** An enterprise-grade financial operating system designed for speed and efficiency.

## 2. Color

The color system is built on a high-contrast foundation of white and light grays, anchored by deep black for text. A single, signature electric yellow accent provides the sole point of high-chroma focus for primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F4F2F0` | card background |
| `--bg-quiet` | `#F5F5F5` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--muted-soft` | `#A0A0A0` | weak hint |
| `--accent` | `#DFFF00` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast neutrals with a single electric yellow accent to drive focus.

This strict, one-accent discipline ensures the interface remains uncluttered and directs user attention with precision.

## 3. Typography

Typography is exclusively a clean, geometric sans-serif, establishing a voice that is modern, neutral, and highly legible. The system employs a consistent 400 font weight for most elements to preserve a clean aesthetic, with tight letter spacing for large display text.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -0.02em | Hero headlines and major product announcements. |
| heading | 42px | 1.0 | 400 | normal | Section titles and modal headings. |
| subheading | 36px | 1.0 | 400 | normal | Secondary product headlines. |
| body | 18px | 1.5 | 400 | normal | Primary body text and descriptions. |
| caption | 12px | 1.5 | 400 | 0.05em | Overlines and small labels. |

**Type rules:**
- All text is set in a clean, neutral geometric sans-serif.
- Use tight letter spacing for large display text.
- Maintain a consistent 400 font weight for most elements to preserve a clean aesthetic.

## 4. Spacing

Layout rhythm is governed by generous whitespace set to a strict 4px grid, ensuring clear visual separation between elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** Generous whitespace with a strict 4px grid, ensuring clear visual separation.

## 5. Surfaces

Surfaces are predominantly flat and white, defined not by depth but by subtle 1px borders. This approach maintains a clean, light interface without relying on complex shadows or gradients.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0) 0px 0px 0px 0px
  - rgba(0, 0, 0, 0) 0px 0px 0px 0px
- **Borders:** Subtle 1px borders using rgba(0, 0, 0, 0.1) to define boundaries without harsh lines.

## 6. Layout

The skeletal structure is a 12-column grid with a centered maximum width of 1280px. This framework supports a focused, single-column reading width for primary content, enforcing clarity.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A structured 12-column grid with a maximum width of 1280px and centered content.

## 7. Motion & Interaction

Motion is functional and professional, limited to smooth color and background transitions for interactive feedback. Subtle transform and box-shadow shifts provide immediate, clear response to user input.

- **Durations:** micro 150ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on hover and focus.
  - Subtle transform and box-shadow shifts for interactive elements.

- **Hover:** Color changes and subtle background shifts to indicate interactivity.
- **Click:** Immediate visual feedback through background color changes.
- **Transition:** Consistent 0.3s cubic-bezier(0.4, 0, 0.2, 1) for most property transitions.
- **Keyboard:** Standard focus states, likely utilizing outlines or subtle color shifts for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and authoritative, focusing on efficiency and financial results. Headlines are bold, direct statements, and calls-to-action are clear and action-oriented.

- **Tone:** Professional, direct, and authoritative, focusing on efficiency and financial results.
- **Headline style:** Bold, direct statements or questions that highlight core value propositions.
- **CTA style:** Action-oriented and clear, often emphasizing immediate next steps or benefits.
- **Avoid:** Avoid overly casual language or excessive exclamation points. / Avoid cluttered or overly complex visual layouts that detract from the core message.

### Don'ts
- ❌ Don't use a primary color other than the signature electric yellow — screenshot shows it as the sole high-chroma accent.
- ❌ Don't use serif fonts for any text — screenshot shows a strictly sans-serif typography system.
- ❌ Don't use heavy drop shadows or complex gradients on UI elements — screenshot shows flat surfaces with minimal depth.
- ❌ Don't use excessive decorative icons or emojis — screenshot shows a clean, icon-light interface.
- ❌ Don't use dark backgrounds as the primary container — screenshot shows a predominantly white and light gray palette.
- ❌ Don't use multi-column layouts for primary text content — screenshot shows a focused, single-column reading width.

The system deliberately avoids casual language, complex visual layouts, and any decorative elements that could detract from core functionality.

## System Prompt (paste into AI tool)

```
Ramp is a premium financial technology SaaS platform designed for corporate spend management and automation. The visual system is built on a clean, high-contrast neutral palette dominated by white (#FFFFFF) and light grays (#F4F2F0), anchored by deep black text (#000000). A signature electric yellow (#DFFF00) serves as the primary action color for buttons and key highlights. Typography is exclusively geometric sans-serif, emphasizing clarity and modernism. Critical design constraints include: never use serif typefaces, avoid complex gradients or heavy shadows, and maintain generous whitespace. The overall aesthetic is professional, efficient, and enterprise-grade, focusing on data clarity and task completion.
```
