Ramp

Why it works

Generous breathing room and a dark navy background create premium positioning without feeling cold or distant. Large confident typography paired with focused call-to-action buttons guides visitors naturally through the value proposition. The hero lands trust through tangible metrics — specific numbers and team counts — rather than vague promises.

Who should look at this

B2B SaaS founders who need to make enterprise software feel accessible and human rather than intimidating.

Signature technique

A restrained palette of navy, white, and one accent colour with substantial negative space — makes dense feature information feel lightweight and digestible rather than overwhelming.

How the page is built

1. Navigation bar. Five short menus on the left, a dark 'Sign in' button and a bright yellow-green 'See a demo' button on the right.
2. Headline with built-in sign-up. A two-line headline and one supporting sentence sit above an email box with the 'Get started for free' button attached to it, so starting takes one step.
3. Product picture. A monitor showing a reporting chart, a phone and a black card on the right show the whole product family in one image.
4. Reviews and logo strip. A star-review badge sits above the headline, and a line about finance teams saving hours is followed by a scrolling strip of grey company logos.
5. Get to know Ramp. A short title and one sentence about replacing several broken tools introduce the products in a calm white section.
6. Eight product cards. Cards for Intelligence, Corporate Cards, Expense Management, Accounts Payable, Travel, Procurement, Accounting Automation and Treasury all share the same layout of name, one-line promise, link and picture.
7. Closing sign-up. The same email box and button appear again at the bottom, so anyone who scrolled to the end can act without going back up.

Look and feel

The first screen starts deep midnight blue and fades into a pale sky as it moves down, with a white headline and a bright yellow-green accent. The rest of the page is calm grey-white cards, so the hero feels like the one dramatic moment on an otherwise orderly page.

Where it might not fit

Asking for a work email in the first screen suits a product that people try before they buy, but it would put off a personal brand or a service that needs explaining first. Eight near-identical product cards also make a long scroll for a visitor who wants only one thing, and the small, detailed screens in the hero image are hard to read.

What to borrow

• Build the sign-up into the hero, with an email box and the button joined together, so the first action takes one step and no extra page.
• Use one eye-catching colour for the actions that matter, here yellow-green on blue, and nowhere else, so the eye goes straight to the button.
• Give every product card the same layout of name, one-line promise, link and picture, so eight products read as one tidy set.

Brief your developer

“I want a dark blue hero that fades to white, a short two-line headline, an email box with a bright accent-coloured button built into it, a product picture on the right, and a quiet grey strip of client logos below.”

Want a full version for your own site? Get the brief.

Should the sign-up form be right in the first screen?

Ramp puts a single email box in its hero with a bright button attached, so starting takes one step and no extra page. That suits a product people can try before they buy. If your offer needs explaining first, such as a high-priced service, a 'Book a call' button will work better than a form.

How can one accent colour make a page easier to use?

Ramp's first screen is dark blue and white, and its only bright colour is a yellow-green that appears on the two buttons that matter, 'See a demo' and 'Get started for free'. Because nothing else on the screen uses it, the eye goes straight to the action. Pick one accent colour for your buttons and avoid using it for anything else.