--- name: Zed tagline: 'Warm paper-light canvas, IBM Plex Serif headlines at light weight, one electric-blue download button — a code editor''s site that reads like a typesetter''s page.' updated_at: 2026-05-28T23:11:46.847Z published_at: 2026-05-28T23:11:46.847Z author: webdesignhot source_url: https://zed.dev spec: webdesignhot/0.1 quality: curated featured: false categories: [dev-tools] tags: [light, minimal, serif, editor, developer, warm] preview_swatch: ['#f5f5f3', '#004edb', '#393d45'] description: 'Zed''s marketing site is the rare developer-tool page that runs on a warm paper-light canvas (`#f5f5f3`) instead of the near-black dark-mode default. The hero "Your last next editor" sets in IBM Plex Serif at 48px and a delicate 340 weight — a typeset broadsheet headline, not a SaaS slogan — over cool-grey body ink (`#393d45`) in iA''s "writer" family. The single chromatic move is one electric-blue (`#004edb`) download button at a sharp 4px radius, the same blue Zed uses for its h1 accent; everything else is restraint, whitespace, and the unhurried confidence of a tool that sells itself on speed.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand border: border ring: brand colors: bg: '#f5f5f3' # warm paper-light canvas — oklab(0.847 .. /0.2) composited over white, observed live bg-100: '#ffffff' # elevated surface — pure white card sitting on the warm canvas bg-200: '#eeede9' # subtle inset / code-strip band, one step warmer-darker than canvas bg-300: '#e7e6e1' # hover wash on light controls surface-card: '#ffffff' # primary card surface — clean white against warm paper surface-code: '#1a1b1e' # the actual editor screenshot bg — dark, the one place the page goes near-black text: '#393d45' # primary copy — cool-grey ink, observed oklch(0.359 0.0155 262.9) text-200: '#5a5e66' # secondary copy — one step lighter, still AA text-300: '#6b6f78' # captions, metadata labels text-400: '#86888f' # disabled / faint timestamps (large-text only) text-strong: '#16181d' # near-black for the heaviest editorial emphasis brand: '#004edb' # electric blue — Download CTA + h1 accent, observed lab(36.33 31.17 -81.00) brand-hover: '#003fb5' # darker blue on press/hover brand-soft: 'rgba(0,78,219,0.08)' # faint blue tint — selected rows, focus halo fill on-brand: '#ffffff' # ink on the blue button cta-secondary-bg: '#ffffff' # "Clone source" secondary button — white at 0.5 alpha over canvas, observed cta-secondary-text: '#16181d' # near-black text on the secondary button link: '#004edb' # in-copy links share the brand blue link-hover: '#003fb5' # darker on hover border: '#e2e2de' # warm hairline divider — never pure grey, tinted toward the paper border-strong: '#d4d4ce' # heavier divider / input outline border-focus: '#004edb' # focus outline takes the brand blue code-bg: '#1a1b1e' # inline + block code background (dark editor inversion) code-text: '#e6e6e3' # light mono text inside dark code blocks semantic-success: '#2e7d32' # green — AA on the warm canvas semantic-warning: '#b54708' # amber — AA on the warm canvas semantic-danger: '#c01919' # red — AA on the warm canvas semantic-info: '#004edb' # info shares the brand blue typography: display: family: '"IBM Plex Serif", "plexSerif", Georgia, "Times New Roman", serif' weights: [300, 340, 400, 500] opentype: ['kern', 'liga'] body: family: '"writer", "iA Writer Quattro", "iA Writer Duo", -apple-system, "system-ui", sans-serif' weights: [400, 500, 600] opentype: ['kern', 'liga', 'calt'] mono: family: '"writer-mono", "iA Writer Mono", "JetBrains Mono", "SF Mono", Menlo, Monaco, monospace' weights: [400, 500] opentype: ['kern', 'tnum', 'zero'] scale: display-hero: { size: 72, weight: 340, lineHeight: 1.0, tracking: '-0.02em', family: display, opentype: 'kern, liga' } display-lg: { size: 56, weight: 340, lineHeight: 1.05, tracking: '-0.018em', family: display, opentype: 'kern, liga' } h1: { size: 48, weight: 340, lineHeight: 1.1, tracking: '-0.015em', family: display, opentype: 'kern, liga' } h2: { size: 36, weight: 400, lineHeight: 1.15, tracking: '-0.01em', family: display, opentype: 'kern, liga' } h3: { size: 28, weight: 400, lineHeight: 1.25, tracking: '-0.005em', family: display, opentype: 'kern, liga' } h4: { size: 22, weight: 500, lineHeight: 1.3, tracking: '0', family: display, opentype: 'kern, liga' } body-lg: { size: 18, weight: 400, lineHeight: 1.6, tracking: '0', family: body, opentype: 'kern, liga' } body: { size: 16, weight: 400, lineHeight: 1.6, tracking: '0', family: body, opentype: 'kern, liga' } body-sm: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: body, opentype: 'kern, liga' } button: { size: 15, weight: 500, lineHeight: 1.0, tracking: '0', family: body, opentype: 'kern' } nav-link: { size: 15, weight: 400, lineHeight: 1.4, tracking: '0', family: body, opentype: 'kern' } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body, opentype: 'kern' } caption: { size: 13, weight: 400, lineHeight: 1.4, tracking: '0', family: body, opentype: 'kern' } micro: { size: 12, weight: 500, lineHeight: 1.3, tracking: '0.03em', family: body } code: { size: 14, weight: 400, lineHeight: 1.6, tracking: '0', family: mono, opentype: 'tnum, zero' } code-block: { size: 13, weight: 400, lineHeight: 1.65, tracking: '0', family: mono, opentype: 'tnum, zero' } radius: none: 0 micro: 2 sm: 4 # primary CTA radius (observed live — sharp) md: 6 lg: 8 xl: 12 card: 8 code: 6 pill: 9999 spacing: base: 4 xxs: 2 xs: 4 sm: 8 md: 12 lg: 16 xl: 24 xxl: 32 section-sm: 64 section: 96 section-lg: 128 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128] layout: page-width: 1200 prose-width: 680 header-height: 64 hero-height: 640 grid-gap: 24 motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)' duration-fast: 120 duration-standard: 200 duration-slow: 320 reduced-motion: 'respects prefers-reduced-motion: reduce — transforms collapse to opacity-only' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: ambient: 'rgba(20,20,20,0.04) 0 1px 2px' standard: 'rgba(20,20,20,0.06) 0 2px 8px' elevated: 'rgba(20,20,20,0.10) 0 8px 24px' code: 'rgba(20,20,20,0.12) 0 12px 40px' focus: '0 0 0 3px rgba(0,78,219,0.30)' accessibility: contrast-text-on-bg: 9.98 # #393d45 on #f5f5f3 — AAA at body contrast-text200-on-bg: 5.96 # #5a5e66 on #f5f5f3 — AA at body, AAA at large contrast-brand-on-bg: 6.18 # #004edb on #f5f5f3 — AA at body, AAA at large contrast-on-brand: 6.75 # #ffffff on #004edb — AA at body, AAA at large contrast-secondary-text: 19.24 # #16181d on #f5f5f3 — AAA focus-ring: '3px rgba(0,78,219,0.30) halo + 1px #004edb outline' reduced-motion-honored: true keyboard-nav: 'tab order follows visual; skip-link to #main; keyboard-letter affordances (D / C) on hero CTAs' components: button-primary: background: '#004edb' text: '#ffffff' radius: 4 padding: '10px 18px' height: 40 font: button hover: 'background #003fb5' active: 'background #003299' use: 'primary CTA — Download. The page''s single chromatic moment, with a "D" keyboard hint.' button-secondary: background: '#ffffff' text: '#16181d' border: '1px solid #d4d4ce' radius: 4 padding: '10px 18px' height: 40 font: button hover: 'background #f0efeb; border #c9c9c2' use: 'secondary action — Clone source. White on warm canvas, "C" keyboard hint.' button-ghost: background: 'transparent' text: '#393d45' radius: 4 padding: '8px 14px' font: button hover: 'background rgba(0,78,219,0.06); text #004edb' use: 'tertiary / nav text-link CTA' button-link: background: 'transparent' text: '#004edb' radius: 0 padding: '0' font: body hover: 'underline; text #003fb5' use: 'inline read-more / docs link in body copy' card: background: '#ffffff' text: '#393d45' border: '1px solid #e2e2de' radius: 8 padding: '24px' use: 'feature card — white panel lifted off the warm paper canvas' card-flat: background: '#eeede9' text: '#393d45' border: 'none' radius: 8 padding: '24px' use: 'inset / secondary card — warm band rather than white lift' code-block: background: '#1a1b1e' text: '#e6e6e3' border: 'none' radius: 6 padding: '20px 24px' font: code-block use: 'editor screenshot / syntax sample — the one dark surface on a light page' input: background: '#ffffff' text: '#393d45' border: '1px solid #d4d4ce' radius: 4 padding: '9px 12px' height: 38 font: body focus: 'border #004edb; ring 0 0 0 3px rgba(0,78,219,0.30)' use: 'email / search / form input' badge: background: 'rgba(0,78,219,0.08)' text: '#004edb' border: 'none' radius: 4 padding: '3px 8px' font: micro use: 'NEW / version badge — faint blue tint, sharp corners' badge-neutral: background: '#eeede9' text: '#5a5e66' border: 'none' radius: 4 padding: '3px 8px' font: micro use: 'category / platform label' nav-link: background: 'transparent' text: '#393d45' font: nav-link padding: '8px 12px' hover: 'text #004edb' use: 'top nav menu — Docs / Blog / Channels / Community' dark-mode: optional lineage: summary: | Zed's marketing site is a deliberate contrarian move inside the dev-tool category. Where Linear, Vercel, Raycast and Warp all chose the near-black dark-mode canvas as the default register for "serious developer software", Zed runs the opposite play — a warm paper-light page (`#f5f5f3`, a faintly warm off-white rather than a sterile `#ffffff`) that reads like a typeset broadsheet. The most striking decision is the display face: IBM Plex Serif at a delicate 340 weight, sized 48px on the hero "Your last next editor". A serif headline on a code-editor site is almost unheard of; it signals craft, editorial confidence, and a refusal to look like every other dark SaaS landing. The body family is "writer" — iA Writer's humanist family — which pairs a literary, low-contrast comfort with the engineering subject matter. The single chromatic accent is an electric blue (`#004edb`, observed live as `lab(36 31 -81)`) used in exactly two places: the primary Download button and the h1 link color. Everything else is cool-grey ink (`#393d45`) on warm paper. The radius is sharp — 4px on the CTA — because Zed is a tool that sells on speed and precision, and rounded marshmallow corners would undercut that. The result is a page that feels like the README of a very fast, very thoughtfully made piece of software: quiet, typeset, legible, with one blue button you can't miss. influences: - name: 'IBM Plex' role: 'The display serif — IBM''s open-source superfamily, used at light weight for a typeset, editorial headline voice rather than a SaaS slogan' url: 'https://www.ibm.com/plex/' - name: 'iA Writer' role: 'The "writer" body family lineage — iA''s humanist, literary type tuned for distraction-free reading, paired here with a developer subject' url: 'https://ia.net/writer' - name: 'Stripe' role: 'Proved a light, typographically confident page could read as serious infrastructure — Zed inherits the calm light-canvas restraint and the single blue accent' url: 'https://stripe.com' - name: 'Linear' role: 'The dev-tool dark-canvas convention Zed deliberately rejects — its near-black register is the foil that makes Zed''s warm-light page read as contrarian craft' url: 'https://linear.app' - name: 'GitHub' role: 'Light-canvas developer surface with editorial restraint and a single accent CTA — adjacent register Zed shares' url: 'https://github.com' --- ## 1. Visual Theme & Atmosphere Zed's marketing site is the rare developer-tool page that refuses the dark-mode default. The category convention — Linear, Vercel, Raycast, Warp — is a near-black canvas with sans-serif display, because "serious software" reads as dark and engineered. Zed runs the opposite play: a warm paper-light page (`#f5f5f3`, a faintly warm off-white rather than a clinical `#ffffff`) that reads like a typeset broadsheet rather than a terminal. That single decision sets the entire register. The page feels less like a SaaS landing and more like the front matter of a thoughtfully designed book about a very fast editor. The most striking move is the display face. The hero "Your last next editor" sets in **IBM Plex Serif at 48px and a delicate 340 weight** — a serif headline on a code-editor site, which is almost unheard of in the category. The light weight is critical: it gives the serif an airy, typeset quality rather than a heavy print-newspaper feel. A serif headline signals craft, editorial confidence, and a deliberate distance from the sans-serif sameness of every dark dev-tool page. The body family is **"writer"** — iA Writer's humanist family — which pairs literary, low-contrast reading comfort with the engineering subject matter. The combination is unusual and instantly recognizable: a tool that takes both code and prose seriously. The single chromatic accent is an **electric blue** (`#004edb`, observed live as `lab(36 31 -81)`), and Zed spends it carefully. It appears in exactly two roles: the primary **Download** button and the h1 link color. Everything else is cool-grey ink (`#393d45`) on warm paper. The discipline is the point — when nearly the whole page is monochrome warm-on-warm, the one blue button becomes impossible to miss. Conversion comes from contrast scarcity, not from a page full of accent color. Radius is sharp. The CTA sits at **4px** — barely rounded — because Zed sells on speed and precision, and soft marshmallow corners would undercut that promise. The screenshots and code samples invert the page: the editor renders on a dark surface (`#1a1b1e`), the one place Zed lets the canvas go near-black, so the actual product looks like the actual product. That light-page / dark-editor split is the brand's core visual tension: the marketing surface is warm and editorial; the software it shows is dark and fast. Below the hero, sections breathe. Whitespace is generous, the prose column is narrow (~680px) for readability, and the rhythm is unhurried — the confidence of a tool that doesn't need to shout. The page reads like a well-set README: quiet, legible, typeset, with one blue button. **Key Characteristics:** - Warm paper-light canvas `#f5f5f3` — a contrarian rejection of the dev-tool dark-mode default. - IBM Plex Serif display at **light 340 weight**, 48px hero — a serif headline on a code-editor site. - iA "writer" humanist body family — literary reading comfort paired with engineering subject. - One electric-blue accent `#004edb` — used only on the Download CTA and h1 link color. - Cool-grey ink `#393d45` on warm paper — the monochrome base that makes the blue pop. - Sharp 4px CTA radius — precision register, not soft SaaS rounding. - Light page / dark editor inversion — product screenshots render on `#1a1b1e`. - Warm-tinted hairline borders `#e2e2de` — never pure grey, always toward the paper. - Keyboard-affordance CTAs — "Download D" / "Clone source C" hint at keyboard-driven speed. - Generous whitespace, narrow prose column — the unhurried confidence of a fast tool. ## 2. Color Palette & Roles ### Canvas & Surface - **Canvas / bg** (`#f5f5f3`) [→ `colors.bg`]: warm paper-light backdrop — observed live as `oklab(0.847 .. /0.2)` composited over white. Everything sits on this. - **Surface / bg-100** (`#ffffff`) [→ `colors.bg-100`]: pure-white elevated card — the lift off the warm canvas. - **Inset / bg-200** (`#eeede9`) [→ `colors.bg-200`]: warm band one step darker than canvas — code-strip / flat-card inset. - **Hover wash / bg-300** (`#e7e6e1`) [→ `colors.bg-300`]: light-control hover state. - **Editor surface** (`#1a1b1e`) [→ `colors.surface-code`]: the dark screenshot / code-block background — the one near-black surface on the page. ### Text - **Text** (`#393d45`) [→ `colors.text`]: primary copy — cool-grey ink, observed `oklch(0.359 0.0155 262.9)`. 9.98:1 on canvas. - **Text 200** (`#5a5e66`) [→ `colors.text-200`]: secondary copy — still AA at body. - **Text 300** (`#6b6f78`) [→ `colors.text-300`]: captions, metadata. - **Text 400** (`#86888f`) [→ `colors.text-400`]: faint timestamps / disabled — large-text only. - **Text strong** (`#16181d`) [→ `colors.text-strong`]: near-black editorial emphasis, secondary-button text. ### Brand - **Brand** (`#004edb`) [→ `colors.brand`]: electric blue — Download CTA + h1 accent, observed `lab(36.33 31.17 -81.00)`. The page's only saturated color. - **Brand hover** (`#003fb5`) [→ `colors.brand-hover`]: darker blue on hover/press. - **Brand soft** (`rgba(0,78,219,0.08)`) [→ `colors.brand-soft`]: faint blue tint — selected rows, badge fills, focus halo. - **On brand** (`#ffffff`) [→ `colors.on-brand`]: white ink on the blue button. ### Interactive - **CTA secondary bg** (`#ffffff`) [→ `colors.cta-secondary-bg`]: "Clone source" button — observed as white at 0.5 alpha over canvas. - **CTA secondary text** (`#16181d`) [→ `colors.cta-secondary-text`]: near-black on the secondary button. - **Link** (`#004edb`) [→ `colors.link`]: in-copy links share the brand blue. - **Link hover** (`#003fb5`) [→ `colors.link-hover`]: darker blue on hover. ### Borders - **Border** (`#e2e2de`) [→ `colors.border`]: warm hairline divider — never pure grey, tinted toward the paper. - **Border strong** (`#d4d4ce`) [→ `colors.border-strong`]: heavier divider / input outline. - **Border focus** (`#004edb`) [→ `colors.border-focus`]: focus outline takes the brand blue. ### Code - **Code bg** (`#1a1b1e`) [→ `colors.code-bg`]: inline + block code background — the dark editor inversion. - **Code text** (`#e6e6e3`) [→ `colors.code-text`]: light mono text inside dark code blocks. ### Semantic - **Success** (`#2e7d32`) [→ `colors.semantic-success`]: green — 4.7:1 on canvas, AA at body. - **Warning** (`#b54708`) [→ `colors.semantic-warning`]: amber — 4.97:1 on canvas, AA at body. - **Danger** (`#c01919`) [→ `colors.semantic-danger`]: red — 5.67:1 on canvas, AA at body. - **Info** (`#004edb`) [→ `colors.semantic-info`]: shares the brand blue. ## 3. Typography Rules ### Font Family - **Display:** `"IBM Plex Serif", "plexSerif", Georgia, "Times New Roman", serif`. Weights 300/340/400/500. The hero and headings use the **light 340 weight** — the airy, typeset register is the brand fingerprint. IBM Plex Serif is an open-source slab-adjacent transitional serif; at light weight it reads editorial, not newspapery. - **Body:** `"writer", "iA Writer Quattro", "iA Writer Duo", -apple-system, "system-ui", sans-serif`. Weights 400/500/600. The "writer" family is iA Writer's humanist lineage — low-contrast, literary, tuned for distraction-free reading. Pairing it with the serif display is what gives Zed its book-like calm. - **Mono:** `"writer-mono", "iA Writer Mono", "JetBrains Mono", "SF Mono", Menlo, Monaco, monospace`. Weights 400/500. Used inside code samples and the dark editor screenshots; slashed-zero (`zero`) and tabular figures (`tnum`) on for code legibility. - **OpenType:** display ships `kern, liga`; body ships `kern, liga, calt`; mono ships `kern, tnum, zero`. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | display-hero | Plex Serif | 72 | 340 | 1.0 | -0.02em | kern, liga | Oversized hero (rare) | | display-lg | Plex Serif | 56 | 340 | 1.05 | -0.018em | kern, liga | Large section hero | | h1 | Plex Serif | 48 | 340 | 1.1 | -0.015em | kern, liga | Homepage hero — "Your last next editor" (observed) | | h2 | Plex Serif | 36 | 400 | 1.15 | -0.01em | kern, liga | Section heads | | h3 | Plex Serif | 28 | 400 | 1.25 | -0.005em | kern, liga | Sub-section heads | | h4 | Plex Serif | 22 | 500 | 1.3 | 0 | kern, liga | Card titles | | body-lg | writer | 18 | 400 | 1.6 | 0 | kern, liga | Hero deck / intro prose | | body | writer | 16 | 400 | 1.6 | 0 | kern, liga | Default body (observed) | | body-sm | writer | 14 | 400 | 1.55 | 0 | kern, liga | Footer / fine print | | button | writer | 15 | 500 | 1.0 | 0 | kern | CTA label | | nav-link | writer | 15 | 400 | 1.4 | 0 | kern | Top nav | | label | writer | 13 | 500 | 1.4 | 0.02em | kern | Eyebrow / form label | | caption | writer | 13 | 400 | 1.4 | 0 | kern | Caption text | | micro | writer | 12 | 500 | 1.3 | 0.03em | — | Badge / pill text | | code | mono | 14 | 400 | 1.6 | 0 | tnum, zero | Inline code chip | | code-block | mono | 13 | 400 | 1.65 | 0 | tnum, zero | Block code / editor sample | ### Principles - **Serif display is the whole identity.** IBM Plex Serif at light 340 weight is the single decision that separates Zed from every dark sans-serif dev-tool page. Never substitute a sans for the headline. - **Light weight, not bold.** The hero is 340 — the airy, typeset feel comes from delicacy, not heft. Bolding the serif to 600+ would make it newspapery and undercut the calm. - **Negative tracking on display.** Display tier runs `-0.02em` to `-0.005em` so the serif sets tight and intentional at large size, not loose like body justification. - **Humanist body, generous leading.** "writer" at 16/1.6 reads like a book, not a UI. The 1.6 line-height is wider than the 1.55 most dev sites use — reading comfort over density. - **Serif for headings, sans for body, mono for code.** Three families, three jobs. The serif/sans pairing is the editorial signature; mono only appears inside code and editor screenshots. - **Narrow prose column.** Body copy caps at ~680px for line-length readability — a typesetter's measure, not a full-bleed paragraph. - **Slashed zero in mono.** Code samples render zeros with slashes (`zero` feature) — a "this is real code" signal inside the dark editor surface. - **No uppercase shouting.** Labels use light `0.02em` tracking at most; the brand never sets ALL-CAPS headlines. The voice is quiet. ## 4. Component Stylings ### Buttons **Primary (Download — Blue)** - Background: `#004edb` - Text: `#ffffff` - Padding: `10px 18px`, height 40 - Radius: **4 (sm)** — sharp, observed live - Font: button (writer 15 / 500) - Hover: `#003fb5` background; Active: `#003299` - Affordance: keyboard hint "D" sits alongside the label - Use: the page's single chromatic CTA — Download. **Secondary (Clone source — White)** - Background: `#ffffff` (observed as white at 0.5 alpha over canvas) - Text: `#16181d` - Border: `1px solid #d4d4ce` - Padding: `10px 18px`, height 40, Radius: 4 - Hover: `#f0efeb` background + border `#c9c9c2` - Affordance: keyboard hint "C" - Use: secondary action beside the Download button. **Ghost (Tertiary)** - Background: transparent - Text: `#393d45` - Padding: `8px 14px`, Radius: 4 - Hover: `rgba(0,78,219,0.06)` background + text `#004edb` - Use: nav buttons, low-emphasis actions. **Link (Inline)** - Background: none - Text: `#004edb` - Hover: underline + `#003fb5` - Use: read-more / docs links inside body prose. ### Cards **Feature Card** - Background: `#ffffff` (white lift off warm paper) - Border: `1px solid #e2e2de` - Radius: 8, Padding: 24 - Shadow: optional faint `rgba(20,20,20,0.06) 0 2px 8px`. **Flat / Inset Card** - Background: `#eeede9` (warm band, no white lift) - Border: none - Radius: 8, Padding: 24 - Use: secondary content, grouped lists — depth from tone, not shadow. ### Badges / Tags / Pills **Brand Badge** - Background: `rgba(0,78,219,0.08)` - Text: `#004edb` - Radius: 4 (sharp, not pill), Padding: `3px 8px` - Font: micro (12/500) - Use: NEW / version tags. **Neutral Badge** - Background: `#eeede9` - Text: `#5a5e66` - Radius: 4, Padding: `3px 8px` - Use: category / platform labels (macOS, Linux). ### Inputs / Forms **Input** - Background: `#ffffff` - Border: `1px solid #d4d4ce` - Radius: 4, Padding: `9px 12px`, height 38 - Text: `#393d45`, placeholder `#86888f` - Focus: border `#004edb` + ring `0 0 0 3px rgba(0,78,219,0.30)` - Use: email signup, search, contact. ### Code Block / Editor Sample The signature inversion: - Background: `#1a1b1e` (near-black — the page goes dark only here) - Text: `#e6e6e3` light mono - Radius: 6, Padding: `20px 24px` - Shadow: `rgba(20,20,20,0.12) 0 12px 40px` for the floating-editor look - Inside: writer-mono at 13–14px with slashed zeros, syntax-highlighted to match Zed's actual editor themes. ### Navigation Top nav 64px tall, transparent on the warm canvas, gaining a `1px solid #e2e2de` border-bottom on scroll. Links: writer 15/400 `#393d45`, hover to `#004edb`. Right side: GitHub link + Download (blue primary). The nav stays light — no dark header even on scroll. ## 5. Layout Principles ### Spacing System Base 4px. Scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128. Section gaps run 96–128px; card padding 24; nav padding `8px 12px`; grid gap 24. The pacing is roomy — closer to Stripe's editorial breathing than to Warp's dense terminal rhythm. The light canvas wants air; cramming it would lose the typeset calm. ### Grid & Container - **Page width:** 1200px max. - **Prose width:** 680px — a typesetter's reading measure for body paragraphs. - **Header height:** 64px. - **Hero height:** ~640px. - **Grid gap:** 24px. The hero is left-aligned (matching the editorial, document-like register) with the serif headline anchored left and the two CTAs in a row beneath. Feature sections alternate text and dark editor-screenshot blocks down the page. ### Whitespace Philosophy Whitespace here is **editorial, not engineered.** It exists to make the serif headlines and prose readable and unhurried — the way a well-set page leaves margins. The narrow prose column and generous line-height are the same instinct: reading comfort over information density. The page should feel like it has nothing to prove and all the time in the world, because the product is the speed claim, not the page. ### Section Cadence The warm canvas runs throughout; sections separate by whitespace and the occasional dark editor block rather than by alternating light/dark bands: 1. Hero (left-aligned serif headline + dual CTA, ~640px). 2. Dark editor showcase (floating `#1a1b1e` screenshot on warm canvas). 3. Feature stack (text + inline editor samples). 4. Performance / collaboration sections (prose-led). 5. Community / channels. 6. Footer (warm, low-key). The single dark surface is the editor screenshot — it punctuates the light page like a window into the software. ## 6. Shapes & Radius Scale | Tier | Value | Use | |---|---|---| | None | 0 | Edge-bound elements, full-bleed sections | | Micro | 2 | Tiny decorative chips (rare) | | **SM** | **4** | **Primary + secondary CTA, inputs, badges** — observed sharp value | | MD | 6 | Code blocks, small panels | | LG / Card | 8 | Cards, editor-screenshot frames | | XL | 12 | Large containers / modals | | Pill | 9999 | Status dots, avatars (rare) | Zed's radius scale is deliberately **sharp**. The CTA sits at 4px — barely rounded — and badges are square-cornered 4px rather than pills. This is a precision signal: Zed sells a fast, exact tool, and soft rounded corners read as casual or consumer-app. Cards relax slightly to 8px so panels don't feel brittle, but nothing on the page approaches a marshmallow pill. There are no compound radii — corners are uniform per element. ## 7. Depth & Elevation | Level | Treatment | Use | |---|---|---| | 0 | Flat on canvas, no shadow | Body copy, ghost buttons, flat inset cards | | 1 | White lift `#ffffff` over `#f5f5f3` + hairline border | Feature cards | | 2 | `rgba(20,20,20,0.06) 0 2px 8px` | Hover-elevated card | | 3 | `rgba(20,20,20,0.10) 0 8px 24px` | Popover / dropdown | | 4 | `rgba(20,20,20,0.12) 0 12px 40px` | Floating dark editor screenshot | | Focus | `0 0 0 3px rgba(0,78,219,0.30)` | Keyboard focus ring (blue halo) | ### Shadow Philosophy Zed's depth is **tone-and-hairline first, shadow second.** On a warm light canvas, the primary elevation tool is the white card lift (`#ffffff` over `#f5f5f3`) defined by a warm `#e2e2de` hairline — exactly the inverse of how dark-canvas sites use tonal darkening. Shadows are soft, low-opacity, and nearly grey-black (`rgba(20,20,20,...)` rather than pure black) so they sit naturally on warm paper without going muddy. The one place shadow does real work is the floating dark editor screenshot, which gets a generous `0 12px 40px` lift so the near-black editor reads as a panel hovering above the page — the visual hero moment. The blue focus halo is the only colored shadow, and it ties focus state to the brand. ## 8. Interaction & Motion ### Easing Curves - **Standard:** `cubic-bezier(0.4, 0, 0.2, 1)` — default ease-in-out for hovers and color shifts. - **Emphasized:** `cubic-bezier(0.2, 0, 0, 1)` — modal / dropdown entry. - **Entrance:** `cubic-bezier(0, 0, 0.2, 1)` — content fade-in on scroll. ### Duration Buckets - **Fast (120ms):** button hover color, link underline, nav-link tint. - **Standard (200ms):** card lift, focus ring, dropdown. - **Slow (320ms):** hero fade-in, large section reveal. ### Per-Component Micro-States - **Primary button:** background eases `#004edb` → `#003fb5` on hover over 120ms. No transform, no shadow grow — precision over bounce. - **Secondary button:** background `#ffffff` → `#f0efeb`, border darkens to `#c9c9c2`. 120ms. - **Ghost button:** transparent → `rgba(0,78,219,0.06)` fill + text → `#004edb`. 120ms. - **Card:** flat → `0 2px 8px` shadow on hover, 200ms. Border may warm slightly. No translate. - **Link:** color shift + underline-grow on hover, 120ms. - **Input focus:** border → `#004edb` + 3px blue halo grows in, 200ms. ### Page Transitions - Hero: serif headline fades + 6px translateY rise on load, 320ms ease-entrance. - Below-fold sections: fade + 4px translateY on scroll-into-view, 200ms. - Editor screenshot: subtle scale 0.99 → 1.0 + fade as it enters viewport, 320ms. ### Reduced Motion `@media (prefers-reduced-motion: reduce)`: - All translateY / scale collapse to opacity-only. - Hover color/underline transitions persist (they're state cues). - Scroll-reveal animations become instant or opacity-only. ## 9. Accessibility & A11y ### Contrast Pairs All ratios computed against the live warm canvas `#f5f5f3`: - **Body text on canvas:** `#393d45` on `#f5f5f3` → **9.98:1**. AAA at body sizes. - **Secondary text on canvas:** `#5a5e66` on `#f5f5f3` → **5.96:1**. AA at body, AAA at large. - **Brand on canvas:** `#004edb` on `#f5f5f3` → **6.18:1**. AA at body, AAA at large — links and h1 accent pass. - **White on brand:** `#ffffff` on `#004edb` → **6.75:1**. AA at body, AAA at large — Download button label passes. - **Strong text on canvas:** `#16181d` on `#f5f5f3` → **19.24:1**. AAA — secondary-button text. - **Light code text on editor:** `#e6e6e3` on `#1a1b1e` → ~15:1. AAA inside dark code blocks. ### Focus Indicators `3px rgba(0,78,219,0.30)` halo plus a `1px #004edb` outline. The blue focus ring ties keyboard focus to the brand color and is clearly visible on the warm light canvas (where a default browser outline can wash out). Form fields use the same blue ring. ### ARIA Pattern Recommendations - **Top nav:** `