Inside the Fern website design
Fern is a developer tools website built with custom code, Next.js, Astro, and Tailwind CSS. Its pages are built from navbar, stats, features, testimonials, CTA, other, hero, feature grid, product demo, blog, and footer sections, shown here in full-page captures and a scroll recording. Typography: GT Planar (display text, headings, and body text) and JetBrains Mono (monospaced text). Colours: background #F7F7F7, text #202020, surface #FFFFFF, secondary text #737373.
Start with OpenAPI. Generate SDKs in multiple languages, interactive API documentation, and an agent-first CLI. Its visual style is minimal, corporate, and developer focused, with navigation bar, hero, and logo strip among its components.
Why we picked it
A deep blue hero with a soft gradient horizon frames an actual docs browser and a mono-type terminal window side by side, showing the product mid-task instead of describing it. Below, a plain grey background with bold black stat numbers and small logo marks keeps the long page easy to scan while still building trust through named customers.
What to look for
- Navbar: a short menu: only the destinations visitors actually look for
- Stats: three or four numbers that matter to the buyer
- Features: benefits framed around what the user gets, not internal capability names
- Testimonials: names, roles, and photos or logos for credibility
Questions designers ask
What fonts does Fern use?
Fern uses GT Planar for display text, headings, and body text, and JetBrains Mono for monospaced text, measured from the captured page's CSS.
What is the Fern website built with?
The Fern website is built with custom code, Next.js, Astro, and Tailwind CSS, detected when the page was captured.
What colours does the Fern website use?
Measured from the captured page's CSS, the Fern website uses #F7F7F7 for the background, #202020 for text, #FFFFFF for surfaces, and #737373 for secondary text.
What sections does the Fern website have?
The Fern website includes navbar, stats, features, testimonials, CTA, other, hero, feature grid, product demo, blog, and footer sections. Each one opens on its own page, so you can compare it with the same section on other websites.
