A finance operations platform for cards, expenses, and accounts payable. Fits fintech SaaS, spend management, banking tools, and enterprise finance products.
Design tokens
12 colors · 9 type stylesVivid yellow (#e4f222) primary on a pure white (#ffffff) canvas, set in Lausanne throughout. The highlights below are read from the Ramp DESIGN.md in the Pass bundle, which carries all 12 color tokens, 9 type styles and the full component rules.
Colors
- Primaryvivid yellow
#e4f222 - Canvaspure white
#ffffff - Surfacecream
#f4f2f0 - Inknear-black
#1a1919
Type
- LausanneDisplayweights 400, 500, 48 to 64px
- LausanneBodyweights 400, 500, 14 to 20px
Radius
- xs 4px
- sm 6px
- md 8px
- lg 12px
- xl 16px
- full 9999px
Spacing
- xxs 4px
- xs 8px
- sm 12px
- md 16px
- lg 20px
- xl 24px
- xxl 32px
- huge 48px
- giant 64px
- section 128px
Components
- Primary button
button-primaryPrimary buttons fill with vivid yellow (#e4f222) and carry near-black (#1a1919) text, set in Lausanne 16px at weight 400, with 6px corners and 0 20px padding.
- Card
feature-cardCards sit on pure white (#ffffff) behind a light gray (#dadada) hairline, with 16px corners and 24px padding.
- Navigation
nav-barThe top navigation runs on pure white (#ffffff) with near-black (#1a1919) links, set in Lausanne 16px at weight 400.
Three ways to ship a Ramp-style UI.
Use in your AI builder, no-code tool, or CMS
Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.
Not affiliated with Ramp. All trademarks belong to their respective owners.
