# Zed — Marketing site Design Spec

> Source: zed.dev (live DOM, computed styles + the `--motif-*` / `--dithering-*` custom properties), 2026-07-19.
> Coverage: home / product landing. The editor itself is a native app; no logged-in web surface exists to capture.
> Note: the page also ships `--c15t-*` tokens from a third-party consent library (c15t); those are vendor chrome and are excluded from this spec.

## 1. Visual Theme & Atmosphere

Zed inverts the usual developer-tool formula. The canvas is a very deep blue-black `#00040a`, but the hero headline is set in **IBM Plex Serif — italic, at a variable weight of 320** — in a soft cornflower `#8ec5ff`. A light italic serif on a near-black editor site is the whole brand in one gesture: it reads as literary and considered rather than technical. Around it the page is engineered: a fine `repeating-linear-gradient` tick rail frames the container edges, buttons are small 4px rectangles that carry a **`0 -2px 0 inset` bevel** so they look like physical keycaps, and every action shows its keyboard shortcut in a mono chip. Colour discipline is strict — one blue `#1348dc` for actions — and all the chromatic range is delegated to the editor's own syntax theme (green, purple, cyan, red, sand). Feels: literary, engineered, precise, quietly dark.

## 2. Color Palette & Roles

### Brand tokens (published)

| Token | Value | Role / usage |
|---|---|---|
| `--motif-subtle-1` | `#161a22` | Subtle raised surface |
| `--motif-subtle-2` | `#1d242f66` | Subtle translucent surface |
| `--motif-accent-1` | `#1e69f6` | Brand accent |
| `--motif-accent-2` | `#93ccdc` | Secondary accent (pale cyan) |
| `--dithering-front` | `#0751cf` | Dither pattern foreground |
| `--dithering-back` | `#0751cf80` | Dither pattern background |

### Surfaces

| Token | Hex | Role / usage |
|---|---|---|
| `canvas` | `#00040a` | Deep blue-black page ground |
| `body` | `#111216` | Body background |
| `panel` | `#0d0f12` (`/0.95`) | Panel / dropdown surface |
| `surface` | `#121316` | Raised step |
| `surface-2` | `#282c33` | Editor chrome |
| `surface-3` | `#2f343e` | Higher chrome |
| `surface-4` | `#393d45` / `#3b414d` | Highest chrome |
| `glass` | `rgba(177,177,177,0.05)` | Secondary button fill |
| `glass-2` | `rgba(51,64,64,0.08)` | Faint fill |
| `glass-3` | `rgba(216,235,255,0.05)` | Cool faint fill |
| `key-chip` | `rgba(35,35,30,0.20)` | Keyboard shortcut chip |

### Text

| Token | Hex | Role / usage |
|---|---|---|
| `text` | `#ffffff` | Headings |
| `text-2` | `#e1e3e7` | Button labels |
| `body-text` | `#b2b9c6` | Body copy (most common) |
| `body-2` | `#acb2be` / `#a9afbc` / `#a8adb7` | Secondary body |
| `muted` | `#4e5a5f` | Line numbers, muted meta |
| `muted-2` | `#5d636f` | Muted |
| `chip-text` | `#cbcfd4` | Keyboard chip label |
| `hero` | `#8ec5ff` | The italic serif hero headline |
| `link-on-panel` | `#dbeafe` | Link on dark panel |

### Accent & borders

| Token | Value | Role / usage |
|---|---|---|
| `blue` | `#1348dc` | THE action colour — primary button fill |
| `blue-bevel` | `rgb(5,55,148)` | The primary button's inset bevel |
| `border` | `rgba(135,140,155,0.20)` | Secondary button border |
| `border-2` | `rgba(92,99,113,0.14)` | Faint control border |
| `bevel-light` | `rgba(169,176,188,0.08)` | Secondary button inset bevel |

### Editor syntax theme (the page's only chromatic range)

`#a1c181` green · `#b477cf` purple · `#6eb4bf` cyan · `#73ade9` / `#74ade8` blue · `#d07277` red · `#b1574b` rust · `#dec184` sand · `#dce0e5` / `#d0d4da` bright text · `#4e5a5f` comment

**Rules.** One action colour, `#1348dc`. All other chroma lives inside the embedded editor as syntax highlighting — never in chrome. Surfaces step through blue-blacks; there is no neutral grey ground.

## 3. Typography Rules

