Design System Inspiration of Ramp

1. Visual Theme & Atmosphere

Ramp is the corporate-card and spend-management platform that made expense software feel like a premium productivity tool rather than an accounting chore. The brand's entire visual thesis is built on one audacious contrast: a near-black ink (#1C1B17) set against an electric lime-yellow (#E5FE54) so saturated it almost vibrates. This is not the cautious navy-and-grey of legacy fintech. It's confident, almost aggressive — a color that says "we move fast and we save you money," paired with typography that reads like an editorial business magazine.

The page opens on a clean off-white canvas (#F7F7F5) or pure black hero sections, with the lime accent deployed sparingly and with intent — never as decoration, always as a signal of action or savings. Ramp's design language borrows from Swiss editorial design and modern brand studios: generous whitespace, tight type, oversized numerals announcing dollar amounts saved, and a serif/sans pairing that gives the brand a literary, considered voice unusual in the SaaS-fintech space.

The custom typeface stack is the brand's quiet engine. Lausanne (a clean, neo-grotesque sans by Nizar Kazan / Weltkern) carries the UI, navigation, and body — precise, neutral, Helvetica-adjacent but warmer. Burgess (a contemporary serif) appears in display headlines and editorial moments, giving Ramp a high-end, almost magazine-cover gravitas. The pairing communicates the brand's positioning: finance software that is both rigorous (sans) and intelligent (serif).

Key Characteristics:

• Lime-yellow (#E5FE54) as the signature accent — high-voltage, used only for CTAs and savings signals
• Near-black ink (#1C1B17) as the dominant brand color — warm, slightly green-tinted black
• Lausanne (sans) for UI/body + Burgess (serif) for editorial display headlines
• Off-white canvas (#F7F7F5) with high-contrast black hero sections
• Oversized numerals announcing dollar savings — money as the hero element
• Editorial Swiss layout: generous whitespace, tight tracking, asymmetric grids
• Restrained color — black, off-white, lime, and a few muted neutrals; no rainbow palettes

2. Color Palette & Roles

Primary

• Ramp Lime (#E5FE54): The signature accent. Primary CTAs, savings highlights, active selection, hover fills, brand moments. Electric yellow-green — the single most recognizable Ramp asset. Used sparingly and only where it signals action or value.
• Ramp Ink (#1C1B17): The dominant brand color. Primary text, black hero backgrounds, dark buttons, footer. A warm near-black with a subtle green undertone (RGB 28, 27, 23) — never pure #000000.
• Off-White Canvas (#F7F7F5): Page background, light surfaces. A soft, warm paper-white that reduces glare and reads premium against the black sections.
• Pure White (#FFFFFF): Card surfaces, elevated panels, input fills on light backgrounds.

Lime Scale

• Lime 500 (#E5FE54): Core brand lime — CTA fills, key accents.
• Lime 600 (#D4ED3F): Hover/pressed state for lime CTAs — slightly deeper.
• Lime 100 (#F4FCC9): Soft lime-tinted background for highlight cards, savings callouts.
• Lime 50 (#FBFEE8): Faintest lime wash for subtle section backgrounds.

Neutral Scale

• Ink 900 (#1C1B17): Primary text, strongest headings.
• Ink 700 (#3D3C37): Emphasized body text, sub-headings.
• Ink 600 (#56554F): Standard body text on light surfaces.
• Grey 500 (#74726B): Secondary text, captions, metadata.
• Grey 400 (#9C9A92): Placeholder text, disabled labels.
• Grey 300 (#C9C7BF): Default borders, dividers.
• Grey 200 (#E3E1DA): Subtle dividers, input backgrounds, hover surfaces.
• Grey 100 (#EFEEE9): Section background tint, disabled surfaces.
• Off-White (#F7F7F5): Page canvas.

Semantic

• Success Green (#1A7F4B): Positive financial indicators, savings confirmed, approved states. Deliberately distinct from the brand lime so it reads as "status" not "brand."
• Error Red (#D93F3F): Errors, declined transactions, destructive actions, overspend warnings.
• Warning Amber (#E08A1E): Pending approvals, attention-needed, budget threshold alerts.
• Info Blue (#2F6FE0): Informational accents, links in dense documentation contexts.

Surface & Borders

• Border Default: #E3E1DA (grey200). Standard card borders, dividers.
• Border Strong: #C9C7BF (grey300). Emphasized borders, active input outlines.
• Border on Dark: rgba(255,255,255,0.12). Dividers on black hero/footer sections.
• Overlay Scrim: rgba(28,27,23,0.6). Modal backdrop — warm ink-tinted dark.

3. Typography Rules

Font Family

• Display/Headlines (serif): "Burgess", "Times New Roman", Georgia, serif — editorial display moments, hero headlines, large pull-quotes.
• UI/Body (sans): "Lausanne", "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif — navigation, body, buttons, tables, the entire product UI.
• Monospace/Numeric: "Lausanne Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, monospace — financial figures in dense tables, ledger views (tabular alignment).

Hierarchy

Principles

• Serif for story, sans for system: Burgess serif headlines carry the brand narrative on marketing surfaces; Lausanne sans carries the entire functional product. Never use serif inside dense product tables.
• Tight tracking on display: Large headlines use negative letter-spacing (-0.015 to -0.02em) for a crisp editorial feel. Body text stays at normal tracking.
• Numbers as heroes: Dollar amounts (savings, balances) use oversized Lausanne 500 with tabular numerals, right-aligned in tables, often the largest element on a marketing screen.
• Uppercase overlines: Eyebrow/section labels use 11px uppercase Lausanne with 0.08em tracking — a recurring editorial signature.
• Restraint in weight: Lausanne ships many weights; the UI uses 400 (body), 500 (headings/emphasis), and 600 (overlines, strong labels). Bold 700 is rare.

4. Component Stylings

Buttons

Ramp buttons are flat, confident, and tightly spaced. Radius is moderate (8px) — neither pill nor sharp. The lime CTA is the brand's hero element and uses ink-colored text for maximum contrast on the bright fill.

Primary (Lime)

• Background: #E5FE54
• Text: #1C1B17
• Border: none
• Radius: 8px
• Padding: 0 20px
• Font: 15px / 500 / Lausanne
• Height: 44px
• Hover: background #D4ED3F
• Pressed: background #C7DF34
• Disabled: background #EFEEE9, text #9C9A92
• Use: Primary CTA — "Get started", "Get a demo". The single most important action on a screen.

Primary (Ink)

• Background: #1C1B17
• Text: #FFFFFF
• Border: none
• Radius: 8px
• Padding: 0 20px
• Font: 15px / 500 / Lausanne
• Height: 44px
• Hover: background #3D3C37
• Use: Strong action on light surfaces where lime would be too loud; default product CTA.

Secondary (Outline)

• Background: transparent
• Text: #1C1B17
• Border: 1px solid #C9C7BF
• Radius: 8px
• Padding: 0 20px
• Font: 15px / 500 / Lausanne
• Height: 44px
• Hover: background #EFEEE9, border #1C1B17
• Use: Secondary action paired with a Primary button.

Tertiary (Ghost)

• Background: transparent
• Text: #3D3C37
• Border: none
• Radius: 8px
• Padding: 0 12px
• Font: 15px / 500 / Lausanne
• Hover: background #EFEEE9
• Use: Low-emphasis inline action (Cancel, Back, table-row actions).

On-Dark (Lime on Black)

• Background: #E5FE54
• Text: #1C1B17
• Radius: 8px
• Font: 15px / 500 / Lausanne
• Use: CTA inside black hero/footer sections — the brand's signature hero button.

Danger

• Background: #D93F3F
• Text: #FFFFFF
• Radius: 8px
• Padding: 0 20px
• Font: 15px / 500 / Lausanne
• Use: Destructive confirmation (delete card, revoke access).

Size scale (height · font · radius): small 32px · 13px / 500 · 6px; medium (default) 44px · 15px / 500 · 8px; large 52px · 17px / 500 · 10px.

Inputs

Default

• Background: #FFFFFF
• Text: #1C1B17
• Border: 1px solid #C9C7BF
• Radius: 8px
• Padding: 11px 14px
• Font: 15px / 400 / Lausanne
• Placeholder: #9C9A92
• Focus: border #1C1B17, ring 0 0 0 3px rgba(229,254,84,0.4) (lime focus glow)
• Use: Standard form input — most-used variant.

Filled (subtle)

• Background: #F7F7F5
• Text: #1C1B17
• Border: 1px solid transparent
• Radius: 8px
• Padding: 11px 14px
• Font: 15px / 400 / Lausanne
• Focus: background #FFFFFF, border #1C1B17
• Use: Dense forms, search bars, settings panels.

Error

• Background: #FFFFFF
• Text: #1C1B17
• Border: 1px solid #D93F3F
• Radius: 8px
• Padding: 11px 14px
• Font: 15px / 400 / Lausanne
• Use: Validation failure — paired with inline help text in #D93F3F 13px.

Cards

Standard

• Background: #FFFFFF
• Border: 1px solid #E3E1DA
• Radius: 12px
• Padding: 24px
• Shadow: 0 1px 2px rgba(28,27,23,0.05)
• Use: The workhorse surface — metrics, lists, settings panels.

Savings Highlight

• Background: #F4FCC9 (lime100)
• Border: 1px solid #E5FE54
• Radius: 12px
• Padding: 24px
• Shadow: none
• Use: Savings callouts, "you saved $X" moments — the lime-tinted hero card.

Dark Feature

• Background: #1C1B17
• Text: #FFFFFF
• Border: none
• Radius: 16px
• Padding: 32px
• Shadow: 0 8px 24px rgba(28,27,23,0.18)
• Use: Marketing feature cards, premium product highlights — lime accents pop on black.

Compact (list item)

• Background: #FFFFFF
• Border: 1px solid #E3E1DA
• Radius: 8px
• Padding: 14px 16px
• Shadow: none
• Use: Transaction rows, dense list items.

Badges

Lime (Brand)

• Background: #E5FE54
• Text: #1C1B17
• Radius: 6px
• Padding: 3px 8px
• Font: 12px / 600 / Lausanne
• Use: "NEW", "AI", brand-emphasis tags.

Success

• Background: rgba(26,127,75,0.12)
• Text: #1A7F4B
• Radius: 6px
• Padding: 3px 8px
• Font: 12px / 600 / Lausanne
• Use: Approved, reconciled, savings confirmed.

Warning

• Background: rgba(224,138,30,0.14)
• Text: #B36E14
• Radius: 6px
• Padding: 3px 8px
• Font: 12px / 600 / Lausanne
• Use: Pending approval, threshold alert.

Error

• Background: rgba(217,63,63,0.12)
• Text: #C23434
• Radius: 6px
• Padding: 3px 8px
• Font: 12px / 600 / Lausanne
• Use: Declined, over budget, flagged.

Neutral

• Background: #EFEEE9
• Text: #56554F
• Radius: 6px
• Padding: 3px 8px
• Font: 12px / 600 / Lausanne
• Use: Categories, metadata, default status.

Tabs

Underline (default)

• Container: bottom border 1px #E3E1DA
• Inactive: text #74726B, 15px / 500
• Active: text #1C1B17, 2px bottom border #1C1B17
• Use: In-page section switching (Transactions / Cards / Reports).

Segmented

• Background: #EFEEE9
• Radius: 8px
• Padding: 4px (track) / 6px 14px (item)
• Inactive: text #74726B
• Active: background #FFFFFF, text #1C1B17, shadow 0 1px 2px rgba(28,27,23,0.08)
• Font: 14px / 500 / Lausanne
• Use: View toggles (Month / Quarter / Year).

Toasts

Default

• Background: #1C1B17
• Text: #FFFFFF
• Radius: 10px
• Padding: 12px 16px
• Shadow: 0 8px 24px rgba(28,27,23,0.2)
• Font: 14px / 500 / Lausanne
• Accent: lime #E5FE54 icon or left-bar for success
• Use: Transient confirmation ("Card created", "Receipt matched").

Dialogs

Centered Modal

• Background: #FFFFFF
• Radius: 16px
• Padding: 28px
• Shadow: 0 12px 40px rgba(28,27,23,0.18)
• Backdrop: rgba(28,27,23,0.6)
• Use: Confirmations, create-card flow, approval prompts.

Toggles

Default

• Track: #1C1B17 (on) / #C9C7BF (off)
• Thumb: #FFFFFF 18px circle, shadow 0 1px 2px rgba(28,27,23,0.2)
• Radius: 9999px
• Note: "on" uses ink-black, not lime — lime is reserved for primary actions, not stateful settings.
• Use: Boolean settings (auto-approve, notifications).

Tier 1 sources: https://ramp.com (live production site, verified via live DOM getComputedStyle).

5. Layout Principles

Spacing System

• Base unit: 4px
• Common values: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px
• Section vertical rhythm: 96-128px between marketing sections (generous editorial breathing room)
• Card internal padding: 24px standard, 32px for feature cards

Grid & Container

• Max content width: 1200px (marketing), 1440px (product app shell)
• Marketing: 12-column grid, 24px gutters, asymmetric editorial layouts encouraged
• Product: persistent left sidebar (~240px) + fluid content area
• Horizontal page padding: 24px mobile, 64px+ desktop

Whitespace Philosophy

• Editorial generosity: Marketing pages use magazine-level whitespace — headlines breathe, sections are widely separated. The opposite of dense legacy fintech.
• Product density when earned: Transaction tables and ledger views are dense and tabular; the app trusts power users with information.
• Numbers get room: Large dollar figures are surrounded by deliberate negative space to land with impact.

Border Radius Scale

• Compact (6px): Badges, small chips, inline tags
• Standard (8px): Buttons, inputs, compact cards, segmented controls
• Comfortable (12px): Standard cards, list containers
• Large (16px): Modals, dark feature cards
• Pill (9999px): Toggles, filter chips, avatar groups

6. Depth & Elevation

Shadow Philosophy: Ramp shadows are warm (ink-tinted, never pure black) and restrained. On light surfaces, the brand prefers a crisp 1px border over a soft shadow — flatness reads as precision and modernity. Depth is reserved for genuinely floating elements. The drama in Ramp's design comes from color contrast (lime on black), not from elevation stacks.

Blur Effects

• Sticky nav applies subtle backdrop blur (backdrop-filter: blur(12px)) with semi-opaque off-white on scroll.
• Command palette / search overlays use a light backdrop blur over the scrim.

7. Do's and Don'ts

Do

• Use lime #E5FE54 only for primary CTAs and savings/value signals — keep it rare and intentional
• Pair lime fills with ink #1C1B17 text, never white text (contrast + brand consistency)
• Use ink #1C1B17 (warm near-black), never pure #000000, for text and dark surfaces
• Pair Burgess serif headlines with Lausanne sans body for editorial gravitas
• Right-align and use tabular numerals for all financial figures
• Prefer 1px borders over shadows on light cards
• Use uppercase Lausanne overlines (11px, 0.08em tracking) for section eyebrows

Don't

• Don't scatter lime across the UI — it loses its signal value if overused
• Don't use lime as a background for long text (poor legibility) or for stateful toggles
• Don't use white text on lime fills — always ink text
• Don't use Burgess serif inside dense product tables — Lausanne only
• Don't use pure black #000000 — the brand black is warm #1C1B17
• Don't add heavy multi-layer shadows — Ramp's depth is flat and border-driven
• Don't use the brand lime as a semantic "success" color — success is #1A7F4B

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons: minimum 44px height on touch devices
• Table rows: minimum 48px row height for tap-friendly transaction lists
• Nav/menu items: minimum 44px tap height

Collapsing Strategy

• Product sidebar collapses to icon-rail then off-canvas drawer on tablet/mobile
• Multi-column dashboards stack to single column below 640px
• Dense data tables become card-stacked rows on mobile (label-value pairs)
• Sticky bottom CTA bar on mobile marketing pages

Image Behavior

• Card product shots and screenshots: full-width, maintain aspect ratio, rounded 12-16px corners
• Customer logos: greyscale #74726B, uniform height (~28px), in a logo strip
• Hero imagery often replaced by oversized typographic numerals rather than photos

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Ramp Lime (#E5FE54) with ink text (#1C1B17)
• CTA Hover: Lime 600 (#D4ED3F)
• Dark CTA / strong action: Ink (#1C1B17), white text
• Page background: Off-White (#F7F7F5)
• Card surface: White (#FFFFFF)
• Heading text: Ink (#1C1B17)
• Body text: Ink 600 (#56554F)
• Caption/secondary: Grey 500 (#74726B)
• Placeholder: Grey 400 (#9C9A92)
• Border: Grey 200 (#E3E1DA)
• Success: Green (#1A7F4B)
• Error: Red (#D93F3F)
• Warning: Amber (#E08A1E)

Example Component Prompts

• "Create a savings card: lime100 (#F4FCC9) bg, 1px lime (#E5FE54) border, 12px radius, 24px padding. Overline 'TOTAL SAVED' 11px uppercase Lausanne 600, 0.08em tracking, #56554F. Amount '$1.2M' 56px Lausanne 500, #1C1B17, tabular numerals. No shadow."
• "Build a primary CTA: lime #E5FE54 bg, ink #1C1B17 text, 15px Lausanne 500, 44px height, 8px radius, 0 20px padding. Hover: bg #D4ED3F."
• "Design a transaction row: white bg, 1px #E3E1DA border, 8px radius, 48px min-height, 14px 16px padding. Left: 28px merchant logo + name (15px Lausanne 500, #1C1B17) + category badge (neutral, #EFEEE9). Right: amount (15px Lausanne 500, tabular, right-aligned, #1C1B17)."
• "Create a dark feature card: ink #1C1B17 bg, 16px radius, 32px padding. Serif Burgess headline 30px #FFFFFF. Body 17px Lausanne 400 rgba(255,255,255,0.7). Lime #E5FE54 text-link CTA."
• "Design an input with lime focus: white bg, 1px #C9C7BF border, 8px radius, 11px 14px padding, 15px Lausanne. Focus: border #1C1B17 + ring 0 0 0 3px rgba(229,254,84,0.4)."

Iteration Guide

1. Lime #E5FE54 is precious — use it only for the single primary action or a savings signal
2. All blacks are warm ink #1C1B17, never #000000
3. Headlines on marketing can be Burgess serif; all product UI is Lausanne sans
4. Financial numbers: Lausanne 500, tabular numerals, right-aligned
5. Prefer 1px borders to shadows on light surfaces; reserve shadow for floating elements
6. Section eyebrows: 11px uppercase Lausanne 600, 0.08em tracking
7. Default radius 8px (controls), 12px (cards), 16px (modals/dark cards)

10. Voice & Tone

Ramp speaks like a sharp, time-respecting finance operator: direct, metric-driven, confident, never fluffy. The brand sells time and money saved, so copy leads with numbers ("close books 75% faster", "save an average of 5%"). Sentences are short and declarative. No exclamation marks, no startup-cute. There's a dry confidence — the product is assumed to be obviously better, so the copy states outcomes rather than pleading.

Forbidden tone. No "Oops!", no exclamation-heavy enthusiasm, no vague "powerful, seamless, robust" filler adjectives. Never bury the number. Avoid hedging ("approximately", "up to" when an exact figure is known on the user's own data).

11. Brand Narrative

Ramp was founded in 2019 by Eric Glyman and Karim Atiyeh (who had previously built and sold Paribus to Capital One). The founding insight inverted the entire corporate-card industry: every incumbent card issuer made more money when customers spent more, so their "rewards" quietly incentivized waste. Ramp built the opposite — a corporate card and spend-management platform whose explicit product goal is to help companies spend less. The brand promise is encoded in the name: Ramp helps you ramp down costs and ramp up efficiency.

That contrarian thesis shapes the entire visual system. The electric lime #E5FE54 is the color of "found money" — energetic, slightly disruptive, impossible to ignore — set against a serious editorial ink-and-serif foundation that signals Ramp is a rigorous financial tool, not a toy. The design rejects two clichés simultaneously: the cold navy institutionalism of legacy finance (Amex, Concur, SAP) and the rounded pastel friendliness of consumer fintech. Ramp occupies a distinct middle — premium, editorial, fast, and confident.

Ramp grew explosively, becoming one of the fastest-growing SaaS companies in history and reaching a multi-billion-dollar valuation within a few years, backed by investors including Founders Fund, Stripe, Thrive Capital, and Sequoia. By 2024-2025 the brand leaned hard into AI — "Ramp Intelligence" — positioning itself as the platform where finance work gets automated away. The design absorbed this without changing its core: the lime still means action, the serif still means intelligence, and the numbers still tell the story.

What Ramp refuses: the apologetic, dense, jargon-laden UX of legacy ERP/expense tools; the playful illustration-heavy style of consumer apps; and any design move that hides the dollar figure. In Ramp's world, the savings number is always the hero.

12. Principles

1. The number is the hero. Dollar amounts saved or moved are the largest, most deliberate element on any screen. Never bury a financial figure in body text.
2. Lime is a signal, not a color. #E5FE54 appears only where it means "act here" or "value found." Used everywhere, it means nothing. Restraint is what makes it powerful.
3. Warm black, never cold. The brand black is #1C1B17. Pure #000000 reads as default and cheap; the warm ink reads as considered.
4. Serif for intelligence, sans for system. Burgess carries the brand's editorial voice; Lausanne carries the functional product. Mixing them wrongly (serif in a table) breaks the system.
5. Flat is precise. Prefer 1px borders to shadows. Depth is earned only by genuinely floating elements. Flatness communicates modernity and rigor.
6. Editorial whitespace on marketing, earned density in product. Marketing breathes like a magazine; the app trusts power users with dense, tabular data.
7. State outcomes, don't sell them. The copy assumes the product wins. It reports results ("75% faster") rather than persuading.
8. Contrast over decoration. The brand's drama comes from lime-on-black contrast, not gradients, illustrations, or shadow stacks.

13. Personas

Personas below are fictional archetypes informed by publicly described corporate-spend-management user segments, not individual people.

Maya, 34, San Francisco. VP of Finance at a 200-person Series B startup. Lives in the Ramp dashboard during month-end close. Cares about one thing: closing the books faster with fewer manual reconciliations. She wants dense, scannable transaction tables, fast filtering, and clear approval queues. Editorial flourishes are wasted on her — but the "you saved $X this month" number genuinely lands, because she reports it to the CFO. Power user; keyboard shortcuts; impatient with latency.

Daniel, 41, Austin. Operations lead at a fast-growing logistics company. Issues and manages dozens of employee cards. Needs to set spending limits, see who spent what, and freeze a card in two clicks. Doesn't think of himself as a "finance person" — he needs the UI to be obvious and the dangerous actions (freeze, revoke) to be clearly destructive-styled. Trusts the lime CTA to be the "right next step."

Priya, 29, New York. Marketing manager who is just a spender on the platform — she submits receipts and requests card limits. Touches Ramp a few times a week, mostly on mobile. Wants the receipt-upload and reimbursement flow to be frictionless and fast. The brand's polish (serif headlines, clean cards) makes her trust that the expense process won't be a nightmare. Judges the whole product by how painless one receipt upload is.

14. States

15. Motion & Easing

Durations:

Easings:

Signature motions.

1. Savings count-up. Dollar figures animate by counting up from a lower value to the final number over motion-slow with ease-emphasis. The number arriving is the emotional payoff — the single most important animation in the brand. Tabular numerals keep the layout stable during count-up.
2. Card hover-lift. On hover, interactive cards lift with a 0 4px 12px rgba(28,27,23,0.08) shadow and a 1px translateY over motion-standard / ease-standard. Subtle, premium, never bouncy.
3. Lime CTA press. The primary lime button darkens to #C7DF34 and scales to 0.98 over motion-fast — a crisp, tactile commit, no overshoot.
4. Modal entrance. Modals scale from 0.96 to 1.0 and fade in over motion-slow / ease-enter, backdrop scrim fades rgba(28,27,23,0) → rgba(28,27,23,0.6) in sync.
5. Reduce motion. Under prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant. The savings count-up snaps directly to the final figure; crossfades replace slides. Fully usable, just static.