---
name: Ramp
description: "A masterclass in professional SaaS design, demonstrating how a restricted palette and clean typography can create a highly trustworthy and efficient user experience."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#333333"
  tertiary: "#DFFF00"
  neutral: "#808080"
  bg-soft: "#F4F2F0"
  bg-quiet: "#F5F5F5"
  muted-soft: "#A0A0A0"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.02em"
  heading:
    fontFamily: geometric-sans
    fontSize: 42px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "normal"
  subheading:
    fontFamily: geometric-sans
    fontSize: 36px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.05em"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A premium SaaS platform for financial automation and corporate spend management.

*An enterprise-grade financial operating system designed for speed and efficiency.*

## Colors

High-contrast neutrals with a single electric yellow accent to drive focus.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#DFFF00`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Generous whitespace with a strict 4px grid, ensuring clear visual separation.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** High-contrast primary buttons with a signature electric yellow background and black text.
- **card:** Clean white surfaces with subtle borders or soft shadows, often containing complex UI previews.
- **chip:** Small, rounded pill-shaped tags or badges used for data points and status indicators.
- **input:** Minimalist input fields defined primarily by a bottom border or subtle background fill.
- **hero:** A large, typography-heavy section featuring a prominent headline, a subheadline, and a focused email input field.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```