Zed

Overview

Zed is a high-performance code editor designed for developers who demand speed, clarity, and seamless collaboration. The design system embodies "Functional Minimalism"—a philosophy that strips away visual noise while maintaining sophisticated depth through precision typography, restrained color use, and deliberate spatial hierarchy. The brand personality is direct, technical, and confident: Zed doesn't explain itself through flourishes; it communicates through clarity and performance. The UI evokes the precision of a craftsman's workspace—clean surfaces, sharp edges (4px and 8px radii), and a single vibrant accent (primary blue #3d7fd9) that signals interactivity without distraction. Voice example: "Zed compiles your code faster than you can think about it."

Colors

The color palette operates on a light-first foundation with a dark-mode companion, both anchored by a single, purposeful accent. Primary (#3d7fd9, hsl(228, 100%, 60%) light / hsl(228, 100%, 70%) dark) is the signature brand blue—reserved exclusively for call-to-action buttons, focus states, and primary links. It appears sparingly, forcing every instance to carry weight. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f5f5f5 for surface-dim, #e0e0e0 for surface-container-highest), creating visual separation without harshness. On-surface text is near-black (#1a1a1a), ensuring 15:1+ contrast for accessibility. Secondary (#6a7282) and tertiary (#4b4646) are muted neutrals used for supporting UI elements, metadata, and disabled states—never competing

Typography

The type system pairs PP Agrandir (geometric, bold, display-focused) for headlines and UI labels with iA Writer Quattro S (monospaced, precise, code-friendly) for body copy and inputs. Display (56px, 700 weight, -0.02em tracking) commands attention on hero sections; headline-lg (40px, 700 weight) anchors major sections; headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) maintain readability at 16px base font size. Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.02em tracking) provide hierarchy for UI controls and metadata. All headlines use -0.01em to -0.02em negative letter-spacing to tighten geometric letterforms; body copy uses 0em to 0.005em to preserve legib

Layout

Zed uses a 12-column fluid grid with a 1280px container max-width, maintaining responsive flexibility on mobile (single column) through tablet (6 columns) to desktop. The gutter is consistently 24px, creating breathing room between sections. Spacing follows a semantic scale: xs (4px) for micro-adjustments within components, sm (12px) for internal padding in cards and inputs, md (24px) for section separation and component padding, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. White-space is generous—sections are separated by lg (40px) minimum, and card padding uses md (24px) to prevent content crowding. The container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus. Margins between major sections (hero, feature block

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle border definition, avoiding the visual weight of heavy drop-shadows. Level 1 (Base): flat surfaces with 1px solid borders at {colors.outline} (#e6e6e6 light, #333333 dark). Level 2 (Elevated Cards/Modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), border: 1px solid {colors.outline}, applied on hover or focus. Level 3 (Floating/Overlay): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used sparingly for modals and dropdowns. Transitions between levels use 150ms cubic-bezier(0.4, 0, 0.2, 1) to feel responsive without lag. Focus states

Shapes

The shape philosophy is "Technical Precision"—sharp, minimal radii that evoke engineering and code editors rather than organic design. Buttons and inputs use 4px (DEFAULT) radius, creating a subtle softness without roundedness. Cards and larger containers use 8px (lg) radius for slightly more breathing room. Badges and pills use 9999px (full) radius for maximum visual distinction. Dividers and thin elements remain 0px (sharp edges). This hierarchy—sharp for interactive elements, slightly softer for containers—mirrors the precision of code while remaining approachable. Never exceed 12px radius

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#3d7fd9) background with white text, 12px vertical / 24px horizontal padding, 40px height, and 4px radius. On hover, shift to #3366cc (hsl(228, 100%, 50%)) with a 150ms transition. Button-secondary uses transparent background with primary text, a 1px outline border, and the same padding/height; on hover, fill the background with {colors.surface-container-low} (#f5f5f5) and darken the border to {colors.outline-variant} (#cccccc). Both buttons use label-md typography (14px, 600 weight). Disabled states reduce opacity to 50% and remove pointer-events.

Containers & Surfaces Cards are the primary content container. Use {colors.surface} (#ffffff) background, 1px solid {colors.outline} bord

Do's and Don'ts

**Do**

• Do use primary blue (#3d7fd9) exclusively for CTAs, focus states, and primary links—never for backgrounds or secondary UI.
• Do maintain 24px gutter spacing between major sections and 12px padding inside components for consistent rhythm.
• Do apply 4px radius to buttons and inputs, 8px to cards, and 9999px only to badges—never exceed 12px except for full circles.
• Do use 150ms cubic-bezier(0.4, 0, 0.2, 1) transitions for all interactive state changes to feel responsive without lag.
• Do apply 1px solid {colors.outline} borders to all surfaces and use {elevation.md} on hover to signal interactivity.
• Do use PP Agrandir for headlines (40px+) and iA Writer Quattro S for body copy and inputs to maintain technical clarity.

**Don't**

• Don't use primary blue for backgrounds, disabled states, or secondary UI—reserve it for the most important interactions.
• Don't exceed 12px border-radius except for full-circle badges; the brand rejects soft-rounded aesthetics.
• Don't apply heavy shadows (box-shadow: 0 16px 40px) on standard cards—use {elevation.md} (0 3px 8px) as maximum.
• Don't mix typefaces within a single section; use PP Agrandir for all headlines and iA Writer Quattro S for all body copy.
• Don't use color alone to signal state changes—always pair with border, shadow, or opacity shifts for accessibility.
• Don't add padding larger than {spacing.md} (24px) inside cards or inputs; maintain visual tightness and technical precision.