Cool, engineered API infrastructure on a BLUE-CAST near-black #040406 stage — dark, but not the keyboard-first launcher the category implies, since there is no command menu or keycap chrome anywhere. A wide, LIGHT geometric grotesque carries the display at 64/72 weight 400 with tracking left NORMAL even at that size, over Inter body and JetBrains Mono eyebrows set UPPERCASE at +0.42px, so the page reads spacious rather than dense. Geometry is deliberately split: every control is SQUARE at 0px while cards take a fractional 2px radius, and there are zero box-shadows anywhere — separation comes from a 1px #2e3038 hairline, a 135deg hatch-gutter gradient, and radial and linear scrims that fade a dim voxel-block hero field into the canvas. The nav is unusual too, divided into bordered CELLS rather than free-floating links, and the hero splits its alignment with the headline bottom-left and CTAs bottom-right. Colour is rationed to indicators only: teal #35f1e4 and blue #0095e6 appear as 10x10 status pixels, blue #3580f1 as a single hero voxel, and lime #def135 as exactly one text-highlight band — never as a button fill, which stays a white or outlined rectangle. Small 2D canvases render inline metric sparklines, and the site ships twelve prefers-reduced-motion blocks, among the most thorough captured here.
Browse Unkey in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: unkey.com (live DOM, computed styles), 2026-07-27 (desktop 1512px). Coverage: home page. Dashboard behind login (needs-dashboard). 0 stylesheets blocked — full coverage. Reality check: hint ("dark developer surface, keyboard-first") is half right. Dark is correct and then some — the canvas is a blue-cast near-black#040406. But "keyboard-first" is unsupported: no command menu, no⌘Kaffordance and no keycap chrome anywhere on the marketing page; the product framing is API deployment/gateways/observability, not keyboard navigation. Three signatures the hint misses: (1) the display is a geometric grotesque, articulat-cf, at 64/72 weight 400 — light and wide, not a heavy dev-tool face — over Inter body and JetBrains Mono UPPERCASE eyebrows; (2) controls are SQUARE (0px) while cards take a fractional 2px radius, and there are zero real shadows — separation is a 1px#2e3038hairline (31×); (3) it ships 12prefers-reduced-motionblocks, among the most thorough in the library.
Cool, engineered API infrastructure — a blue-cast near-black stage where a wide light-weight display floats over a dim voxel-block field, and colour appears only as tiny status pixels. Chrome is strictly monochrome white-on-near-black; teal, blue and lime arrive as 10×10 indicator dots or a single highlight band, never as a button fill. Structure is drawn with 1px #2e3038 hairlines, a 135° hatch gutter and square controls, so the surface reads technical rather than decorative. Depth is refused entirely — no shadows, only scrims that fade the hero field into the canvas. Feels: cool, engineered, precise, spacious.
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Primary text, display (376 uses) |
| grey-91 | #9194a1 | Body / secondary (57 uses) |
| grey-c7 | #c7c9d1 | Bright secondary |
| grey-e3 | #e3e4e9 | Near-white text |
| grey-ab | #abaebb | Muted / border-strong |
| grey-60 | #60606c | Mono sub-labels |
| grey-5f | #5f5f6b | Faintest rule |
| grey-46 | #464853 | Dim text |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #040406 | Page background (blue-cast near-black) |
| surface-1 | #121317 / #121318 | Card / active tab fill |
| surface-2 | #2e3038 | Raised inset |
| border | #2e3038 | THE hairline (31×) |
| border-strong | #abaebb | Emphasised rule (9×) |
| border-white | #ffffff | Outline-button border |
| Token | Hex | Role / usage |
|---|---|---|
| teal | #35f1e4 | Status pixel (10×10 indicator dots) |
| blue | #0095e6 | Status pixel (10×10 indicator dots) |
| blue-alt | #3580f1 | Hero voxel highlight block |
| lime | #def135 | ONE text-highlight band (359×42px) |
| blue-600 | #155dfc | Tailwind token in use |
Rule: chrome is monochrome white-on-#040406; teal/blue appear only as 10×10 status pixels and lime only as a single highlight band — never as a button fill.
#9194a1.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 72 | 400 | normal, articulat-cf |
| Section (h2) | 44 / 49.5 | 400 | normal, articulat-cf |
| Mono sub (h3) | 15 / 18.75 | 400 | normal, JetBrains Mono |
| Eyebrow | 14 / 20 | 400 | +0.42px, UPPERCASE, JetBrains Mono |
| Body | 16 / 22 | 400 | -0.16px |
| Nav | 16 / 24 | 400 | normal |
| Button | 14 / 14 | 500 | -0.35px |
| Tab (large) | 20 | 400 | normal |
Patterns: the display is LIGHT (400) and wide — restraint by weight, tracking stays normal even at 64px. Only buttons reach weight 500. JetBrains Mono carries every eyebrow and small technical label in UPPERCASE with positive tracking.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.