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
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.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for