Ramp

Overview

Ramp is a fintech platform designed for ambitious finance teams who demand speed, clarity, and control. The design system embodies "Efficient Minimalism"—a philosophy that strips away decoration to reveal pure function, while maintaining the energy of a high-velocity brand. The interface uses a stark white canvas (#ffffff) punctuated by a vivid electric blue primary (#0066ff) that signals action and trust, paired with a bold lime-yellow tertiary (#d4ff00) that commands attention on CTAs and highlights. The emotional response is one of confidence and precision: users feel they are in control of complex financial workflows, not overwhelmed by them.

The brand voice is direct, conversational, and outcome-focused. Ramp speaks in active verbs and concrete benefits: "Save both time and money," "Automate your bill payments," "See recommendations for your business." The vocabulary avoids jargon where possible, preferring clarity over sophistication. Tone is energetic but never breathless—measured confidence, like a financial advisor who knows the numbers and trusts the data. Example sentence in Ramp's voice: "Your AI agents are working 24/7 to catch duplicate invoices and flag policy violations before they cost you."

Colors

The color system is built on a neutral foundation with three strategic accent roles. **Primary (#0066ff)** is the electric blue used for all interactive elements—buttons, links, focus states, and data highlights. It conveys trust and action, appearing on CTAs like "Get started" and "Learn more." **Secondary (#5683d2)** is a softer, more muted blue used for supporting information, secondary buttons, and data visualization accents; it recedes visually while maintaining the blue family coherence. **Tertiary (#d4ff00)** is the lime-yellow reserved for the most prominent CTAs ("Get started for free", "See a demo") and key highlights—it is intentionally jarring to ensure no user misses the primary conversion moment. The surface stack progresses from pure white (#ffffff) at the base through caref

Typography

The type system uses Lausanne as the primary typeface, a geometric sans-serif that conveys modernity and efficiency. The scale is deliberately restrained: display (64px, 400 weight) for hero headlines, headline-lg (40px, 400) for section titles, and body-md (16px, 400) for standard copy. The 400 weight is used throughout for a clean, unadorned appearance; 500 weight is reserved for labels and interactive elements to add subtle emphasis without visual noise. Line-height is set generously (1.5x for body, 1.2x for headlines) to ensure readability in dense financial interfaces. Letter-spacing is slightly negative on large headlines (-0.02em) to tighten the visual mass, while body copy uses 0em for neutral spacing. On small labels over busy backgrounds (e.g., badge text on colored containers),

Layout

The layout uses a 12-column grid with a max-width of 1440px, allowing flexible content arrangement from mobile (single column) through desktop (multi-column). The gutter is consistently 24px, providing breathing room between grid items. Section spacing follows the semantic scale: lg (40px) separates major sections (hero, features, testimonials), md (24px) separates subsections and card groups, and sm (12px) separates inline elements. The hero section uses a full-width white background with generous top/bottom padding (64px on desktop, 40px on mobile) to create visual separation from the navigation. Cards and containers are inset from the viewport edge by at least gutter (24px) on desktop, collapsing to 12px on tablet and 8px on mobile. The container-max-width of 1440px ensures that on ultr

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkening. The elevation system uses three levels: **Level 1 (Base)** is the white surface (#ffffff) with no shadow, used for the main canvas and card backgrounds. **Level 2 (Elevated)** applies a soft shadow (0 4px 12px rgba(0,0,0,0.1)) to cards, modals, and dropdowns that sit above the base; this shadow has a 4px blur and 12px spread, creating a gentle lift without drama. **Level 3 (Modal/Overlay)** uses a stronger shadow (0 16px 40px rgba(0,0,0,0.12)) for full-screen modals and critical overlays, with a 16px blur and

Shapes

The shape philosophy is **Geometric Precision**—rounded corners are used sparingly and consistently to signal interactivity without introducing organic softness. Buttons and inputs use 6px (DEFAULT) radius, creating a subtle roundness that feels modern without being playful. Cards and modals use 12px (lg) radius for slightly more visual weight. Dropdowns and small UI elements use 4px (sm) radius for minimal intervention. The full (9999px) radius is reserved exclusively for badges and pill-shaped elements. This tiered approach ensures that the most interactive elements (buttons) are slightly mo

Components

Action Elements Buttons are the primary interaction mechanism and use three distinct styles. **Primary buttons** (backgroundColor: #0066ff, textColor: #ffffff, padding: 12px 20px, height: 44px, rounded: 6px) are used for main CTAs like "Get started for free" and "Learn more." On hover, the background darkens to #0052cc over 200ms, providing clear feedback. On active/press, it darkens further to #003d99. **Secondary buttons** (backgroundColor: transparent, textColor: #0066ff, border: 1px solid #d2cdca, padding: 12px 20px, height: 44px) are used for alternative actions like "Sign in" or "View pricing." On hover, the background fills with surface-container-low (#f4f2f0). **Tertiary buttons** (backgroundColor: #d4ff00, textColor: #1f1f1d, padding: 12px 20px, height: 44px, fontWeight: 600)

Do's and Don'ts

**Do**

• Do use primary (#0066ff) exclusively for interactive elements—buttons, links, focus states, and data highlights. Never use it for backgrounds or decorative elements.
• Do apply tertiary (#d4ff00) only to the single most important CTA per page or section; overuse dilutes its impact and confuses the visual hierarchy.
• Do maintain minimum 44px height for all interactive elements (buttons, inputs, list items) to ensure touch-friendly targets on mobile devices.
• Do use the full rounded (9999px) radius only for badges and pill-shaped elements; never apply it to cards, modals, or buttons.
• Do transition all interactive state changes (hover, focus, active) over 200ms using cubic-bezier(0.4, 0, 0.2, 1) easing for consistent, responsive feedback.
• Do preserve white space around primary CTAs—never less than 20px on all sides—to ensure they stand out as focal points.
• Do use label-md (14px, 500 weight) for all button text and interactive labels; never use body-md or smaller for clickable elements.
• Do apply a 1px border in outline-variant (#d2cdca) to all cards, inputs, and containers to define edges without heaviness.

**Don't**

• Don't use secondary (#5683d2) or tertiary (#d4ff00) for body text or large content areas; reserve them for accents and highlights only.
• Don't apply shadows exceeding 0.12 opacity; the aesthetic demands brightness and clarity, not depth through darkness.
• Don't use rounded corners on full-width sections, headers, or the body element; reserve rounding for discrete components only.
• Don't mix typeface weights arbitrarily; use 400 for body and headlines, 500 for labels and interactive elements, 600 only for tertiary button text.
• Don't set line-height below 1.2x for headlines or 1.5x for body copy; the geometric sans-serif requires generous spacing for readability.
• Don't use color alone to convey status or importance; always pair color changes with size, weight, or position changes for accessibility.
• Don't apply focus outlines; use inset box-shadow (0 0 0 3px rgba(0, 102, 255, 0.1)) instead to maintain the clean aesthetic while meeting WCAG AA contrast requirements.
• Don't use more than three accent colors (primary, secondary, tertiary) in a single interface; additional colors fragment the visual system and confuse users.