---
title: "Zed design system"
variant: extended
source: https://zed.dev/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/zed-dev)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Zed · Design System

> Quiet editorial framing for a collaborative code editor

**Theme:** light · **Industry:** devtools · **Source:** https://zed.dev/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Zed’s homepage pairs a restrained editorial header with a compact side-by-side product introduction. A large, detailed editor screenshot anchors the page, while muted surfaces and small red and blue accents distinguish the two products.

## North star

Keep the page quiet and editorial, letting a precisely framed product screenshot and restrained red-blue actions carry the visual emphasis.

## Overview

The page uses a warm, pale canvas and low-contrast gray surfaces to keep attention on product content rather than decoration. Ink-colored text carries nearly all of the hierarchy; muted gray supports explanatory copy, while red and blue are reserved for the two prominent download actions and their product marks. A restrained serif gives the brand heading and product names an editorial tone, contrasted with a compact custom sans for descriptions and controls. The screenshot shows a centered, framed page with a narrow masthead, a horizontal two-product introduction, and a large code-editor image directly below. Content sits in orderly bands with fine borders and little visible shadow, making the page feel structured but not heavy. The product image supplies most of the visual complexity, including interface details and syntax colors; these should read as screenshot content, not as additional site-wide brand colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#242529` | `--color-soft-ink` | neutral | Primary text for the masthead, product names, navigation, and interface copy. |
| Warm Mist | `#eee7e7` | `--color-warm-mist` | brand | Warm page canvas and pale surrounding areas visible around the central content. |
| Quiet Gray | `#dcdcdd` | `--color-quiet-gray` | surface | Subtle card surfaces and structural borders between content bands. |
| Paper White | `#f5f5f3` | `--color-paper-white` | surface | Main measured section background and pale surface behind page content. |
| Blue Edge | `#a0bef1` | `--color-blue-edge` | semantic | Thin border accent on the blue Download button. |
| Rose Edge | `#d17f73` | `--color-rose-edge` | semantic | Thin border accent on the red Download button. |
| Clean White | `#fafafa` | `--color-clean-white` | surface | Light cards and media surfaces, including pale areas within the editor presentation. |
| Hairline Gray | `#d4d4d4` | `--color-hairline-gray` | neutral | Fine dividers and borders around cards and media. |
| Muted Graphite | `#525252` | `--color-muted-graphite` | neutral | Secondary explanatory text and subdued supporting copy. |
| Slate Copy | `#58585a` | `--color-slate-copy` | neutral | Muted text and secondary labels across product and control content. |
| Signal Blue | `#1348dc` | `--color-signal-blue` | accent | Blue Zed Download action; also used for select links and product branding. |
| Signal Vermilion | `#bf3c27` | `--color-signal-vermilion` | accent | Red Delta Download action and matching product mark. |
| Link Blue | `#3882b7` | `--color-link-blue` | accent | Blue-toned link or highlighted text; secondary to the main button accents. |
| Warm Coral | `#d3604f` | `--color-warm-coral` | accent | Supporting red text accent; not a dominant page surface color. |
| Button Border | `#c7c4c4` | `--color-button-border` | neutral | Border around neutral Learn More buttons. |
| Periwinkle Code | `#5b79e3` | `--color-periwinkle-code` | semantic | Small highlight within text or interface details, not a defining brand surface. |

### Semantic aliases

`--color-canvas` → `#eee7e7` (Warm Mist) · `--color-surface` → `#f5f5f3` (Paper White) · `--color-surface-2` → `#dcdcdd` (Quiet Gray) · `--color-surface-3` → `#fafafa` (Clean White) · `--color-text` → `#242529` (Soft Ink) · `--color-text-muted` → `#525252` (Muted Graphite) · `--color-text-subtle` → `#58585a` (Slate Copy) · `--color-border` → `#dcdcdd` (Quiet Gray) · `--color-accent` → `#1348dc` (Signal Blue) · `--color-accent-2` → `#bf3c27` (Signal Vermilion) · `--color-accent-3` → `#3882b7` (Link Blue) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#242529` | `#eee7e7` | 12.55:1 | AAA |
| `#242529` | `#f5f5f3` | 14.03:1 | AAA |
| `#242529` | `#dcdcdd` | 11.17:1 | AAA |
| `#242529` | `#fafafa` | 14.67:1 | AAA |
| `#525252` | `#eee7e7` | 6.41:1 | AA |
| `#525252` | `#f5f5f3` | 7.16:1 | AAA |
| `#525252` | `#dcdcdd` | 5.7:1 | AA |
| `#525252` | `#fafafa` | 7.49:1 | AAA |
| `#58585a` | `#eee7e7` | 5.82:1 | AA |
| `#58585a` | `#f5f5f3` | 6.5:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| writer | `--font-body` | webfont | 400 | Main sans-serif for body copy, navigation, captions, and buttons. | Inter |
| ui-monospace | `--font-mono` | system | 400 | Code and editor-like text. | Roboto Mono |
| plexSerif | `--font-display` | webfont | 400, 390, 410 | Editorial display face for the main heading and section headings. | IBM Plex Serif |

