--- 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 1. **IBM Plex Serif** (light weights) for display and headings. 2. **A typewriter-like sans** (served as `writer`, close to *iA Writer Quattro*) for body and UI. Substitute: *iA Writer Quattro* or *IBM Plex Sans*. 3. **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 , 0 1px 3px ` | 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.