CURATED · OPEN · FREE

Ramp

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

01

Identity DNA

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

02

Color

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

03

Typography

geometric-sans · monospace

• display56px · 400
• heading42px · 400
• subheading36px · 400
• body18px · 400
• caption12px · 400

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.

04

Spacing

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

05

Surfaces

Subtle 1px borders using rgba(0, 0, 0, 0.1) to define boundaries without harsh lines.

rgba(0, 0, 0, 0) 0px 0px 0px 0px · rgba(0, 0, 0, 0) 0px 0px 0px 0px

06

Layout

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

07

Motion & Interaction

Smooth color and background transitions on hover and focus. · Subtle transform and box-shadow shifts for interactive elements.

Color changes and subtle background shifts to indicate interactivity. · Immediate visual feedback through background color changes.

08

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.

09

Voice & Don'ts

• Tone Professional, direct, and authoritative, focusing on efficiency and financial results.
• Headlines Bold, direct statements or questions that highlight core value propositions.
• CTAs Action-oriented and clear, often emphasizing immediate next steps or benefits.

• 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.
• Avoid: Avoid overly casual language or excessive exclamation points.
• Avoid: Avoid cluttered or overly complex visual layouts that detract from the core message.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko