CURATED · OPEN · FREE

Zed

A high-performance code editor landing page that blends industrial precision with refined editorial clarity.

devtoolseditor

↓ Download design system (52 MB)Open in OpenDesign

Visit: https://zed.dev

📦 Browse pack contents →

Identity DNA

speedminimalcollaborationeditorrustdeveloper

Precision-engineered German automotive interface meets modern minimalism

Color

#1D4ED8Accent

#222B35Ink

#4E5E63Ink soft

#FAFBFCBG

#F0F2F4BG soft

#E6E9EDBG quiet

#A9AFC0Muted

rgba(169,175,188,0.3)Line

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

Typography

geometric-sans · monospace

hero64px · 700
h148px · 700
h224px · 700
body16px · 400
small14px · 400
mono14px · 400

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

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

128px

8px grid system with generous whitespace for breathing room

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(169,175,188,0.3)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

100msmicro

150mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle scale and translate transforms on hover · Smooth color transitions on interactive elements · Gentle fade-in for content reveals

Subtle lift with shadow enhancement and slight color shift · Immediate visual feedback with scale transform

Components

button Primary: solid blue fill with white text; Secondary: outline with gray border and dark text; both with subtle hover shadows
card Light gray background with subtle border, clean typography, and minimal decorative elements
chip Small inline elements for tags and metadata with light gray background
input Clean bordered inputs with subtle shadow on focus
hero Large centered headline with supporting text, dual action buttons, and subtle gradient background

Voice & Don'ts

Tone Confident, technical, and approachable
Headlines Clear, concise statements that emphasize performance and developer experience
CTAs Direct action-oriented language with clear value propositions

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
Avoid: Overly casual or playful language
Avoid: Technical jargon without context
Avoid: Marketing hype or superlatives

Inside the pack — real screenshots

Zed — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko