# Ramp — DESIGN.md

## Overview
Ramp is the modernist-fintech brand — a white canvas paired with the signature signal red (`#e84a4a`) and a confident geometric serif display (GT Sectra). The brand reads as a SF design-studio-built financial product: tight, structured, with editorial pull-quotes and dashboard mockups treated as the marketing artifact. The wordmark and CTAs are red; everything else is restrained.

## Color
- **Primary:** `#e84a4a` — Ramp Red
- **Primary deep:** `#c43838`
- **Canvas:** `#ffffff` — White
- **Surface alt:** `#fafaf8` — Bone
- **Surface card:** `#ffffff`
- **Ink:** `#0e0e0e` — Near-Black
- **Body:** `#3a3a3a`
- **Hairlines:** `rgba(14,14,14,0.10)`
- **Accent (savings highlight):** `#1b6b4e` — Forest Green (used on "you saved $X" callouts only)
- **Semantic warning:** `#d68a2e`

## Typography
- **Display:** GT Sectra / Tiempos Display, weight 400-500 (geometric serif), tracking -0.015em, sizes 56-96px hero
- **Body:** Söhne / Inter, weight 400-500, 16-17px base, 1.55 line-height
- **Mono (financial figures):** Söhne Mono, 14-16px tabular figures

## Spacing & rhythm
8-base (8/16/24/32/48/64/96). Section padding 96-128px. Hero uses 6/6 grid with type left, dashboard mockup right. Card padding 32-40px.

## Motion signature
180ms ease-out on hover; signature is the savings-number count-up animation when entering viewport (600ms tabular-figure transition). Dashboard mockups scroll-reveal with a 400ms fade and slight scale-from-98%.

## Components observed
- `hero-band-with-dashboard` (type left, real product mockup right)
- `savings-callout-card` (large display-size dollar amount in serif, green accent)
- `pricing-three-tier-light` (three white cards with hairline borders)
- `cta-button-red-fill` (red fill, 6px modest radius)
- `customer-quote-band` (large serif italic quote, byline + company logo)
- `dashboard-screenshot-card` (real Ramp UI as the hero artifact)

## Trademark signals
- Signal red as the only brand voltage — no second accent except savings-green
- Geometric serif display (GT Sectra) at hero scale — editorial weight in a category of geometric sans
- Savings dollar amounts set in display-size serif numerals — money is foregrounded as type, not chart
- Dashboard mockups are full-product chrome, never abstract — Ramp shows the actual UI
- Customer quotes treated as editorial pull-quotes with large serif type

## What they DON'T do
- No dark-mode hero
- No emoji in product copy
- No 3D rendered card geometry or floating chrome
- No saturated rainbow gradients
- No "limited time" or scarcity banners

## Exemplar pages
- https://ramp.com/
- https://ramp.com/spend-management
- https://ramp.com/customers
- https://ramp.com/pricing

## When to reference
Reach for Ramp when the user wants a modernist B2B fintech surface that combines editorial weight with operational clarity. The serif-display + signal-red + dashboard-as-hero combination reads as "design-studio-built finance product" — appropriate for spend management, treasury, expense tools, and any product where the dashboard IS the marketing.
