# Unkey — Marketing Site Design Spec

> 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 `⌘K` affordance 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 `#2e3038` hairline (31×); (3) it ships **12 `prefers-reduced-motion` blocks**, among the most thorough in the library.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text
| 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 |

### Surfaces & borders
| 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 |

### Accent & semantic
| 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.

## 3. Typography Rules

- Stack: **Inter** (workhorse, 544×) · **articulat-cf** (display, 17×) · **JetBrains Mono** (eyebrows/labels, 10×).
- Preview substitutes: **Space Grotesk** for articulat-cf (a licensed geometric grotesque); Inter and JetBrains Mono are open and used as-is. Recorded here so the spec never implies the real display face.
- Body: 16px / 22px / 400 / `#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.

## 4. Component Stylings

### Buttons
- **Primary (white)**: bg `#ffffff`, text `#040406`, **radius 0px**, h 44px, Inter 14/500 -0.35px, no border, no shadow.
- **Outline**: bg `#040406`, text `#ffffff`, **1px solid `#ffffff`**, radius 0px, h 44px.
- **Ghost / nav**: transparent, text `#ffffff`, radius 0px, Inter 16/400.
- **Segmented tab (Connect / Deploy)**: active bg `#121317` with `#ffffff` text; inactive transparent with `#9194a1`; both 1px `#2e3038`, radius 0px, h 63px.

### Inputs
- Not present above the fold on the marketing page (0 stylesheets blocked — a real absence). Expect the same square 0px / 1px `#2e3038` treatment.

### States
| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary (white) | `#ffffff` / `#040406` | house colour transition (`color/background/border` ~.15s, 50×) | no explicit brand ring captured | — | — |
| Outline | 1px `#ffffff` | border/fill shift | — | — | — |
| Segmented tab | transparent / `#9194a1` | text brightens | — | active fills `#121317`, text `#ffffff` | — |

**Anti-pattern: no brand focus ring captured.** Recommended replacement: `0 0 0 2px #35f1e4` at 2px offset.

### Cards / panels
- Fill `#121317`, **1px `#2e3038` border, radius 2px** (fractional — rounding to 0 or 4 breaks it), **no shadow**. Status pixels are 10×10 squares in teal/blue.

## 5. Layout Principles

- Tailwind v4 token set (`--container-*`, `--text-*`, `--breakpoint-sm`).
- Nav: "unkey" wordmark left, centered links (Resources ▾, Pricing, Docs), then boxed Discord and GitHub-star cells, and Login (outline) / Sign Up flush right — all cells divided by 1px `#2e3038` rules, giving a segmented bar rather than free-floating links.
- Hero: full-bleed dim voxel-block field, display bottom-left, body beneath, CTAs bottom-**right** (an unusual split alignment).
- Sections use a 135° hatch gutter and hairline-divided panels.

## 6. Depth & Elevation

- Radius scale: **2px** (dominant, 16× — cards/panels) · **6px** (6×) · **0px** on every control.
- Borders: **1px `#2e3038`** (31×) · 1px `#abaebb` (9×) · 1px `#ffffff` (outline buttons) · 1px `#5f5f6b`.
- Elevation: **zero real box-shadows** (both recorded entries are transparent Tailwind placeholders). No backdrop-filter. Depth is surface steps, hairlines and scrims only.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background, border, fill, stroke | ~.15s | cubic-bezier(0.4,0,0.2,1) | links, buttons (dominant, 50×) |
| opacity | 0.2s / 0.3s | cubic-bezier(0.4,0,0.2,1) | reveals |
| transform/translate/scale | 0.2s | cubic-bezier(0.4,0,0.2,1) | hovers |
| grid-template-rows, opacity | 0.3s | cubic-bezier(0,0,0.2,1) | accordion expand |

House easing: Tailwind's `cubic-bezier(0.4,0,0.2,1)`. Keyframes: `accordion-down`/`accordion-up`, `enter`/`exit`, `spin`, `pulse`, and `logos` (a logo ticker). The `c15t-ui-*` enter/exit/fadeIn keyframes belong to the consent widget and are excluded. No animation library detected. **Ships 12 `prefers-reduced-motion` blocks — among the most thorough in the library.**

