openhands.dev/

OpenHands

openhands.dev/

OpenHands is a Engineering & Infrastructure product. See its openhands.dev landing page design in full — desktop and mobile screenshots plus close-ups of the heroes, features, footers, ctas, faqs, and 4 more. It's built with Tailwind CSS. Its type is set in Sohne Buch, anchored by a #ffff8b palette. Study how OpenHands structures its messaging, layout and visual hierarchy, then explore more of the best Engineering & Infrastructure website designs.

Visit website

Category

Engineering & Infrastructure

Style

Dark Minimal

Stack

Tailwind CSS

Fonts

Sohne Buch

Palette

Meta title

OpenHands | Open Source AI Coding Agent Platform

Sections

Updated

Nov 2, 2026

OpenHands's landing page, section by section

Each section below is cropped straight from OpenHands's live page — useful references for engineering & infrastructure landing page design.

OpenHands design review: how the homepage is built

Below a quiz bar and split hero come a logo strip, template cards, a hexagon diagram, six numbered use cases, an integrations grid, a stack picker, plan columns, a control-plane block, a testimonial wall, FAQs, an open-source stats panel and a closing statement. The desktop page is 9237 pixels tall. Nearly everything sits on #121212, with pale yellow #ffff8b reserved for half the headline and small accents. Sohne Buch sets the type, with monospaced capitals for section eyebrows. For a developer tool, the GitHub star count in the header doubles as a trust signal.

Above the fold

A grey bar asks "How mature is your agentic SDLC?" beside "Take the 2-minute quiz". The header lists five links, a "92.5K" GitHub count, "Access Cloud" and an outlined "Get OpenHands". At left, "The open platform for agentic software development" turns yellow after "for", above a white "Get OpenHands" dropdown, a "Talk to us" link and four agent icons. At right sits a dark app window titled "Let's Start Building!".

Automations, hexagon loop and use cases

"Build it once. Let agents keep it running." sits over a row of five template cards that bleed off the right edge, each tagged in monospace such as "TEAM COMMUNICATION". A light grey panel, "From signal to shipped change.", draws a hexagon with six nodes from "Signal" round to "Monitor". "Put the repetitive parts of the SDLC on autopilot." follows as six bordered cards numbered 01 to 06, two rows of three.

Integrations, stack picker and plans

"Integrate with the apps you rely upon" shows three rows of app tiles fading at both ends. "Your agents. Your models. Your runtime." pairs text with a "YOUR STACK" window of segmented selectors for "Agent", "Models" and "Runtime". A light panel sets NVIDIA and AMD logos beside a quote from "Adrian Macias". Three plan columns follow, ending in "Download free", "Create account" and "Talk to sales".

Control plane, testimonials, open source and footer

"Control how agents operate in production." sets a yellow wireframe cube beside a "Learn about Enterprise" button. "Developers love OpenHands" runs two rows of quote cards cropped at the right, then five "FAQs" rows. A light card, "Open source at the core.", offers three buttons and stat cells for "92.5K", "590" and "MIT". The page ends on "Building the open standard for autonomous software development.", a "Join The Community" button and a large wordmark.

On mobile

At 390px the page reaches 11741 pixels and the nav collapses to a "Menu" link. The hero stacks headline, a full-width "Get OpenHands" button, a centred "Talk to us" and a shrunken mockup. Template and testimonial cards become sideways carousels, use cases, stack selectors and plans stack in one column, and the three stats turn into a vertical list.

Worth borrowing

Turning only the second half of the headline yellow on a near-black page gives one accent a clear job.
A "YOUR STACK" picker with three rows of segmented choices states compatibility as an interface, not a logo list.
Placing light grey panels at intervals in a dark page marks the diagram, partner and open-source sections as separate beats.