# Zed · Design system migration spec

> Source: https://zed.dev  ·  Curated by OpenDesign  ·  en

> This site exemplifies how restraint and precision in design can create a premium, professional feel for technical products, making it valuable for studying developer-focused interface design.

## 1. Identity DNA

The Zed design system operates with the disciplined restraint of precision-engineered German automotive interfaces, where every line and shadow serves a deliberate function. Its identity is built on the principle that a high-performance tool requires a visual language equally committed to speed, clarity, and collaboration.

**One-liner:** A high-performance code editor landing page that blends industrial precision with refined editorial clarity.
**Keywords:** speed · minimal · collaboration · editor · rust · developer
**Analogy:** Precision-engineered German automotive interface meets modern minimalism

## 2. Color

The color system is a lesson in functional restraint: a single bold blue serves as the active signal for primary interactions, while the rest of the palette recedes into a foundation of cool, sophisticated grays. This creates a high-contrast focal point without the visual noise of competing hues.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAFBFC` | main background |
| `--bg-soft` | `#F0F2F4` | card background |
| `--bg-quiet` | `#E6E9ED` | quiet area |
| `--ink` | `#222B35` | body text |
| `--ink-soft` | `#4E5E63` | secondary text |
| `--muted` | `#A9AFC0` | placeholder |
| `--muted-soft` | `#B2B9C6` | weak hint |
| `--accent` | `#1D4ED8` | single accent |
| `--line` | `rgba(169,175,188,0.3)` | divider |

**Color principle:** High-contrast functional palette with a single dominant blue for primary actions, grounded by cool neutral grays

The underlying principle is that color should guide action, not decorate.

## 3. Typography

The typographic voice pairs a refined geometric sans-serif for the interface's clear, concise statements with a strictly reserved monospace for code content. This creates a distinct hierarchy where editorial headlines are sharp and technical content is functionally segregated.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| hero | 64px | 1.05 | 700 | -1.5px | Main hero headline |
| h1 | 48px | 1.1 | 700 | -0.5px | Section headlines |
| h2 | 24px | 1.3 | 700 | -0.3px | Card titles |
| body | 16px | 1.5 | 400 | 0 | Paragraph text |
| small | 14px | 1.4 | 400 | 0 | Captions and metadata |
| mono | 14px | 1.5 | 400 | 0 | Code snippets |

**Type rules:**
- Use tight letter-spacing for large display text
- Maintain generous line-height for body text readability
- Use monospace font exclusively for code blocks and technical content

## 4. Spacing

Every element in the interface breathes on an 8px grid, with generous whitespace used not as empty space, but as a structural component that establishes rhythm and guides visual hierarchy.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px
- **Rhythm:** 8px grid system with generous whitespace for breathing room

## 5. Surfaces

Depth is communicated through a carefully graded system of subtle, cool-toned shadows that lift elements from the background, paired with barely-there borders that define without enclosing. The effect is one of precise, layered surfaces rather than heavy containers.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 1px 3px rgba(0,0,0,0.1)
  - 0 4px 6px -4px rgba(0,0,0,0.1)
  - 0 10px 15px -3px rgba(0,0,0,0.1)
  - 0 1px 3px 0 rgba(230,239,254,1)
- **Borders:** 1px solid rgba(169,175,188,0.3)

## 6. Layout

The layout is anchored by a centered single-column skeleton, a clear vertical spine that organizes content from the hero introduction down through feature highlights. This linear path is padded generously to maintain clarity and prevent visual congestion.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column layout with generous padding and clear visual hierarchy

## 7. Motion & Interaction

Motion is treated as a subtle confirmation of interaction, not a narrative. Quick, smooth transforms—like a slight lift on hover or a gentle fade-in for content—provide feedback while respecting the system's core commitment to minimalism and speed.

- **Durations:** micro 100ms · small 150ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle scale and translate transforms on hover
  - Smooth color transitions on interactive elements
  - Gentle fade-in for content reveals

- **Hover:** Subtle lift with shadow enhancement and slight color shift
- **Click:** Immediate visual feedback with scale transform
- **Transition:** All properties transition smoothly with 100-150ms duration
- **Keyboard:** Standard focus indicators with clear visual outlines

## 8. Voice & Don'ts

The editorial voice is confident and technical, yet approachable, favoring direct statements that emphasize performance and developer experience over playful or promotional language. It speaks to a user who values substance and precision.

- **Tone:** Confident, technical, and approachable
- **Headline style:** Clear, concise statements that emphasize performance and developer experience
- **CTA style:** Direct action-oriented language with clear value propositions
- **Avoid:** Overly casual or playful language / Technical jargon without context / Marketing hype or superlatives

### Don'ts
- ❌ Don't use excessive color contrast — screenshot shows controlled blue accent against neutral grays
- ❌ Don't implement dark mode as primary — screenshot shows light theme with subtle texture
- ❌ Don't use decorative illustrations — screenshot shows clean typography-focused design
- ❌ Don't add unnecessary borders or dividers — screenshot shows clean separation through whitespace
- ❌ Don't use complex animations — screenshot shows minimal motion design
- ❌ Don't overcrowd the interface — screenshot shows generous spacing and breathing room

What the system deliberately omits—decorative illustration, complex animation, and visual excess—is as defining as what it contains.

## System Prompt (paste into AI tool)

```
This is a landing page for Zed, a high-performance code editor targeting developers who value speed and minimalism. The design uses a refined geometric sans-serif typography system with tight letter-spacing for headlines and generous whitespace for readability. Primary actions use a bold blue (#1D4ED8) accent against cool neutral grays (#FAFBFC backgrounds, #222B35 text). Critical design principles include: no decorative elements that distract from core messaging, strict adherence to grid-based layouts, and maintaining visual restraint throughout. The interface emphasizes clarity over decoration, with monospace typography reserved exclusively for code-related content.
```
