iter0
Back to Blog
SaaS sites, decoded·

Mintlify homepage, decoded: text beside a very large preview

A white hero with a serif headline at the left and an oversized product image breaking out to the right, then a logo grid with a real number in it.

John McKeown
John McKeown

4 min read

What this is, and what it is not

This is iter0's independent analysis of the Mintlify homepage as we captured it on 2 Oct 2026, at a 1440px desktop width and a 390px phone width. It is not affiliated with, endorsed by or written with Mintlify. Everything below comes from a design spec we already hold for the page: its measurements, its layout and what the capture did and did not show. There are no screenshots, logos or marketing copy from Mintlify here, and a live site can change at any time.

The big idea of the hero

A short serif headline (44px, weight 400) and two 42px actions stand beside, not above, an oversized product image that is 1055px wide and 641px tall, starting at x=584 and running off the right edge. A 189px by 34px chip with green text sits above the heading, and pale green curves show behind the image. The hero section is 974px high on desktop.

The navigation choice

A 40px announcement strip sits above a sticky 65px header with a lower divider. The brand is at the left, route controls follow, a pricing link sits beside them, and at the right are a sign-in action (75px by 34px) and a filled sales action (121px by 34px), both with 4px corners. The announcement and navigation are two separate layers.

The signature component

The signature is a social proof section. A 24px statement with a darker emphasised number sits at the left with a 200px by 42px action beneath it, and eight pale tiles in four columns and two rows (each about 119px by 116px with 6px corners) sit to its right. Below the grid is a strip of activity labels that continues beyond the right edge.

Type and colour decisions

A serif for the headline and a sans for everything else. The headline is 44px with 46px line height and -1.75px tracking; the supporting copy is 18px; the chip text is 12px with 0.24px tracking. Colour is white, near-black for the headline and primary action, muted grey, and green as the only accent (chip text rgb(12,140,94)).

What changes on a phone

At 390px the hero is 797px high with 16px side margins. The chip, 40px heading, support text and two 42px actions stack, and the image starts at y=545 and is 585px wide so it extends past the right edge. The header gets a 38px menu button and the desktop links and account actions are hidden.

What the capture does not tell us

The menu's open state is unknown, and the spec warns against assuming any unobserved image crop or mobile interaction.

What to steal (the pattern, not the look)

Place the product image beside the headline and let it bleed off the edge, which makes the product feel bigger than the page. Put a real, specific number in your proof statement and set the number in a darker weight than the words around it.

Get the free Mintlify design spec

We keep a longer craft spec for this page: hero, navigation and signature component, with the measured sizes, a list of what not to copy and checks you can run. It is free to download as a Markdown file, and you can use it as a pattern guide for your own site. It describes layout and proportion, so use your own name, wording and imagery. If you want a site built around the same pattern, give the spec to iter0 and it will build you an original page from it.

Put the brief into practice

A launch page should make the buyer, promise, proof, and next action obvious. iter0 uses this same standard when it turns a brief or reference site into a builder-ready page.

Start your launch build