---
version: alpha
name: Zed
description: A code editor that dresses like a literary journal — soft paper-gray canvas, an IBM Plex Serif headline set in electric Zed blue, slate body sans, and 2px corners everywhere, so the marketing site reads as quiet, fast, and craftsman-made rather than another neon dev-tool splash.

colors:
  # Surface / canvas
  background: "#f4f4f2"        # warm paper off-white, the dominant canvas
  surface: "#ffffff"           # raised cards, code-panel chrome on light
  surface-muted: "#e5e7eb"     # section bands, hairline fills, default border tint
  surface-dark: "#1b1d22"      # the embedded code-editor panel chrome

  # Ink / text
  ink: "#393d45"               # primary body text, slate not black
  ink-strong: "#1f2228"        # near-black for the densest UI labels
  ink-secondary: "#4e5a5f"     # supporting copy, captions
  ink-muted: "#a9afbc"         # metadata, low-emphasis helper text
  on-dark: "#dce0e5"           # text on the dark code panel
  on-accent: "#ffffff"         # text on the blue button

  # Brand accent — electric Zed blue
  primary: "#004edb"           # serif headlines, primary CTA, links — the signature
  primary-hover: "#0751cf"     # button + link hover
  primary-strong: "#1e69f6"    # brighter motif accent, focus tint
  primary-soft: "#7ec6ff"      # light blue link / on-dark accent
  primary-container: "#e6effe" # tinted blue chip / pill fill

  # Editor syntax accents (the dark code panel)
  syntax-blue: "#74ade8"       # keywords, function calls
  syntax-purple: "#b477cf"     # types, constants
  syntax-green: "#a1c181"      # strings
  syntax-red: "#d07277"        # errors, deletions

  # Borders
  border: "#dadde2"            # hairline dividers, card edges
  border-strong: "#cbcfd4"     # input outlines, stronger separators

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.1) — Google format requires hex
  shadow-ambient: "#6f7b90"    # was rgba(111,123,144,0.1) — Google format requires hex

typography:
  display-hero:
    fontFamily: "IBM Plex Serif, Georgia, Cambria, Times New Roman, serif"
    fontSize: 48px
    fontWeight: 340
    lineHeight: 1.2
    letterSpacing: -0.96px
  display:
    fontFamily: "IBM Plex Serif, Georgia, Cambria, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.4px
  heading:
    fontFamily: "IBM Plex Serif, Georgia, Cambria, serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  heading-sub:
    fontFamily: "IBM Plex Serif, Georgia, Cambria, serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  body-large:
    fontFamily: "IBM Plex Sans, -apple-system, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.4px
  body:
    fontFamily: "IBM Plex Sans, -apple-system, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.4px
  body-small:
    fontFamily: "IBM Plex Sans, -apple-system, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: -0.35px
  label:
    fontFamily: "IBM Plex Sans, -apple-system, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: -0.35px
  caption:
    fontFamily: "IBM Plex Sans, -apple-system, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  code-mono:
    fontFamily: "IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  code-block:
    fontFamily: "IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-accent}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: 8px 14px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-accent}"

  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: 8px 14px
  button-ghost-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-strong}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-feature:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  code-panel:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.code-block}"
    rounded: "{rounded.lg}"
    padding: 16px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 12px 14px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.primary-hover}"

  code-ref:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.code-mono}"
    rounded: "{rounded.xs}"
    padding: 2px 6px

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-hover}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 2px 8px
---

# Zed Design System

## Overview

Zed is a high-performance code editor, but its marketing site refuses to look like one. Where the category reaches for neon-on-black and terminal swagger, Zed sets its hero headline — "Your last next editor" — in **IBM Plex Serif** (`{typography.display-hero}`) at a feather-light weight (340), colored an electric blue (`{colors.primary}`). A serif display face, in blue, on a warm paper-gray canvas (`{colors.background}`): that single decision tells you the whole product thesis. This is a tool made by people who care about reading and writing, not just shipping. The site reads like a literary quarterly that happens to be about software.

The canvas is the second tell. It is not pure white — it is a soft, slightly warm off-white (`{colors.background}`) that sits closer to paper than to screen. Body copy runs in IBM Plex Sans (`{typography.body}`) at a calm slate (`{colors.ink}`), never true black, with a touch of negative tracking (-0.4px) that keeps lines tight and bookish. The result is low-glare and quiet. Nothing shouts; the typography does the persuading. When Zed needs to show the actual product, it drops in a dark code-editor panel (`{colors.surface-dark}`) with full syntax highlighting — purple types, green strings, blue keywords — and that dark rectangle becomes the most saturated, most physical object on an otherwise pale page.

