Hero Violet
#1348dcHeadlines, primary text links, brand mark — the single chromatic anchor that carries identity across the page
Zed
zed.devWebsite preview
The design language
Zed reads as an open-source engineering notebook rendered on faint blueprint paper: a near-white grid canvas, a single deep violet-blue that carries every heading and link, and product chrome that stays almost entirely text and hairline borders. Typography is the personality — a humanist serif (Plex Serif) for headlines at surprisingly light weights (340), a custom Writer sans for UI and body, and a wide-tracked mono (Zed Mono) for labels and shortcuts. Components are sharp-cornered (2px radius), compact (6px gaps), and almost shadowless; structure is implied by 1px inset top-borders and the faint dotted grid beneath everything. The download CTA is the only saturated fill on the page, and surrounding it everything stays quiet, typographic, and editorial — closer to a technical whitepaper than a SaaS landing page.
Color palette
brand
Signal Blue
#2b7fffBlue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Sky Tint
#8ec5ffBlue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Frost
#bedbffHairline blue borders, tag outlines, divider lines that need to read as on-brand rather than neutral
accent
Slate Blue
#74ade8Icon strokes, secondary blue text, nav active markers — cool blue for chrome, not headlines
Ice Wash
#e6effeSubtle background tints behind selected nav, soft blue drop-shadow tint, hover wash
Deep Cobalt
#053794Pressed-state inset shadow and the deepest brand blue — appears only as a 2px inset top line on active nav items
neutral
Silver Mist
#e5e7ebPage canvas, dominant border color, the faint grid lines — the workhorse neutral that holds the system together
Pure White
#ffffffCard surfaces, editor preview frames, raised content panels sitting on the Silver Mist canvas
Off-White
#f4f4f2Warm white surface variant, image backings, slightly creamier than Pure White
Graphite
#3a3d43Primary body and heading text, logo lockup color
Charcoal
#464b57Strong body text, button text on light fills, dark UI labels
Slate
#5d636fSecondary text, nav labels, supporting copy
Pewter
#6a7282Tertiary text, muted helper copy, disabled labels
Ash
#878a98Muted icons, placeholder strokes, very low-emphasis UI
Steel
#b2b5bbMuted text, icon outlines, very low-contrast labels
Fog
#cccfd3Light borders, input borders at rest, disabled surfaces
Mist
#dadde2Hairline dividers between rows, subtle background fills
Onyx
#282c33Dark editor preview surface, code block backgrounds
Midnight
#2f343eDark surface variant for framed code/editor insets
Typography
Type scale
Major Second (1.125) · 16px baseheading
48px · 340 · 1.1 · -0.96px trackingThe quick brown fox jumps
heading-sm
26px · 400 · 1.25 · -0.52px trackingThe quick brown fox jumps
text-24
24px · 400 · 1.33The quick brown fox jumps
text-17
17px · 400 · 1.1The quick brown fox jumps
text-16
16px · 400 · 1.5The quick brown fox jumps
text-15
15px · 400 · 1.5The quick brown fox jumps
body
14px · 400 · 1.5 · -0.35px trackingThe quick brown fox jumps
text-13
13px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Writer
- Weights
- 400
- Sizes
- 9px, 10px, 11px, 12px, 13px, 14px, 16px
- Line height
- 1.10, 1.33, 1.43, 1.50, 1.71
- Letter spacing
- -0.0250em
- Fallback
- Inter or IBM Plex Sans
Primary UI and body face — the calm, slightly condensed sans that carries every label, button, nav item, and paragraph. Its negative tracking (-0.4px at 16px) tightens the page into a dense, confident reading rhythm. At 9–11px it functions as micro-copy and tag text; at 14–16px it carries body paragraphs. Substitute: Inter, IBM Plex Sans, or Geist Sans at matching weights.
Additional typeface
Plex Serif
- Weights
- 340, 400
- Sizes
- 13px, 14px, 15px, 17px, 26px, 48px
- Line height
- 1.10, 1.20, 1.25, 1.43, 1.50
- Letter spacing
- -0.0200em
- Fallback
- IBM Plex Serif or Source Serif Pro
Headlines and display text. The signature choice is weight 340 for large display ('Love your editor again' at 48px) — an unusually light cut that whispers rather than shouts, paired with tight -0.02em tracking (-0.96px at 48px). This is what makes the page read editorial rather than promotional. Used at 26px for section headlines, 17px for sub-headings, and occasionally for body emphasis. Substitute: IBM Plex Serif or Source Serif Pro.
Additional typeface
Zed Mono
- Weights
- 400
- Sizes
- 10px, 11px, 12px, 24px
- Line height
- 1.33, 1.50, 1.67, 2.00
- Letter spacing
- 0.0500em
- Fallback
- JetBrains Mono or IBM Plex Mono
Monospaced face for keyboard shortcuts, command labels, keycaps, and editor chrome labels. Its +0.05em tracking (0.6px at 12px, 1.2px at 24px) deliberately widens letterforms to read as labels rather than code — a stylistic choice that signals 'this is a keybind, not syntax'. At 24px it functions as a large command-prompt display. Substitute: JetBrains Mono or IBM Plex Mono.
Additional typeface
ui-monospace
- Weights
- 400, 700
- Sizes
- 11px, 12px
- Line height
- 1.00, 1.33, 1.43
- Letter spacing
- -0.0320em
System mono fallback for nav and small chrome where a custom face isn't loaded. Negative tracking (-0.38px at 12px) tightens it for label use rather than code reading.
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1200px
- Section gap
- 64-80px
- Card padding
- 24px
- Element gap
- 6px
Border radius
tags
2pxcards
2pxinputs
2pxbuttons
2pxlogoTiles
2pxeditorFrame
6pxSpacing scale
1px2px4px6px8px10px12px14px16px20px24px32px36px40px48px224pxGuidelines
Do
- Set headlines in Plex Serif weight 340 at 48px with -0.96px tracking — the whisper-weight serif is the signature.
- Use Signal Blue (#2b7fff) fill for the primary Download action; it must be the only saturated fill on the screen.
- Build all cards, buttons, tags, and inputs with a 2px corner radius — sharp corners are part of the editorial feel.
- Use 6px gaps as the default element spacing and 64–80px as section gaps to keep the page compact and dense.
- Pair every action button with a ghost/outline variant sitting 8px to the right — never a single-button row.
- Express structure with 1px #e5e7eb borders and 2px inset top-lines, not with drop shadows.
- Use Zed Mono 12px with +0.6px tracking (0.05em) for keybind chips and command labels — the wide tracking distinguishes them from inline code.
Don’t
- Don't use Plex Serif above weight 400 for headlines — the lightness at 340 is the whole point.
- Don't introduce a second saturated color for buttons, tags, or accents — Hero Violet and Signal Blue are the only chromatic UI colors.
- Don't apply drop shadows to cards, nav, or text blocks — the only shadow that belongs is under the editor preview card.
- Don't round corners beyond 6px; 32px or 40px radii on any control breaks the editorial system.
- Don't use blue or violet for body text — those hues are reserved for headlines, links, and the CTA. Body text is Graphite or Slate.
- Don't set body text larger than 16px or smaller than 13px in Writer — outside that range the page loses its typographic discipline.
- Don't add decorative gradients, glassmorphism, or background images to sections — the dotted-grid canvas is the only texture allowed.
Components
Top Navigation Bar
Primary site navigation, minimal headerWhite background, 1px #e5e7eb bottom border, ~60px height. Left: Zed wordmark in Writer at 16px weight 400 #3a3d43. Center: nav links (Product, Resources, Extensions, Docs, Pricing) in Writer 14px #5d636f, 24px horizontal gap. Right: search icon, language switcher, 'Sign up' ghost link, and 'Download' filled blue button (#2b7fff, white text, 2px radius, 8px 14px padding). Active nav item gets a 2px inset Deep Cobalt top-border and Ice Wash background.
Primary Action Button (Download)
Highest-priority conversion CTAFilled #2b7fff background, white text in Writer 14px weight 400, 2px radius, 10px 16px padding, 6px gap between label and trailing icon. The vivid blue is the only saturated fill on the entire page; everything else recedes behind it. Sits with a subtle rgba(0,0,0,0.1) 0 1px 3px drop shadow. Trailing download arrow icon in white.
Ghost / Outline Button (Clone source)
Secondary action alongside the primary CTATransparent background, 1px #cccfd3 border, Writer 14px #3a3d43 text, 2px radius, 10px 16px padding, 6px gap to leading GitHub icon. Reads as the quieter sibling of the blue Download button.
Hero Section
First-screen identity statementFull-width Silver Mist (#e5e7eb) canvas with a faint dotted grid overlay (8px dot spacing). Centered stack: Plex Serif 48px weight 340 #1348dc headline ('Love your editor again') with -0.96px tracking, Writer 16px #5d636f subtext below, then a horizontal row of Primary Action + Ghost Button with 8px gap, then Writer 13px #6a7280 platform line ('Available for macOS, Linux, and Windows'). Vertical rhythm uses 16–24px gaps between elements. No card, no background panel — the grid paper IS the hero.
Three-Column Feature Block
Value proposition summary (Fast, Intelligent, Collaborative)Three equal-width columns on the Silver Mist canvas, 32px column gap. Each column: Plex Serif 17px weight 400 #1348dc label as a section title, Writer 14px #5d636f description paragraph below at 1.5 line-height. No cards, no borders, no icons — pure typographic separation. ~80px vertical padding above and below.
Editor Preview Card
Product showcase — the editor itself in contextThe hero's main visual artifact. Dark surface #282c33 filling the full card, 6px corner radius, soft 10px 15px -3px black/0.1 drop shadow that lifts it off the canvas. Inside: a faux macOS title bar (traffic lights), tab strip with file names in Zed Mono 12px, a file tree on the left (Gruvbox-tinted backgrounds in the mockup), and the main code pane with syntax highlighting using the full editor color palette (green #a1c181 for strings, red #d07277 for keywords, yellow #dec184 for types, teal #6eb4bf for functions, violet #b477cf for variables, orange #bf956a for constants). The card sits centered at ~1200px wide.
Logo Wall
Social proof — trusted-by stripCentered Plex Serif 26px weight 340 #1348dc heading ('Trusted by world-class developers & industry leading teams'), then a single horizontal row of grayscale company logos (Atlassian, Apple, Anthropic, Vercel, AWS, Baseten) at uniform ~80px height, evenly spaced. Logos are dark gray #3a3d43 to #5d636f, no color. ~48px vertical padding around the row.
Testimonial Card
Quoted endorsement from a named developerWhite (#ffffff) surface on the Silver Mist canvas, 2px radius, 1px #e5e7eb border, 24px padding. Quote text in Plex Serif 15px weight 400 #3a3d43 at 1.5 line-height, set in italic-feeling rhythm. Bottom row: small avatar (32px circle, 2px radius), name in Writer 13px weight 400 #3a3d43, role/company in Writer 12px #6a7282. Featured testimonial (Anthropic) uses a slightly larger card with the same structure.
Open Source Stats Block
Community credibility numbersCentered Plex Serif 26px #1348dc heading ('Open Source'), Writer 16px #5d636f subtext, then a four-column row of stats. Each stat: Plex Serif 26px weight 340 #1348dc number on top (7,784 / 78,821 / 1,766 / 1,020), Writer 13px #6a7282 label below. Numbers use the same display-weight serif as headlines to keep the typographic language consistent. Above and below the numbers, rows of tiny contributor avatar circles (24px, 2px radius) form a visual fence.
Two-Column Feature Section (AI / Agentic Editing)
Explanatory section pairing text with a product visualFull-width Silver Mist band, 1200px centered content. Left column (~40%): Plex Serif 26px #1348dc section heading, Writer 16px #5d636f description, Writer 14px #1348dc 'Learn More →' link. Right column (~60%): a dark editor screenshot card (#282c33, 6px radius) showing a split-pane code review interface. Section gap ~80px above and below, creating a distinct band in the page rhythm.
Keybind / Shortcut Label
Monospaced keyboard hint used in editor chrome and feature calloutsZed Mono 12px #3a3d43 text, +0.6px letter-spacing (0.05em), inside a 1px #cccfd3 bordered chip, 2px radius, 4px 8px padding. Sometimes sits on a #f4f4f2 background to read as a keycap. The wide tracking is what distinguishes it from inline code — it reads as a label, not as syntax.
Footer
Site footer with secondary links and brand markSilver Mist canvas continuing from the page, 1px #e5e7eb top border, 48px vertical padding. Writer 13px #6a7282 link list in 3–4 columns, Zed wordmark in Writer 14px #3a3d43 at the bottom-left. No background fill change — the footer is implied by a single horizontal rule, not a panel.
Surfaces & elevation
Level 0
Canvas
#e5e7ebPage background with faint dotted grid overlay
Level 1
Card
#ffffffWhite content cards, testimonial panels, feature blocks
Level 2
Warm Surface
#f4f4f2Cream-tinted surfaces for image holders and alternating bands
Level 3
Blue Wash
#e6effeSelected nav background, soft blue tinted zones
Level 4
Dark Frame
#282c33Editor screenshot and dark code insets
Elevation is implied, never announced. The system avoids drop shadows almost entirely; instead, structure is created with 1–2px inset top-borders in cool gray and hairline #e5e7eb borders. The only true drop shadow is the large soft one beneath the dark editor screenshot card (rgba(0,0,0,0.1) 0 10px 15px -3px), which makes the product preview feel lifted off the page. Everything else stays flat — this is blueprint paper, not a material design surface.
Active nav item
rgb(5, 55, 148) 0px -2px 0px 0px inset, rgb(230, 239, 254) 0px 1px 3px 0px
Subtle separator / button top-edge
rgba(111, 123, 144, 0.1) 0px -2px 0px 0px inset
Light divider
rgba(111, 123, 144, 0.05) 0px -2px 0px 0px inset
Raised button
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px
Editor screenshot card
rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px
Layout & imagery
Layout
The page model is centered, max-width 1200px content within a full-width Silver Mist canvas. The canvas carries a faint dotted grid overlay (8px spacing) that reads as blueprint paper and persists across every section — there are no alternating colored bands, only a continuous textured background. The hero is a centered typographic stack: Plex Serif display headline, Writer subtext, two side-by-side buttons, platform line. Sections below follow a rhythm of centered headlines over content blocks: a 3-column feature row, a wide editor preview card, a centered logo wall, a 3-column testimonial row, a 4-column stats block, and a 2-column text+visual section. The navigation is a thin top bar with center-aligned nav links and right-aligned actions. Vertical rhythm uses 64–80px between major sections and 6–16px within content. The only true full-bleed moment is the Silver Mist canvas itself; content always sits within the 1200px column.
Imagery
Imagery is dominated by one element: the dark editor screenshot. It appears full-bleed within a 1200px frame, presented as a high-fidelity product capture with the macOS chrome, tabs, file tree, and syntax-highlighted code. The code uses a Gruvbox-inspired palette of warm muted hues (green, red, yellow, teal, violet, orange) on a near-black surface — a deliberate visual contrast to the otherwise light page. Beyond the editor, the only other imagery is a row of grayscale company logos for social proof and small circular contributor avatars. No lifestyle photography, no abstract graphics, no illustrations. The grid-patterned page background functions as the primary visual texture.
Design notes
Agent Guide
Quick Color Reference: - Text (primary): #3a3d43 (Graphite) - Text (secondary): #5d636f (Slate) - Background (canvas): #e5e7eb (Silver Mist) - Background (card): #ffffff (Pure White) - Border (hairline): #e5e7eb (Silver Mist) - Accent / Headline: #1348dc (Hero Violet) - primary action: no distinct CTA color Example Component Prompts: No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. Editor preview card: Dark surface #282c33, 6px corner radius, soft shadow rgba(0,0,0,0.1) 0 10px 15px -3px. Inside: a 28px macOS title bar with red/yellow/green traffic lights, then a tab strip in Zed Mono 12px with +0.6px tracking showing file names. Main pane shows code in Zed Mono 12px with syntax colors — strings #a1c181, keywords #d07277, types #dec184, functions #6eb4bf, variables #b477cf, constants #bf956a — on the #282c33 background. 3. Three-column feature block: Three equal columns on the Silver Mist canvas with 32px column gap. Each column starts with a Plex Serif 17px weight 400 #1348dc label, followed by Writer 14px weight 400 #5d636f body text at line-height 1.50. No borders, no cards, no icons — pure typographic separation with 80px vertical padding above and below. 4. Testimonial card: White (#ffffff) surface, 2px radius, 1px #e5e7eb border, 24px padding. Quote in Plex Serif 15px weight 400 #3a3d43, italic-feel rhythm, line-height 1.50. Bottom row: 32px circular avatar, Writer 13px #3a3d43 name, Writer 12px #6a7282 role. Sits on the Silver Mist canvas as the only white object in a 3-column grid. 5. Keybind chip: Zed Mono 12px weight 400 #3a3d43 text, letter-spacing 0.6px (0.05em), 1px #cccfd3 border, #f4f4f2 background, 2px radius, 4px 8px padding. Used inline next to feature descriptions to signal keyboard shortcuts — the wide tracking is what makes it read as a label rather than code.
Similar brands
Linear
Same single-accent-blue-on-near-white approach with sharp corners, typographic density, and a signature product screenshot as the visual centerpiece.
Vercel
Minimal light landing pages anchored by a serif-or-geometric display headline, a single saturated CTA color, and full-bleed product chrome over a near-white canvas.
Tailscale
Developer-tool sites that lean on compact typographic systems, hairline borders, and 2px-radius components instead of cards and elevation.
Resend
Light-canvas dev marketing with one chromatic brand blue used sparingly, a dark code/editor inset as the hero visual, and tight editorial spacing.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
