Design tokens (YAML front matter)

version: alpha
name: Zed-Inspired-design-analysis
description: An inspired interpretation of Zed's design language — a code-editor brand with a quiet gray paper canvas, an IBM Plex Serif voice for headings, a typewriter-like sans for body, real code set in monospace, small 4px controls with tactile inset bottom shadows, and a single brick-red download button.

colors:
  primary: "#bf3c27"
  primary-border: "#be3b27"
  on-primary: "#ffffff"
  canvas: "#eee7e7"
  canvas-gray: "#dcdcdd"
  surface: "#fafafa"
  surface-soft: "#ebebec"
  ink: "#242529"
  body: "#58585a"
  mute: "#7e8086"
  hairline: "#dfdfe0"
  syntax-blue: "#3882b7"
  syntax-indigo: "#5b79e3"
  syntax-red: "#d3604f"
  syntax-purple: "#a449ab"
  syntax-green: "#649f57"
  tint-green: "#cde4d6"
  tint-rose: "#e6d1d5"

typography:
  display:
    fontFamily: '"IBM Plex Serif", plexSerif, Georgia, serif'
    fontSize: 48px
    fontWeight: 340
    lineHeight: 57.6px
    letterSpacing: -0.96px
  heading:
    fontFamily: '"IBM Plex Serif", plexSerif, Georgia, serif'
    fontSize: 25.6px
    fontWeight: 390
    lineHeight: 32px
    letterSpacing: 0px
  heading-sm:
    fontFamily: '"IBM Plex Serif", plexSerif, Georgia, serif'
    fontSize: 18.4px
    fontWeight: 410
    lineHeight: 22px
    letterSpacing: 0px
  body:
    fontFamily: writer, "iA Writer Quattro", "IBM Plex Sans", system-ui, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0px
  small:
    fontFamily: writer, "iA Writer Quattro", system-ui, sans-serif
    fontSize: 13px
    fontWeight: 400
    lineHeight: 19.5px
    letterSpacing: 0px
  code:
    fontFamily: '"Zed Mono", zedMono, ui-monospace, SFMono-Regular, Menlo, monospace'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0px

rounded:
  xs: 2px
  sm: 4px
  lg: 16px
  full: 9999px

spacing:
  xxs: 4px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 48px

components:
  button-download:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary-border}"
    typography: "{typography.small}"
    rounded: "{rounded.sm}"
    padding: "6px 10px"
    shadow: "inset 0 -2px 0 #7f271a, 0 1px 3px #fbecea"
  button-neutral:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    rounded: "{rounded.sm}"
    shadow: "inset 0 -2px 0 #d1d1d1, 0 1px 3px #f2f2f2"

Design System Inspiration of Zed