## 8. Backgrounds, Effects & WebGL

- **4 gradients, all structural**: a top-down `rgba(4,4,6,0)→#040406` scrim, a `radial-gradient(132% 112% at 24% 100%, …)` corner scrim that fades the voxel field into the canvas, a **`repeating-linear-gradient(135deg, rgba(46,48,56,.45) 0 1px, transparent 1px 8px)` hatch gutter**, and one pale blue product gradient.
- **4 small 2D canvases (293×230)** rendering inline metric sparklines; 2 background videos. No WebGL, no grain, no backdrop-filter.

## 9. Do's and Don'ts

### Do
- Keep the canvas a blue-cast near-black `#040406` with `#121317` cards.
- Use articulat-cf (or a geometric grotesque stand-in) at weight 400 for the display; keep tracking normal even at 64px.
- Put every eyebrow and small technical label in JetBrains Mono UPPERCASE with +0.42px tracking.
- Keep controls SQUARE (0px) and cards at the fractional **2px** radius.
- Separate with 1px `#2e3038` hairlines and a 135° hatch gutter — never a shadow.
- Reserve teal `#35f1e4` and blue `#0095e6` for 10×10 status pixels, and lime `#def135` for a single highlight band.
- Divide the nav into bordered cells rather than free-floating links.

### Don't
- Don't round controls, and don't round cards past 2px.
- Don't add shadows, glows or backdrop blur — depth is scrims and hairlines.
- Don't use the accents as button fills or link colours.
- Don't bold the display — it stays at weight 400.
- Don't drop the reduced-motion blocks; this site is unusually careful about them.

## 10. Responsive Behavior

- Breakpoints (from stylesheets): Tailwind v4 defaults `40 / 48 / 64 / 80 / 96rem` plus bespoke px seams at 380, 480 (min & max), 640 (min & max), 860 and 1025px — 12 seams.
- Nav collapses to a menu; the hero's split display/CTA alignment stacks; panels go single-column.
- `darkSchemeBlocks: 1` — dark by default, no toggle. **0 container queries, 12 reduced-motion blocks.**

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#040406` · Text `#ffffff` · Muted `#9194a1` · Border `#2e3038` · Card `#121317` · Accents `#35f1e4` / `#0095e6` / `#def135`
- Font: `articulat-cf` display 64/72 w400 · `Inter` body 16/22 · `JetBrains Mono` UPPERCASE eyebrows · Radius: **0px controls / 2px cards** · Control height: 44px
- Focus: none captured — use `0 0 0 2px #35f1e4` · Hover: house `cubic-bezier(0.4,0,0.2,1)` colour transition

<unkey_design_language>
Use the Unkey design language: cool, engineered API infrastructure on a BLUE-CAST near-black `#040406` canvas, with `#121317` cards, white primary text and `#9194a1` body. Type is three-voiced: a WIDE, LIGHT geometric grotesque (articulat-cf) at 64/72 weight 400 for the display with tracking left NORMAL even at that size, Inter for body at 16/22 (-0.16px), and JetBrains Mono UPPERCASE at +0.42px for every eyebrow and small technical label; only buttons reach weight 500. Geometry is split and deliberate — **controls are SQUARE (0px)** while cards take a fractional **2px** radius — and there are **zero box-shadows anywhere**: separation is a 1px `#2e3038` hairline, a 135deg `rgba(46,48,56,.45)` hatch gutter, and radial/linear scrims that fade the dim voxel-block hero field into the canvas. The nav is divided into bordered CELLS rather than free-floating links. Buttons are a white `#ffffff`/`#040406` primary and a 1px white outline, both 44px. Colour is rationed to indicators only: teal `#35f1e4` and blue `#0095e6` as 10x10 status pixels, blue `#3580f1` as a hero voxel, and lime `#def135` as one text-highlight band — never a button fill. Motion is Tailwind's cubic-bezier(0.4,0,0.2,1) on colour and opacity, with small 2D canvas sparklines inline, and the site ships 12 prefers-reduced-motion blocks. Feels: cool, engineered, precise, spacious. Avoid: rounded controls, card radii above 2px, any shadow or glow, accents used as fills or links, and a bolded display.
</unkey_design_language>