Unkey
unkey.com/
Unkey is a control plane that combines API deployment, edge gateway routing, API key management, and usage observability into one platform, positioned as a replacement for stitching together several separate vendors. The homepage avoids vanity metrics, instead citing one operational specific: a rolled-back production instance stays live for 30 minutes during deploys. It splits its offering into two distinct products on the same page, a container-based Deployment Platform with Git-based deploys and instant rollbacks, and an API Management layer for key issuance and rate limiting, and mentions that OpenAPI diffs automatically flag breaking changes. There are no customer testimonials or logos on the page; credibility rests on an open-source GitHub link and feature depth.
- Category
- Engineering & Infrastructure
- Style
- DarkMinimal
- Stack
- Next.jsTailwind CSS
- Fonts
- articulat-cfInter
- Palette
- Meta title
- Unkey | The Developer Platform for Modern APIs
- Sections
- 7
- Updated
Unkey's landing page, section by section
Each section below is cropped straight from Unkey's live page — useful references for engineering & infrastructure landing page design.
Heroes
More heroesFeatures
More featuresPricing
More pricingCTAs
More ctasAbout Us
More about usBlog pages
More blog pagesUnkey design review: how the homepage is built
The homepage is 12,055 pixels tall at 1440px and alternates near-black sections with one pale blue band. Order runs from hero and logo strip to a control-plane pitch, a five-row build-and-deploy list, a gateway grid, a scale band, an observability chart, a developer-portal trio and a closing call to action. Colour relies on #060609, #26272a and #fbfbfb, with a yellow-green highlight on key phrases. Type pairs articulat-cf with Inter, while monospace text and ASCII-style art give a terminal feel. Section tags such as "BUILD & DEPLOY" and "GATEWAY" label each stretch.
Above the fold
A white navigation bar holds the "unkey" logo, "Resources", "Pricing", "Docs", "Discord", a "5.3k" GitHub button and "Login"/"Sign Up" buttons. The hero is a grainy grey image overlaid with ASCII shapes and branch labels, with "Deploy in minutes. Roll back in seconds." at its centre. Beneath it, "The Developer Platform for Modern APIs" sits left with a paragraph, while "Start for free" and "View on GitHub" buttons sit right. A strip of seven logos follows.
Control plane and build-and-deploy rows
"Unify your fragmented API stack with a single control plane for access and traffic." highlights its last phrase in yellow-green, above four bordered cells: "Branch Overview", "Manage API Keys", "Control Plane" and "Usage 30 Days". The "BUILD & DEPLOY" block then stacks five rows, each with a two-tone title, a short paragraph and a screenshot on the right, from "Connect a repo and push code" to "Validate releases automatically".
Gateway, scale and observe
A "GATEWAY" tag introduces "Protect and control traffic at the edge." above a five-cell grid labelled "Auth + Keys", "Global platform", "Validation", "Rate limits" and "Analytics". A "BUILT FOR PRODUCTION" row follows. A pale blue "SCALE" band follows with four outlined icons, from "Multi-region routing" to "Built-in protection". "OBSERVE" then shows a bar chart with yellow-green bars beside four short paragraphs.
Closing section and footer
The "AIO DEVELOPER PORTAL" block carries a "Coming soon" button and three bordered columns: "Zero code required.", "Beautiful API docs." and "Keys and usage, self-serve." The closing line, "Turn your API stack into one workflow.", sits over a blurred grey-and-white gradient with a single "Start for free" button. The footer lists "Company", "Resources", "Connect" and "Legal" columns and a "SOC 2 Type II Certified" badge.
On mobile
At 390px the hero artwork shrinks to a few blue squares above the headline. The logo strip is cropped after three marks. The four control-plane cells become stacked cards, and each deploy row puts its screenshot beneath its text. Gateway cells run in one column, the four scale icons stack vertically, and footer links form two columns, with "Connect" and "Legal" on a second row. "Start for free" stays a white button.
Worth borrowing
- Highlighting one phrase per headline in yellow-green, as with "access and traffic.", gives dark sections a single accent.
- Two-tone titles, white first line over grey second line, let each deploy row carry a benefit and a detail without extra elements.
- A single pale blue band between dark sections resets the page rhythm before the observability chart.
