Better Stack

Why it works

Generous breathing room and clear visual hierarchy communicate technical complexity simply. Dark backgrounds with bright accent colours — blues and greens — guide attention to key features without pressure. Large readable typography paired with subtle animations builds confidence in a product that could easily feel intimidating.

Who should look at this

B2B SaaS founders competing on value who want to sell cost savings through calm, honest design rather than flashy UI.

Signature technique

A hero section using a carousel of actual product screenshots with minimal text overlay — showing the product at work instead of describing it in abstract terms.

How the page is built

1. Navigation bar. The logo and six short menus sit on the left, with 'Sign in' and a filled violet 'Sign up' button on the right.
2. Headline with a price claim. A two-line headline is followed by a specific boast, '30x cheaper than Datadog', along with a work-email box joined to a 'Start for free' button.
3. Switching offer. A small line under the button says that if the competitor's bill is too high, the rest of the contract is on them, and links to a consultation.
4. Product carousel. A rotating set of dim product screens, each labelled by feature such as tracing, with arrows and dots, shows the range without a long list.
5. Faded logo row. Company names appear in a dim, scrolling strip, so they add credibility without pulling attention from the claim.
6. Price comparison card. 'At a fraction of your current costs' sits beside a card pricing the same terabyte of data both ways, with the competitor's monthly figure in the tens of thousands against a few hundred, and the assumptions in a footnote.
7. AI assistant section. A further block introduces the AI incident assistant in a carousel, followed by notes on connecting it to other AI tools.

Look and feel

Near-black with deep indigo tints, white headings, small grey supporting text and a single violet button. The dim product screens and faded logos recede, so the headline and the price card are the brightest things on the page. It feels precise and engineered.

Where it might not fit

Naming a competitor and promising a huge saving invites doubt, so the figures must be defensible, and here the conditions sit in a long footnote in very small type. The dim logos and grey text are also hard to read against the dark background.

What to borrow

• Put your sharpest claim in the first screen as a specific comparison, such as '30x cheaper than' a named alternative, instead of an adjective like 'affordable'.
• Turn the price comparison into a card with two rows, theirs and yours, so the size of the gap does the arguing.
• Join the email box to the button, and add a second line for people who need more reassurance, such as free migration help.

Brief your developer

“I want a near-black page with a two-line headline, one specific price comparison against a named competitor right under it, an email box joined to a violet button, and a carousel of product screens beside the text.”

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

Should I compare my price with a named competitor?

Better Stack puts '30x cheaper than Datadog' in the first screen and later shows a card pricing the same usage both ways, with the gap in the tens of thousands of dollars a month and the assumptions spelled out in a footnote. Specific numbers persuade far better than 'affordable'. It only works if you can defend the figures, so show your assumptions as it does.

How do I reassure visitors who are afraid to switch?

Under the main button, Better Stack adds a line saying that if the competitor's bill is too high, the rest of the contract is on them, with migration help and a consultation link. It answers the biggest worry, the cost and effort of switching, right where the visitor decides. If switching is your visitors' fear, deal with it in the first screen.