Ramp

Overview

Ramp is a unified spend management platform designed for modern finance teams who demand both operational efficiency and strategic control. The brand serves mid-market to enterprise companies seeking to consolidate corporate cards, expenses, bill payments, and banking into a single intelligent system. The aesthetic is "Minimalist Clarity"—a design philosophy that prioritizes information hierarchy, precision typography, and purposeful use of accent color to guide user attention. The interface evokes confidence and control through clean layouts, generous whitespace (surface backgrounds at #ffffff with container layers stepping down to #ede8e5), and a signature neon-lime primary accent (#e7f056) that commands attention on CTAs without overwhelming the interface. The emotional response is one of calm efficiency: users feel they've regained control over chaotic spend workflows.

Ramp's voice is direct, pragmatic, and slightly irreverent—it speaks to finance leaders as peers, not subordinates. The vocabulary favors concrete outcomes ("automate 80% of bill approvals", "recover $2.3M in duplicate payments") over abstract benefits. Tone is confident but never breathless; sentences are short and active. Example: "Your finance team focuses on strategy. AI agents handle the rest."

Colors

The color system is anchored in a neutral, light foundation with a single high-contrast accent. The primary color—#e7f056, a vivid yellow-green—is reserved exclusively for interactive elements: primary CTAs ("Get started for free", "See a demo"), focus states, and brand moments. This accent appears sparingly but decisively, ensuring every instance carries weight. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays: surface-container-low (#f4f2f0) for subtle backgrounds, surface-container (#ede8e5) for card containers, and outline-variant (#d8d7d7) for borders. The on-surface text color is a near-black (#0c0a08), providing 15:1 contrast for accessibility and legibility at all sizes. Secondary colors—grays like #6e6a68 and #777776—serve as supporting tex

Typography

The type system uses TWK Lausanne exclusively—a geometric sans-serif that conveys precision and modernity without sacrificing warmth. The hierarchy spans from display (60px, 400 weight, -0.02em tracking) for hero statements down to label-sm (12px, 400 weight, 0.02em tracking) for metadata. All weights are 400 (regular) or 700 (bold in rare cases), maintaining visual simplicity; the font's proportions carry hierarchy, not weight variation. Body text (16px, 24px line-height) is set at a generous 1.5 line-height ratio to support scanning and reduce cognitive load. Headlines (48px for headline-lg, 32px for headline-md) use tighter line-heights (56px and 40px respectively) to create visual impact. Negative letter-spacing (-0.015em to -0.02em) on larger sizes tightens the visual color, while bod

Layout

The layout system uses a 12-column grid with a max-width of 1440px, allowing for flexible content arrangements from mobile (single column) to desktop (multi-column sections). The gutter is consistently 24px, creating rhythm and breathing room. White-space is treated as a first-class design element: sections are separated by 40px (lg spacing) vertically, while internal component spacing uses 24px (md) for related elements and 12px (sm) for tightly grouped items. Container padding follows the same scale—24px for standard cards, 12px for compact inputs. The spacing scale (unit: 8px, xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is derived from an 8px base, ensuring all measurements align to a consistent grid. Hero sections use xl spacing (64px) for top/bottom margins to create visual separ

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like badges and small cards, md (0 4px 12px rgba(0, 0, 0, 0.08)) for primary cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for full-screen overlays and hero imagery. Shadows are soft and diffuse, never sharp; the blur radius (2px, 12px, 40px) increases with elevation to create atmospheric perspective. Focus states on interactive elements use a 3px outline in primary color (rgba(231, 240, 86, 0.1)) r

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, reflecting the brand's balance between approachability and precision. The rounded scale progresses from sm (4px) for small UI elements like close buttons and minor controls, DEFAULT (8px) for standard inputs and small cards, md (12px) for medium containers, lg (16px) for primary cards and modals, xl (24px) for hero sections and large containers, and full (9999px) for pills and badges. Buttons use md (12px) to feel modern without appearing overly soft; inputs use DEFAULT (8px) to maintain a compact, functional

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use the signature #e7f056 background with #0c0a08 text, 12px padding (horizontal) and 44px height, rounded to 12px. The label-md typography (14px, 400 weight) ensures readability at a glance. On hover, the background shifts to primary-container (#d4e844), maintaining the accent family while signaling state change. The transition is 200ms ease-out, fast enough to feel responsive without appearing jarring. Focus states add a 3px outline in rgba(231, 240, 86, 0.1) to support keyboard navigation. Secondary buttons are transparent with a 1px border in outline-variant (#d8d7d7) and on-surface text (#0c0a08). On hover, the background fills with surface-container-high (#e7e4e1) and the border darkens to outline (#77