Then there is the geometry. Zed rounds almost nothing: the dominant radius is **2px** (`{rounded.xs}`), with 4px (`{rounded.sm}`) on buttons and 8px (`{rounded.lg}`) reserved for the larger code panels and cards. That near-square corner reinforces the editor metaphor — pixels, gutters, monospace grids — and keeps the whole surface feeling precise and engineered. Blue is the only accent. It carries the serif headlines, the primary "Download Now" button, the links, and the focus tint, and it never shares the stage with a second hue outside the code panel's syntax theme. Restraint, a serif in blue, and paper instead of white: that's Zed.

**Key Characteristics:**
- Warm paper-gray canvas (`{colors.background}`), never pure white — low-glare, bookish
- Hero headline in **IBM Plex Serif** (`{typography.display-hero}`) at light weight 340, colored electric blue (`{colors.primary}`) — the signature move
- Body and UI in **IBM Plex Sans** (`{typography.body}`) with negative -0.4px tracking, set in slate (`{colors.ink}`) not black
- Electric Zed blue (`{colors.primary}`) is the single accent: headlines, primary CTA, links, focus
- Near-square geometry — `{rounded.xs}` (2px) dominant, `{rounded.sm}` (4px) on buttons, `{rounded.lg}` (8px) on panels
- Embedded dark code panel (`{colors.surface-dark}`) with full syntax highlighting is the page's visual centerpiece
- Monospace (`{typography.code-mono}`) used for code refs and the live editor demos
- Primary CTA is a compact filled-blue button; secondary is a white ghost with a hairline
- Almost flat — separation comes from hairline borders (`{colors.border}`), shadows reserved for floating panels
- Three-column feature rows (Fast · Agents · Collaboration) under the hero, quiet and evenly weighted

## Colors

### Surface & Canvas
- **Paper White** (`{colors.background}`): The dominant canvas — a warm, slightly gray off-white that reads as paper, not screen.
- **Pure White** (`{colors.surface}`): Raised cards and the light code-panel chrome — a half-step brighter than the canvas.
- **Mist** (`{colors.surface-muted}`): Section bands, code-ref chip fills, and the default border tint.
- **Editor Ink** (`{colors.surface-dark}`): The dark embedded code-editor panel — the most saturated surface on the page.

### Ink / Text
- **Slate** (`{colors.ink}`): Primary body text. Deliberately not black — softer, more readable on the paper canvas.
- **Near-Black** (`{colors.ink-strong}`): The densest UI labels and ghost-button text.
- **Steel** (`{colors.ink-secondary}`): Supporting copy and captions.
- **Fog** (`{colors.ink-muted}`): Metadata and low-emphasis helper text.
- **Panel Text** (`{colors.on-dark}`): Foreground text inside the dark code panel.

### Brand Accent
- **Zed Blue** (`{colors.primary}`): The singular brand color. Serif headlines, the primary CTA, links, and the focus tint. Used everywhere a moment of emphasis is needed — and nowhere else.
- **Blue Hover / Strong** (`{colors.primary-hover}`, `{colors.primary-strong}`): Pressed and brighter motif states.
- **Light Blue** (`{colors.primary-soft}`) / **Blue Container** (`{colors.primary-container}`): On-dark accent and tinted blue chip fills.