Overview

Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter, and its site feels like a well-printed technical manual. Surfaces are soft grays and a faintly warm paper tone ({colors.canvas} #eee7e7, {colors.canvas-gray} #dcdcdd, {colors.surface} #fafafa), headings are set in a light IBM Plex Serif (“Your last next editor”), and body copy uses a typewriter-flavored sans. Real code — Rust from Zed’s own source — appears in monospace with a syntax palette of muted blue, indigo, red, purple and green.

Controls are small and physical. Buttons are 4px-radius rectangles with an inset bottom shadow, like a key on a keyboard. The only saturated color on the chrome is the brick-red Download button ({colors.primary} #bf3c27).

Key Characteristics:

Gray paper surfaces with low contrast between bands.
Light-weight serif headings (weights 340–410), sentence case.
Typewriter-style sans for body, small sizes (13–14px).
Monospace code samples with a muted syntax palette that doubles as the accent set.
Tactile buttons: 4px radius, 1px border, inset 0 -2px 0 shadow.
One red CTA: Download.

Colors

Surface

Canvas ({colors.canvas} — #eee7e7): The warm-gray page ground.
Canvas Gray ({colors.canvas-gray} — #dcdcdd): Large bands and editor-window frames.
Surface ({colors.surface} — #fafafa): Cards, code panels and neutral buttons.
Surface Soft ({colors.surface-soft} — #ebebec): Inset areas and hover fills.
Tints ({colors.tint-green} #cde4d6, {colors.tint-rose} #e6d1d5): Pale panels behind feature illustrations and diff highlights.

Text

Ink ({colors.ink} — #242529): Headings, body and code.
Body ({colors.body} — #58585a): Secondary paragraphs.
Mute ({colors.mute} — #7e8086): Captions and metadata.

Brand & Syntax

Brick Red ({colors.primary} — #bf3c27): Download button and the rare emphasis.
Syntax (#3882b7 blue, #5b79e3 indigo, #d3604f red, #a449ab purple, #649f57 green): Code highlighting, inline links and small icons. Treat these as the brand’s accent set — they come from the editor’s own theme.

Lines

Hairline ({colors.hairline} — #dfdfe0): Card and window borders.

Typography

Font Family

IBM Plex Serif (light weights) for display and headings.
A typewriter-like sans (served as writer, close to iA Writer Quattro) for body and UI. Substitute: iA Writer Quattro or IBM Plex Sans.
Zed Mono (Zed’s own monospace, based on Iosevka) for code. Substitute: Iosevka or JetBrains Mono.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display}`	48px	340	57.6px	-0.96px	Hero headline.
`{typography.heading}`	25.6px	390	32px	0	Section and page titles.
`{typography.heading-sm}`	18.4px	410	22px	0	Card titles (Delta, GPUI, Tree-sitter).
`{typography.code}`	16px	400	24px	0	Code samples.
`{typography.body}`	14px	400	20px	0	Body copy.
`{typography.small}`	13px	400	19.5px	0	Buttons, nav, captions.

Principles

Serif headings stay light (under 450). Never bold the serif.
Body is small; the page relies on spacing, not size, for readability.
Code is shown as real code, highlighted, never as a screenshot of text.

Layout

Centered content column up to 1024px.
Editor-window mockups (gray frame, tab strip, code pane) are the hero visuals.
Feature cards in a 2- or 3-column grid with pale tinted panels.
Spacing on a 4px base; controls are compact (6–10px padding).

Elevation & Depth

Level	Treatment	Use
0	Flat surface	Bands.
1	`0 0 0 1px #ebebec` ring	Cards and panels (most common).
Inset	`inset 0 1px 4px rgba(0,0,0,0.03)`	Code wells and inputs.
Key	`inset 0 -2px 0 <darker>, 0 1px 3px <lighter>`	Buttons — the bottom edge is a darker shade of the fill.

Shapes

{rounded.sm} 4px — buttons, cards, inputs (most common).
{rounded.xs} 2px — tags, small chips.
{rounded.lg} 16px top corners — editor-window frames.
{rounded.full} — avatars.

Components

Buttons

button-download — {colors.primary} fill, white label in {typography.small}, 1px darker border, 4px radius, padding 6px 10px, inset bottom shadow #7f271a.

button-neutral — {colors.surface} fill, ink label, hairline border, inset bottom shadow #d1d1d1. A blue variant uses #053794 for the inset edge.

Editor Mockup

A gray window with a 16px-radius top, a tab strip, a file tree and a code pane with the syntax palette. Collaborator cursors appear in syntax colors.

Cards

Small serif title, short body, link with arrow; pale tint background or plain surface with a 1px ring.

Do’s and Don’ts

Do

Keep surfaces gray and paper-like with low contrast.
Use light serif headings and small body text.
Show real, highlighted code.
Give buttons a tactile inset bottom edge.
Keep red for Download only.

Don’t

Don’t use bold serif headings or large body text.
Don’t add bright gradients or glossy shadows.
Don’t use large radii on buttons.
Don’t use the red for anything but the primary download action.

Responsive Behavior

Editor mockups scale down and crop the file tree on mobile.
Card grids collapse to one column.
The display headline drops to about 32px.

Known Gaps

Measured at 1440px; on the measurement run zed.dev served its company page, so hero values come from an earlier measurement of the main page.
Font names are the site’s internal names; substitutes are approximate.

Zed

Palette

At a glance

Design System · Zed

Design System Inspiration of Zed

Overview