- **writer:** Regular-weight, compact and unembellished; sentence case, with no measured tracking.
- **ui-monospace:** System monospace at regular weight; preserve code-like spacing and casing.
- **plexSerif:** Light-to-regular measured weights; sentence case and neutral tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.401, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 25.5px | 390 | 1.25 | 0 | — | plexSerif | Main brand or page heading in the masthead. |
| h2 | 18.5px | 410 | 1.2 | 0 | — | plexSerif | Product names and secondary section headings. |
| body | 13px | 400 | 1.5 | 0 | — | writer | Product descriptions and supporting editorial copy. |
| caption | 11px | 400 | 1.63 | 0 | — | writer | Small dates, labels, and image or card annotations. |
| button | 13px | 400 | 1.5 | 0 | — | writer | Download and Learn More control labels. |
| nav | 11px | 400 | 1.82 | 0 | — | writer | Compact navigation and interface labels. |
| code | 11px | 400 | 1.82 | 0 | — | ui-monospace | Editor screenshot code and technical snippets. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 8, 16, 20 px.
- Section rhythm — · element gap 6px · card padding — · max content width 1022px.

A centered page column sits within a broad, pale canvas; measured page max width is 1022px. The masthead forms a shallow full-width band, followed by two product introductions arranged side by side. Each product pairs a square mark with its name, short description, date, and actions. A wide editor screenshot begins immediately beneath this row and dominates the first view. Alignment is crisp and mostly left-led, with compact gaps and fine dividing lines. Keep the overall density comfortable and the section rhythm restrained rather than adding generous, unmeasured whitespace.

## Shape & elevation

