Ramp
A corporate spend management platform with a confident, modern canvas — predominantly white (#FFFFFF) with a near-black (#0D0D0D) for marketing surfaces and Ramp's distinctive yellow-green (#B5FF4D / #CCFF00) as an electric accent that signals savings, growth, and money-forward thinking. The dashboard is clean and data-dense: expense tables, spend analytics, card management — all in a white product environment where yellow-green appears on the primary action and brand mark. The system reads as the anti-expense-report: modern, fast, and built by people who understand that finance software should be as good as consumer software.
Color Tokens
version: alpha name: Ramp description: "A corporate spend management platform with a confident, modern canvas — predominantly white (#FFFFFF) with a near-black (#0D0D0D) for marketing surfaces and Ramp's distinctive yellow-green (#B5FF4D / #CCFF00) as an electric accent that signals savings, growth, and money-forward thinking. The dashboard is clean and data-dense: expense tables, spend analytics, card management — all in a white product environment where yellow-green appears on the primary action and brand mark. The system reads as the anti-expense-report: modern, fast, and built by people who understand that finance software should be as good as consumer software."
colors: primary: "#B5FF4D" on-primary: "#0D0D0D" primary-hover: "#A8F040" ink: "#0D0D0D" ink-muted: "#6B7280" canvas: "#ffffff" surface-1: "#F8F8F8" surface-2: "#F0F0F0" border: "#E5E5E5" marketing-bg: "#0D0D0D" marketing-ink: "#F5F5F5" savings: "#B5FF4D" chart-accent: "#B5FF4D" success: "#22C55E" danger: "#EF4444"
typography: display: fontFamily: "Ramp Grotesk, ABC Diatype, Inter, -apple-system, sans-serif" fontSize: 56px fontWeight: 700 lineHeight: 1.05 letterSpacing: -0.03em body: fontFamily: "Ramp Grotesk, Inter, -apple-system, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.6 letterSpacing: -0.01em
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128]
radius: sm: 4px md: 8px lg: 12px pill: 9999px
shadows: card: "0 1px 3px rgba(0,0,0,0.08)" elevated: "0 4px 16px rgba(0,0,0,0.1)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.4, 0, 0.2, 1)
1. Visual Theme & Atmosphere
Ramp is the corporate card company that made expense management aspirational. The yellow-green accent (#B5FF4D) is used as a "savings" color — the amount Ramp has saved your company is displayed in this electric shade, making frugality feel exciting. The product is white and clean, a complete departure from the gray enterprise software that finance teams have historically tolerated. Marketing uses black canvas with the yellow-green for maximum impact and a bold, modern brand voice.
2. Color System
Dashboard (light):
- Canvas: pure white — finance-grade clarity
- Yellow-green: #B5FF4D — primary CTA, savings amount highlight, Ramp card art
- Ink: #0D0D0D — near-true black for authority
Marketing (dark):
- Canvas: #0D0D0D
- Yellow-green carries over — same accent, maximum contrast on dark
- White body text
The yellow-green is unusual in fintech — it says "fast, modern, profitable" rather than the trust-navy of traditional players.
3. Typography
Ramp Grotesk (ABC Diatype-derived) — a precise, slightly condensed grotesque at -0.03em display tracking. Bold at headlines, lighter at body. The financial data tables use tabular figures for column alignment. The brand has invested in typography as a differentiator from competitors.
4. Components & Patterns
- Spend chart: Yellow-green bars showing category spend, clean white background
- Expense table: Merchant logo + name + employee + amount + status pill — dense but scannable
- Card management: Physical card render + spending limit + recent transactions
- Savings dashboard: Large yellow-green number — total saved through Ramp intelligence
- Approval workflow: Step-by-step flow for expense approval routing
- Receipt matching: AI-matched receipts with confidence score visualization
5. Spacing & Layout
Dashboard: 240px sidebar, content max 1200px. Table row height: 48px for comfortable clicking. Card grid: 3-column with 24px gap. Marketing: 1440px max, dramatic full-bleed sections.
6. Motion & Interaction
Savings counter animates up on dashboard load — the number increasing is the signature Ramp delight moment. Approval actions have immediate feedback. Expense categorization shows AI-assigned category with confidence. Charts load with subtle bar-rise animation.