Zed design system

What font does Zed use?

Zed’s website uses plex Serif for headings and zed Mono for body text. plex Serif is not on Google Fonts; the closest free match is Source Serif 4; zed Mono is not on Google Fonts; the closest free match is JetBrains Mono.

Zed colour palette

Zed’s home page is light (#DCDCDD background, #242529 text) and uses #1348DC for its main actions. Its palette: #FFFFFF, #1348DC, #2B7FFF, #F4F4F2, #000000, #DCDCDD.

• #FFFFFF
  44% · backgrounds
• #1348DC
  11.5% · backgrounds, drawings
• #2B7FFF
  10% · drawings
• #F4F4F2
  9.1% · backgrounds
• #000000
  5% · text, drawings
• #DCDCDD
  3.7% · backgrounds
• #393D45
  3.3% · text
• #EBEBEC
  2.6% · backgrounds
• #FAFAFA
  2.1% · backgrounds
• #BDC1C9
  1.9% · drawings

Type scale

Each size the page sets text in, with its weight and line height. Zed’s largest type is 48px at weight 340.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 40px, 48px, 64px, 76px.

Corner radii: 2px, 4px, 6px, 32px, pill. 10 shadow levels measured.

What makes Zed look like Zed

Mostly neutral: 75% of the page is #FFFFFF and #F4F4F2 and other neutrals.

#1348DC is an accent: 11.5% of the page, as one of a few coloured bands or panels. Use it for a band or two, never as the page ground.

#2B7FFF is an accent: 10% of the page, used for drawings only. Don't fill large areas with it.

The largest type (48px plexSerif) is light, not bold (340), tracked to -0.02em.

Zed DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Zed’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Zed’s product, so use your own name, words and images.

Download Zed DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Zed’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@300;400;500&display=swap");

:root {
  --color-background: #DCDCDD; /* Background */
  --color-surface: #DADDE2; /* Surface */
  --color-text: #242529; /* Text */
  --color-text-muted: #393D45; /* Text muted */
  --color-border: #EBEBEC; /* Border */
  --color-action: #1348DC; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-positive: #0997B3; /* Positive */
  --color-negative: #D3604F; /* Negative */
  --color-warning: #AD6E25; /* Warning */
  --color-2b7fff: #2B7FFF; /* 10% of the page, as drawings */
  --color-f4f4f2: #F4F4F2; /* 9.1% of the page, as fills */
  --color-000000: #000000; /* 5% of the page, as drawings */
  --color-fafafa: #FAFAFA; /* 2.1% of the page, as fills */
  --color-bdc1c9: #BDC1C9; /* 1.9% of the page, as drawings */
  --color-8ec5ff: #8EC5FF; /* 1.4% of the page, as drawings */
  --font-body: "zedMono", "JetBrains Mono", monospace; /* zedMono on the site; JetBrains Mono renders */
  --font-interface: writer, "Figtree", sans-serif; /* writer on the site; Figtree renders */
  --font-display: "plexSerif", "Source Serif 4", serif; /* plexSerif on the site; Source Serif 4 renders */
  --type-display: 48px; /* Display, weight 340 */
  --type-display-leading: 57.6px;
  --type-display-tracking: -0.02em;
  --type-headline: 25.6px; /* Headline, weight 390 */
  --type-headline-leading: 32px;
  --type-body-1: 16.8px; /* Body 1, weight 400 */
  --type-body-1-leading: 18.48px;
  --type-body-2: 16px; /* Body 2, weight 400 */
  --type-body-2-leading: 24px;
  --type-body-2-tracking: -0.025em;
  --type-body-3: 15.2px; /* Body 3, weight 400 */
  --type-body-3-leading: 16.72px;
  --type-body-4: 15px; /* Body 4, weight 400 */
  --type-body-4-leading: 22.5px;
  --type-body-5: 14px; /* Body 5, weight 400 */
  --type-body-5-leading: 20px;
  --type-body-5-tracking: -0.025em;
  --type-label-1: 13px; /* Label 1, weight 400 */
  --type-label-1-leading: 19.5px;
  --type-label-2: 12px; /* Label 2, weight 400 */
  --type-label-2-leading: 18px;
  --type-label-3: 11px; /* Label 3, weight 400 */
  --type-label-3-leading: 15.125px;
  --type-label-4: 10px; /* Label 4, weight 400 */
  --type-label-4-leading: 15px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-19: 76px;
  --space-21: 84px;
  --radius-xs: 2px;
  --radius-sm: 4px;

How this was measured

PikSpec’s scanner read the zed.dev home page in Chrome at 1440px wide on 15 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Zed is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Zed.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.