# Ramp — DESIGN.md

Clean fintech spend-management marketing with a white grid field, oversized black headlines, neon-lime CTAs and product-led cards.

Independent reference guide from public Incognito captures. Not an official brand guide. Values describe the captured desktop marketing pages; responsive rules below are implementation recommendations.

Captured: 2026-10-01

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **modern geometric sans**. A family name is not a bundled font licence. Use an available, licensed pairing or system fallbacks.

## Marketing — Corporate cards, expenses and spend management

### Observed palette
- Canvas: #ffffff
- Primary text: #111111
- Muted text: #6f6f73
- Lime action: #e7ff00
- Dark action: #191919
- Soft grid: #f4f4f1
- Border: #dededb

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero headline | ~48–68px / tight | 500–700 | tight |
| Section / pricing heading | ~36–52px / tight | 500–700 | tight |
| Body / supporting copy | 16–18px / 1.45 | 400 | normal |
| Nav / button label | 13–14px | 500–600 | normal |

### Layout & hierarchy
- The homepage uses a slim announcement bar and white navigation above “Time is money. Save both.”, an email capture with a lime $150 offer and a central card/receipt product visual.
- Pricing centers “Start for free. Scale with Intelligence.” above Free, Plus and Enterprise comparison cards, with Plus highlighted by a lime border and label.
- The public /products page uses a pale hero with “Take control of company spend in one place.” and a Core Products row for corporate cards, expense management and accounts payable.

### Components & behavior
- Primary CTA: neon-lime filled button with dark label (Claim your $150 / See a demo).
- Secondary CTA: near-black filled button (Get started / Contact sales).
- Spend-management hero: light dotted field behind an email capture and product visualization.
- Pricing cards: three bordered columns with a lime-highlighted Plus plan and repeated email/offer controls.

## Scope
This is a marketing-only, logged-out capture (home, pricing and public products). Fresh Chrome Incognito showed no cookie banner; a promotional modal on /products was dismissed before capture. No login, signup submission, payment, card fields or credentials were used. Final URLs are https://ramp.com/, https://ramp.com/pricing and https://ramp.com/products.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and page structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, keep decorative backgrounds behind content, and let dense plan or product grids stack or scroll on small screens.
- Recommended: give every CTA a real destination and implement hover, focus and disabled states; the capture shows resting states only.
- Use the observed font only when available and appropriately licensed; otherwise use a system fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Page inventory
- Homepage: Ramp announcement bar and navigation above “Time is money. Save both.”, email offer, lime Claim your $150 action and card/receipt product visual. Screenshot: captures/ramp-marketing-home.jpg.
- Pricing: “Start for free. Scale with Intelligence.” above Free, Plus and Enterprise cards; Plus is highlighted in lime. Screenshot: captures/ramp-marketing-pricing.jpg.
- Feature / products: “Take control of company spend in one place.” above the Core Products row for corporate cards, expense management and accounts payable. Screenshot: captures/ramp-marketing-feature.jpg.