A code editor brand that inverts the usual developer-tool formula: a very deep blue-black canvas carrying a hero set in IBM Plex Serif — italic, at a variable weight of 320 — in soft cornflower, with nothing bold or uppercase anywhere; controls are small 4px rectangles with a signature inset bevel so they read as physical key faces beside their monospace shortcut chips, atmosphere comes from oklab tick rails and washes rather than shadow, and one blue carries every action while all remaining chroma is delegated to the embedded editor syntax theme.
Browse Zed 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: 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.
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.
| 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 |
| 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 |
| 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 |
| 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 |
#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.
plexSerif, "plexSerif Fallback" (IBM Plex Serif) — used italic at sub-400 variable weightswriter, ui-sans-serif — the UI sanszedMono 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.
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.