- Display + headings: `plexSerif, "plexSerif Fallback"` (IBM Plex Serif) — **used italic at sub-400 variable weights**
- UI: `writer, ui-sans-serif` — the UI sans
- Code: `zedMono` and `ui-monospace`

| Role | Family | Size/Line | Weight | Tracking | Style |
|---|---|---|---|---|---|
| Hero h1 | plexSerif | 48/57.6 | **320** | -0.96px | **italic**, `#8ec5ff` |
| Section h2 | plexSerif | 25.6/32 | **360** | normal | roman |
| Card h3 | plexSerif | 16.8/18.48 | 400 | normal | roman |
| Eyebrow / banner | plexSerif | 14/20 | 400 | +0.3px | roman |
| Body | writer | 14-16 | 400 | normal | `#b2b9c6` |
| Button label | writer | 14 | 400 | normal | — |
| Code | zedMono | 12/16 | 400 | normal | — |
| Keyboard chip | ui-monospace | 11/11 | 400 | normal | `#cbcfd4` |

Patterns: the serif runs at **variable weights below 400** (320 for the hero, 360 for sections) — the defining typographic choice, and the reason the headings feel light rather than editorial-heavy. The hero is the only italic. Tracking is negative only on the hero (-0.96px) and slightly positive on the small eyebrow (+0.3px). Nothing is bold; nothing is uppercase.

## 4. Component Stylings

**Nav** — logo, six links at 14/400 in the `writer` sans, then a search affordance showing `⌘⇧P` in a mono chip, "Sign up" with an `S` chip, and the blue Download button with a `D` chip. Below it a full-width announcement strip.

**Buttons** — small 4px rectangles at 32-36px, each carrying a **shortcut chip** and an inset bevel:

| Variant | Fill | Text | Border | Radius | Height | Bevel |
|---|---|---|---|---|---|---|
| Primary | `#1348dc` | `#ffffff` | none | 4px | 32px | `rgb(5,55,148) 0 -2px 0 0 inset` + `rgba(0,0,0,.4) 0 1px 3px` |
| Secondary | `rgba(177,177,177,0.05)` | `#e1e3e7` | 1px `rgba(135,140,155,0.20)` | 4px | 36px | `rgba(169,176,188,0.08) 0 -2px 0 0 inset` |
| Ghost / nav | transparent | `#e1e3e7` | none | 4px | 32px | — |
| Tab (bottom-capped) | transparent | `#a8adb7` | 1px `rgba(92,99,113,0.14)` | `0 0 4px 4px` | 27px | — |
| Panel link | `rgba(13,15,18,0.95)` | `#dbeafe` | none | 0 | 32px | — |

The `0 -2px 0 inset` bevel is the signature — it reads as a physical key face, matching the shortcut chips.

**Keyboard chip** — `rgba(35,35,30,0.20)` fill, **2px** radius, 20px tall, `ui-monospace` 11/11 in `#cbcfd4`.

**Embedded editor** — the hero's product shot is a full editor shell: traffic lights, a search field, a branch/commit sidebar, tabbed panes, line numbers in `#4e5a5f`, and live syntax colour from the theme above.

**Inputs** — beyond the editor's search field, not captured (no exposed marketing forms).

## 5. Layout Principles

A centred hero (italic serif headline, two-line sub, a button pair, a platform line) inside a container framed by fine tick rails, then a 3-across feature row separated by vertical rules, then the full-width editor shot. Radius scale: `2px` (chips) / `4px` (controls) / `6px` / `0 0 4px 4px` (capped tabs) / `32px` / `40px` / full pill.

## 6. Depth & Elevation

Radius scale: `2 / 4 / 6 / 32 / 40px`, `0 0 4px 4px`, and a full pill.

Shadow recipes — note that they are **bevels, not lifts**:

- `rgb(5, 55, 148) 0px -2px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 3px 0px` — primary button
- `rgba(169, 176, 188, 0.08) 0px -2px 0px 0px inset` — secondary button
- multi-layer `oklab(...)` ring stacks resolving mostly transparent (Tailwind-style ring slots)

Depth comes from the inset bevel plus the blue-black surface ladder, not from drop shadows.

## 7. Motion

Transition census resolved only generic values on the landing surface; specific durations and easings are **not captured**. The editor shot carries its own scripted playback rather than CSS animation.

## 8. Backgrounds, Effects & WebGL

The atmosphere is built from CSS patterns in the `oklab`/`oklch` colour space — unusual, and worth reproducing faithfully:

- **Tick rail** — `repeating-linear-gradient(oklab(0.497938 -0.00266258 -0.0213224 / 0.14) 0px, … 4px, transparent 4px, transparent 8px)` — the 4-on/4-off dashed rule framing the container
- **Horizontal glow** — `linear-gradient(to right, transparent 0%, oklab(0.545987 -0.0303796 -0.243091 / 0.08) 50%, transparent 100%)`
- **Vertical wash** — `linear-gradient(to top, oklab(0.378993 -0.0114082 -0.145541 / 0.03) 0%, transparent 50%, transparent 100%)`
- **Panel gradient** — `linear-gradient(oklch(0.167909 0.00724597 262.882) 0%, lab(8.11897 0.811279 -12.254) 100%)`
- A **dithering** token pair (`#0751cf` / `#0751cf80`) drives a dither-pattern motif

No WebGL and no `<canvas>`; SVG and the scripted editor carry the rest.

## 9. Do's and Don'ts

### Do
- Set the hero in IBM Plex Serif **italic at weight 320** in `#8ec5ff` — this is the brand.
- Keep the serif below 400 (320 hero, 360 sections) so headings stay light.
- Ground everything on blue-blacks (`#00040a`, `#111216`, `#0d0f12`), never neutral grey.
- Give buttons a `0 -2px 0 inset` bevel so they read as key faces.
- Show the keyboard shortcut for every action in a 2px mono chip.
- Frame the container with the 4-on/4-off `repeating-linear-gradient` tick rail.
- Keep `#1348dc` as the only action colour and let syntax highlighting carry all other chroma.

### Don't
- Don't set the serif bold or roman in the hero — it is italic at 320.
- Don't use neutral greys for surfaces.
- Don't add drop-shadow lifts; depth is the inset bevel.
- Don't put syntax colours (green, purple, cyan, red, sand) into chrome.
- Don't use uppercase eyebrows or bold weights anywhere.
- Don't give controls large or pill radii — they are 4px.

## 10. Responsive Behavior

Not captured — no media-query census was resolved from the accessible stylesheets.

## 11. Agent Prompt Guide

- Canvas `#00040a` · Body `#111216` · Panel `#0d0f12` · Text `#b2b9c6` · Headings `#ffffff` · Hero `#8ec5ff` · Muted `#4e5a5f` · Border `rgba(135,140,155,.20)` · Accent `#1348dc`
- Font: IBM Plex Serif italic 320/360 (display), `writer` sans (UI), `zedMono` (code) · Body: 14-16 · Radius: 4px control / 2px chip · Control height: 32-36px
- Focus: not captured · Bevel: `rgb(5,55,148) 0 -2px 0 0 inset` primary, `rgba(169,176,188,.08)` secondary · Motion: not captured

<zed_design_language>
A code editor brand that inverts the usual developer-tool formula: the canvas is a very deep blue-black (#00040a page, #111216 body, #0d0f12 panels — never neutral grey), but the hero headline is IBM Plex Serif set ITALIC at a variable weight of 320 in soft cornflower #8ec5ff, with section headings following at 360 roman. Nothing is bold and nothing is uppercase; the serif staying below 400 is the defining typographic choice. UI is a sans called writer at 14/400 with body copy in #b2b9c6, and code is zedMono 12/16. One action colour only, #1348dc, and all remaining chroma is delegated to the embedded editor's syntax theme (green #a1c181, purple #b477cf, cyan #6eb4bf, blue #73ade9, red #d07277, sand #dec184, comment #4e5a5f) — never chrome. Controls are small 4px rectangles at 32-36px that carry a signature 0 -2px 0 inset BEVEL so they read as physical key faces (primary rgb(5,55,148) inset plus rgba(0,0,0,.4) 0 1px 3px; secondary rgba(169,176,188,.08) inset on a rgba(177,177,177,.05) fill with a 1px rgba(135,140,155,.20) border), and every action displays its keyboard shortcut in a 2px-radius rgba(35,35,30,.20) mono chip at 11/11. Atmosphere is built from oklab/oklch CSS patterns: a 4-on/4-off repeating-linear-gradient tick rail framing the container, a horizontal glow, a vertical wash, and a dithering motif on #0751cf. Depth is bevel plus surface ladder, never drop shadow; there is no WebGL or canvas. Feels: literary, engineered, precise, quietly dark. Avoid: a bold or roman hero, neutral grey surfaces, drop-shadow lifts, syntax colours in chrome, uppercase eyebrows, and pill or large-radius controls.
</zed_design_language>