### Syntax & Borders
- **Syntax Accents** (`{colors.syntax-blue}`, `{colors.syntax-purple}`, `{colors.syntax-green}`, `{colors.syntax-red}`): The editor theme colors that appear only inside the dark code panel.
- **Hairline / Strong** (`{colors.border}`, `{colors.border-strong}`): Card edges, dividers, and input outlines — the primary structural device.
- **Shadow Tints** (`{colors.shadow-soft}`, `{colors.shadow-ambient}`): Opaque stand-ins for the soft floating-panel shadows (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display**: `IBM Plex Serif` (the site ships a custom "plexSerif"), with fallbacks `Georgia, Cambria, Times New Roman, serif`. Carries every headline, used at light weights (340–400) for an editorial, literary feel.
- **Body / UI**: `IBM Plex Sans` (shipped as "writer"), with fallbacks `-apple-system, ui-sans-serif, system-ui, sans-serif`. All paragraph and interface text, with -0.4px tracking.
- **Monospace**: `IBM Plex Mono` (shipped as "zedMono"), with fallbacks `ui-monospace, SFMono-Regular, Menlo, Monaco, monospace`. Code refs and the live editor demos.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 48px / 340 / serif / blue — the marquee headline |
| `display` | 32px / 400 / serif — section titles |
| `heading` | 26px / 400 / serif — feature headings |
| `heading-sub` | 17px / 400 / serif — sub-section headings |
| `body-large` | 18px / 400 / sans — lead paragraphs |
| `body` | 16px / 400 / sans — standard body and links |
| `body-small` | 14px / 400 / sans — dense supporting copy |
| `label` | 14px / 500 / sans — button text, UI labels |
| `caption` | 12px / 400 / sans — metadata, badges |
| `code-mono` | 12px / 400 / mono — inline code refs |
| `code-block` | 14px / 400 / mono — the embedded editor demos |

### Principles
- **Serif for voice, sans for use**: headlines are serif (and blue); everything functional is the Plex sans. The contrast is the brand.
- **Light weights on display**: 340–400 on serif headlines — confident lightness, never bold.
- **Tighten the sans**: -0.4px tracking across body and UI keeps lines compact and editor-precise.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step. The page breathes — generous vertical gaps (`{spacing.5xl}` = 96px) between major marketing sections, tighter rhythm inside feature cards.

### Grid & Container
- Max content width: ~1100px, centered
- Hero: centered single column — eyebrow, serif headline, sans subhead, CTA pair
- Below the hero: a three-column feature row (Fast · Agents · Collaboration) of equal weight
- Code demos span full width and reflow as the page narrows

### Whitespace Philosophy
- **Paper, not screen**: the warm off-white canvas and generous margins set a calm, low-glare reading tone
- **Even weighting**: feature columns are deliberately equal — no single tile dominates outside the hero and code panel
- **The product is the contrast**: the dark code panel provides the one high-saturation focal point

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Section bands, most page content |
| Inset (Level 1) | `0 -2px 0 0 inset` at ~10% `{colors.shadow-ambient}` | Tab underlines, subtle pressed states |
| Subtle (Level 2) | `0 1px 3px` + `0 1px 2px -1px` at ~10% `{colors.shadow-soft}` | Resting cards, small surfaces |
| Floating (Level 3) | `0 10px 15px -3px` + `0 4px 6px -4px` at ~10% `{colors.shadow-soft}` | Dropdowns, the floating code panel |

**Shadow Philosophy**: Zed is almost entirely flat. Structure comes from hairline borders and the canvas/surface contrast, not from drop shadows. The few shadows that exist are soft and cool-tinted (`{colors.shadow-ambient}`), reserved for genuinely floating elements like dropdowns and the elevated code panel. The dominant depth cue is actually an inset 2px underline used on tabs and active nav items — a flat, engineered kind of depth that suits the editor metaphor.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `xs` | 2px | The dominant radius — chips, tags, small UI, badges |
| `sm` | 4px | Buttons, links, inputs |
| `md` | 6px | Mid containers |
| `lg` | 8px | Cards, the code panels |
| `pill` | 9999px | Avatars, circular toggles only |

Zed rounds almost nothing. The 2px default keeps corners nearly square — a deliberate echo of pixel grids and monospace gutters. Buttons get 4px, panels 8px, and that is the ceiling. There are no pill-shaped CTAs; the geometry stays tight and engineered.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Filled Zed blue (`{colors.primary}`), white text, compact 4px radius. The "Download Now" CTA. Hover deepens to `{colors.primary-hover}`.
- **`button-ghost`** — White fill, near-black text, hairline border, 4px radius. The "Clone repo" secondary. Hover fills `{colors.surface-muted}`.

### Cards
- **`card`** / **`card-feature`** — White or paper surface, hairline border, 8px radius. The even-weighted feature tiles below the hero.

### Code Panel
- **`code-panel`** — The dark embedded editor (`{colors.surface-dark}`), 8px radius, full syntax highlighting in `{typography.code-block}`. The page's visual centerpiece and proof-of-product.

### Inputs
- **`input`** — White fill, hairline outline, 4px radius. **`input-focus`** brightens the border with the blue tint — crisp, no heavy glow.

### Navigation
- **`nav-bar`** — Paper canvas, slate links, an inset 2px underline marking the active item. Sits flush at the top, no shadow.

### Accent & Code
- **`link`** — Zed blue text; hover deepens to `{colors.primary-hover}`.
- **`code-ref`** — Inline mono chip: mist fill, near-black mono text, 2px radius.
- **`badge`** — Blue-container fill, blue text, 2px radius — the "Introducing / new" pill.

## Do's and Don'ts

### Do
- Keep the canvas a warm paper off-white (`{colors.background}`) — never pure white, never dark for marketing
- Set headlines in **IBM Plex Serif** (`{typography.display-hero}`) at light weight, colored Zed blue (`{colors.primary}`) — this is the signature
- Run all body and UI in IBM Plex Sans with -0.4px tracking, in slate (`{colors.ink}`) not black
- Reserve blue (`{colors.primary}`) as the only accent: headlines, primary CTA, links, focus
- Keep corners near-square — `{rounded.xs}` (2px) default, `{rounded.sm}` (4px) on buttons, `{rounded.lg}` (8px) max on panels
- Let the dark code panel (`{colors.surface-dark}`) carry the one high-saturation moment, with full syntax highlighting
- Separate with hairline borders (`{colors.border}`) before reaching for shadows
- Weight feature columns evenly — quiet, no single tile dominating

### Don't
- Don't reach for neon-on-black dev-tool clichés — Zed's marketing is light, paper, and calm
- Don't set headlines in a sans — the serif (and its blueness) is the brand
- Don't introduce a second accent color outside the code panel's syntax theme
- Don't round buttons into pills — the system tops out at 8px on panels
- Don't use pure black for text — body is slate (`{colors.ink}`)
- Don't scatter heavy shadows — flatness plus hairlines is the default; reserve elevation for floating panels
- Don't bold the display type — light serif weights (340–400) only

---

## Responsive Behavior

### Breakpoints
*(Standard stops the site behaves to; the editor and feature grid drive the reflow.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero serif scales 48px → ~32px; nav collapses to a menu; feature columns stack; code panel goes full-width and scrolls horizontally |
| Tablet | 640–1023px | Two-up feature cards; hero remains centered single column |
| Desktop | 1024–1279px | Full three-column feature row; centered hero |
| Large | ≥1280px | Max ~1100px container, centered; generous `{spacing.5xl}` section padding |

### Touch Targets
- Buttons run ~36px tall with `8px 14px` padding — compact but tappable
- Nav items carry generous horizontal padding; the inset underline marks the active route

### Collapsing Strategy
- **Navigation**: horizontal nav → menu toggle on mobile; the blue Download CTA persists
- **Hero**: stays a centered single column; serif headline scales down proportionally
- **Features**: three columns → two-up → stacked
- **Code panel**: full-width with horizontal scroll on small screens, preserving monospace alignment

### Image Behavior
- The "images" are live code-editor panels and dithered motif backgrounds that reflow as grid children rather than fixed art

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper White (`{colors.background}`)
- Text: Slate (`{colors.ink}`)
- Brand accent: Zed Blue (`{colors.primary}`)
- Secondary text: Steel (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Zed Blue (`{colors.primary}`)

### Example Component Prompts

- "Create a centered hero on warm paper-gray (`{colors.background}`) with a 48px IBM Plex Serif headline at weight 340 colored Zed blue (`{colors.primary}`), letter-spacing -0.96px, a slate (`{colors.ink}`) IBM Plex Sans subhead below, and a filled-blue primary button (`{colors.primary}`, white text, `{rounded.sm}` radius) beside a white ghost button"
- "Build a feature card: white (`{colors.surface}`) surface, 1px hairline (`{colors.border}`), `{rounded.lg}` radius, a serif `{typography.heading-sub}` title and `{typography.body-small}` slate copy — one of three equal columns"
- "Render the embedded code panel: dark (`{colors.surface-dark}`) fill, `{rounded.lg}` radius, IBM Plex Mono at `{typography.code-block}`, syntax colors `{colors.syntax-blue}` keywords / `{colors.syntax-purple}` types / `{colors.syntax-green}` strings on `{colors.on-dark}` text"
- "Create a primary button: Zed blue (`{colors.primary}`) fill, white text, `{rounded.sm}` (4px) radius, `8px 14px` padding, hover deepens to `{colors.primary-hover}` — the 'Download Now' CTA"
- "Render an inline code chip: mist (`{colors.surface-muted}`) fill, near-black (`{colors.ink-strong}`) IBM Plex Mono text, `{rounded.xs}` (2px) radius, 2px 6px padding"

### Iteration Guide

1. Start on warm paper-gray (`{colors.background}`). If you reached for pure white or a dark theme, stop — Zed's canvas is paper.
2. Headlines must be IBM Plex Serif, light weight, and Zed blue (`{colors.primary}`). A sans or black headline is wrong.
3. Blue is the only accent. If a second hue appears outside the code panel's syntax theme, remove it.
4. Body text is slate (`{colors.ink}`) with -0.4px tracking, never pure black.
5. Keep corners near-square — verify `{rounded.xs}` (2px) default and a 4px button before moving on. No pills.
6. Let the dark code panel be the single saturated focal point; everything else stays pale and flat.
7. Separate with hairline borders (`{colors.border}`) first; reserve soft cool-tinted shadows for genuinely floating elements.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Zed. Brand names and trademarks belong to their respective owners.