---
name: Zed
description: "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."
version: alpha

colors:
  background: "#FAFBFC"
  primary: "#222B35"
  secondary: "#4E5E63"
  tertiary: "#1D4ED8"
  neutral: "#A9AFC0"
  bg-soft: "#F0F2F4"
  bg-quiet: "#E6E9ED"
  muted-soft: "#B2B9C6"
  line: "rgba(169,175,188,0.3)"

typography:
  hero:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.05
    fontWeight: 700
    letterSpacing: "-1.5px"
  h1:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  h2:
    fontFamily: geometric-sans
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 700
    letterSpacing: "-0.3px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"
  mono:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

*Precision-engineered German automotive interface meets modern minimalism*

## Colors

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

- **Background (`#FAFBFC`)** — uses `bg` token
- **Primary text (`#222B35`)** — uses `ink` token
- **Secondary text (`#4E5E63`)** — uses `ink-soft` token
- **Accent (`#1D4ED8`)** — uses `accent` token
- **Muted (`#A9AFC0`)** — uses `muted` token
- **Borders (`rgba(169,175,188,0.3)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* 8px grid system with generous whitespace for breathing room

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## 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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```