- Radius: button `4px` · card `4px` · media `50%` · xs `2px` · sm `4px` · pill `9999px`
- Shadow `hairline` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(235, 235, 236) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 1px 4px 0px inset`
- Shadow `inset-2` (button): `rgb(209, 209, 209) 0px -2px 0px 0px inset, rgb(242, 242, 242) 0px 1px 3px 0px`
- Shadow `inset-3` (button): `rgb(127, 39, 26) 0px -2px 0px 0px inset, rgb(251, 236, 234) 0px 1px 3px 0px`
- Shadow `inset-4` (button): `rgb(5, 55, 148) 0px -2px 0px 0px inset, rgb(230, 239, 254) 0px 1px 3px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.810546 -0.0013966 -0.0111843 / 0.6) 0px 0px 0px 1px, oklab(0.578998 -0.00309601 -0.0247935`

The page is mostly flat, using fine gray borders and pale banding to define structure. Media receives a subtle hairline edge, while controls use restrained inset shading rather than floating card shadows. Keep layering minimal: product artwork and the large editor screenshot provide depth through content, not through heavy elevation.

## Imagery

The primary visual is a large, straight-on screenshot of Zed’s code editor, framed as a wide rectangular media panel beneath the product row. It shows realistic code, collaboration, and editor chrome rather than decorative illustration. Two square product marks sit beside their introductions: a warm red geometric Delta mark and a blue Zed mark. Preserve these as product artwork; do not promote their internal colors or screenshot syntax accents into broad page backgrounds.

## Components

### Masthead

Compact editorial heading with a serif brand title and a short, italic-looking supporting line.

### Product introduction

Two side-by-side product bands pair square artwork with a serif name, muted description, date, and two actions.

### Download action

Compact 13px writer button with a 4px radius, white label, thin contrasting border, and subtle inset shadow; red for Delta and blue for Zed.

### Learn More action

Pale neutral button with dark text, a fine gray border, a 4px radius, and restrained inset shading.

### Editor media

Wide, light editor screenshot with a fine boundary; it is the dominant visual and contains its own interface colors.

### Measured component styles

- **Primary button** (“Download”): background #bf3c27 · text #ffffff · border 1px solid #d17f73 · radius 4px · padding 6px 4px · 400 13px writer · shadow rgb(127, 39, 26) 0px -2px 0px 0px inset, rgb(251, 236, 234) 0px 1px 3px 0px
- **Secondary button** (“Download”): background #1348dc · text #ffffff · border 1px solid #a0bef1 · radius 4px · padding 6px 4px · 400 13px writer · shadow rgb(5, 55, 148) 0px -2px 0px 0px inset, rgb(230, 239, 254) 0px 1px 3px 0px
- **Card** (“Cache SumTree node summaries Share Curso”): background #fafafa · text #242529 · radius 0px · padding 0px · 400 16px writer
- **Navigation item** (“sum_tree.rs crates/sum_tree/src/”): transparent background · text #242529 · radius 0px · padding 4px 0px · 400 11px writer

## Do

- Use Warm Mist and Paper White for quiet page surfaces.
- Keep primary text in Soft Ink.
- Reserve Signal Blue and Signal Vermilion for product-specific emphasis.
- Use serif typography for editorial headings.
- Frame product media with subtle borders.
- Keep content centered and aligned in clear horizontal bands.

## Don't

- Don’t turn screenshot syntax colors into page-wide accents.
- Don’t use heavy shadows or dramatic gradients.
- Don’t replace the muted canvas with stark high-contrast blocks.
- Don’t use oversized, dense display typography.
- Don’t scatter red and blue accents indiscriminately.
- Don’t invent extra spacing or rounded-card treatments.

## Agent prompt

Build a new page in Zed’s restrained developer-tool style. Use Warm Mist (#eee7e7) and Paper White (#f5f5f3) for a pale, quiet canvas, with Soft Ink (#242529) for primary text and muted gray for supporting copy. Set editorial headings in a light serif similar to IBM Plex Serif; use a compact sans for descriptions and controls, and monospace only for code. Center the content in a measured-width column, using thin borders and clear horizontal bands instead of card-heavy decoration. Give the page one dominant, realistic product screenshot framed with a subtle hairline. Use Signal Blue (#1348dc) or Signal Vermilion (#bf3c27) sparingly for a primary action, with white button text and restrained inset depth. Keep hierarchy crisp, compact, and product-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-showcase | Centered masthead above a two-product horizontal introduction and a wide editor screenshot. | paired product choices, primary download actions, supporting learn-more actions | serif masthead, red and blue product marks, fine borders, large editor media |

## Source CSS custom properties (selected)

```css
--motif-accent-1: #1e69f6;
--motif-accent-2: #93ccdc;
--c15t-primary: hsl(228, 100%, 60%);
--c15t-primary-hover: hsl(228, 100%, 55%);
--c15t-surface: hsl(0, 0%, 100%);
--c15t-surface-hover: hsl(0, 0%, 98%);
--c15t-border: hsl(0, 0%, 90%);
--c15t-border-hover: hsl(0, 0%, 85%);
--c15t-text: hsl(0, 0%, 10%);
--c15t-text-muted: hsl(0, 0%, 40%);
--c15t-text-on-primary: hsl(0, 0%, 100%);
--c15t-font-family: system-ui, -apple-system, sans-serif;
--c15t-font-size-sm: 0.875rem;
--c15t-font-size-base: 1rem;
--c15t-font-size-lg: 1.125rem;
--c15t-font-weight-normal: 400;
--c15t-font-weight-medium: 500;
--c15t-font-weight-semibold: 600;
--c15t-space-xs: 0.25rem;
--c15t-space-sm: 0.5rem;
--c15t-space-md: 1rem;
--c15t-space-lg: 1.5rem;
--c15t-space-xl: 2rem;
--c15t-radius-sm: 0.25rem;
--c15t-radius-md: 0.5rem;
--c15t-radius-lg: 0.75rem;
--c15t-radius-full: 9999px;
--c15t-shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);
--c15t-shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.08);
--c15t-shadow-lg: 0 8px 24px hsla(0, 0%, 0%, 0.12);
--c15t-duration-fast: 80ms;
--c15t-duration-normal: 150ms;
--c15t-duration-slow: 200ms;
--background: #dcdcddff;
--surface-background: #ebebecff;
--elevated_surface-background: #ebebecff;
--panel-background: #ebebecff;
--panel-focused_border: #7d82e8ff;
--panel-overlay_background: #ebebecff;
--pane-focused_border: #7d82e8ff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/zed-dev