№ zed-dev

Zed

Deep, cool digital expanse: sharp sans-serif geometry on a dark, subtly glowing canvas.

Feature Stackminimalism brutalism monochrome futurist developer toolslight

The page prioritizes a clean, functional aesthetic with a dark color palette and a prominent code snippet. Typography is straightforward and legible, emphasizing clarity over ornamentation. The overall mood is focused and efficient. · dark saas, developer tools, code editor, minimalist landing page, technical design, ai tools, productivity app, terminal aesthetic, modern saas, developer workflow

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#1c51dd
OKLCHoklch(49.8% 0.220 264)
RoleDominant
find sites →
Hex#0e2b75
OKLCHoklch(32.2% 0.132 264)
RoleSurface
find sites →
Hex#9eb2ea
OKLCHoklch(76.9% 0.084 269)
RoleInk
find sites →
Hex#a4a96e
OKLCHoklch(71.6% 0.080 112)
RoleAccent
find sites →
Hex#acd4a4
OKLCHoklch(82.9% 0.078 140)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	plexSerif	48px	340	1.2	-0.96px	Aa Bb Cc
h2	plexSerif	26px	390	1.25	0	Aa Bb Cc
h3	plexSerif	17px	400	1.1	0	Aa Bb Cc
body	writer	16px	400	1.5	0	Aa Bb Cc
caption	writer	14px	400	1.43	-0.35px	Aa Bb Cc
button	writer	14px	400	1.43	-0.35px	Aa Bb Cc

Radius scale

0px

2px

4px

6px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #1c51dd;
  --color-surface: #0e2b75;
  --color-ink: #9eb2ea;
  --color-accent: #a4a96e;
  --color-detail: #acd4a4;
}

/* CSS variables exposed by source */
:root {
  --color-cream-200: color-mix(in oklch,lab(50.8201% .448912 11.0273),white 45%);
  --color-red-900: lab(28.5139% 44.5539 29.0463);
  --color-blue-700: lab(36.9089% 35.0961 -85.6872);
  --color-cream-300: color-mix(in oklch,lab(50.8201% .448912 11.0273),white 33%);
  --text-base--line-height: calc(1.5/1);
  --color-offgray-500: lab(51.0529% -.623107 -9.27928);
  --color-blue-300: lab(77.5052% -6.4629 -36.42);
  --color-offgray-900: color-mix(in oklch,lab(51.0529% -.623107 -9.27928),black 54%);
  --color-gray-300: lab(85.1236% -.612259 -3.7138);
  --color-yellow-400: lab(83.2664% 8.65132 106.895);
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --color-gray-500: lab(47.7841% -.393182 -10.0268);
  --color-green-500: lab(70.5521% -66.5147 45.8073);
  --color-white: #fff;
  --color-gray-400: lab(65.9269% -.832707 -8.17473);
  --color-blue-400: lab(65.0361% -1.42065 -56.9802);
  --radius-sm: .25rem;
  --color-offgray-1000: color-mix(in oklch,lab(51.0529% -.623107 -9.27928),black 89%);
  --color-yellow-300: lab(89.7033% -.480294 84.4917);
  --font-weight-bold: 700;
  --color-gray-100: lab(96.1596% -.0823438 -1.13575);
  --text-xs--line-height: calc(1/.75);
  --color-offgray-950: color-mix(in oklch,lab(51.0529% -.623107 -9.27928),black 71%);
  --color-sky-50: lab(97.3623% -2.33802 -4.13098);
  --color-green-900: lab(30.797% -29.6927 17.382);
  --radius-2xl: 1rem;
  --radius-md: .375rem;
  --color-blue-800: lab(30.2514% 27.7853 -70.2699);
  --radius-lg: .5rem;
  --text-xl: 1.25rem;
  --color-blue-100: lab(92.0301% -2.24757 -11.6453);
  --color-green-600: lab(59.0978% -58.6621 41.2579);
  --color-offgray-300: color-mix(in oklch,lab(51.0529% -.623107 -9.27928),white 40%);
  --color-red-300: lab(76.5514% 36.422 15.5335);
  --color-orange-500: lab(64.272% 57.1788 90.3583);
  --text-2xl--line-height: calc(2/1.5);
  --spacing: .25rem;
  --text-xl--line-height: calc(1.75/1.25);
  --text-sm: .875rem;
  --color-green-400: lab(78.503% -64.9265 39.7492);
  --color-zinc-600: lab(35.1166% 1.78212 -6.1173);
  --color-gray-600: lab(35.6337% -1.58697 -10.8425);
  --color-orange-100: lab(94.7127% 3.58394 14.3151);
  --color-yellow-200: lab(94.3433% -5.00429 52.9663);
  --color-blue-600: lab(44.0605% 29.0279 -86.0352);
  --color-green-200: lab(92.4222% -26.4702 12.9427);
  --color-red-600: lab(48.4493% 77.4328 61.5452);
  --color-blue-50: lab(96.492% -1.14644 -5.11479);
  --color-black: #000;
  --color-cream-700: color-mix(in oklch,lab(50.8201% .448912 11.0273),black 28%);
  --color-offgray-100: color-mix(in oklch,lab(51.0529% -.623107 -9.27928),white 65%);
  --color-indigo-100: lab(91.6577% 1.04591 -12.7199);
  --text-2xl: 1.5rem;
  --color-yellow-600: lab(62.7799% 22.4197 86.1544);
  --text-lg: 1.125rem;
  --color-yellow-800: lab(38.7484% 23.5833 51.4916);
  --color-accent-blue: lab(36.3314% 31.1715 -81.0014);
  --text-5xl--line-height: 1;
  --color-offgray-50: color-mix(in oklch,lab(51.0529% -.623107 -9.27928),white 80%);
  --color-green-100: lab(96.1861% -13.8464 6.52365);
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Zed.
Reference design system (extracted from the live site):
- Palette: #1c51dd, #0e2b75, #9eb2ea, #a4a96e, #acd4a4
- Typefaces: plexSerif, writer
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/zed-dev

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

plexSerif

48px

340

1.2

-0.96px

Aa Bb Cc

plexSerif

26px

390

1.25

Aa Bb Cc

plexSerif

17px

400

1.1

Aa Bb Cc

body

writer

16px

400

1.5

Aa Bb Cc

caption

writer

14px

400

1.43

-0.35px

Aa Bb Cc

button

writer

14px

400

1.43

-0.35px

Aa Bb Cc

:root { --color-dominant: #1c51dd; --color-surface: #0e2b75; --color-ink: #9eb2ea; --color-accent: #a4a96e; --color-detail: #acd4a4; } /* CSS variables exposed by source */ :root { --color-cream-200: color-mix(in oklch,lab(50.8201% .448912 11.0273),white 45%); --color-red-900: lab(28.5139% 44.5539 29.0463); --color-blue-700: lab(36.9089% 35.0961 -85.6872); --color-cream-300: color-mix(in oklch,lab(50.8201% .448912 11.0273),white 33%); --text-base--line-height: calc(1.5/1); --color-offgray-500: lab(51.0529% -.623107 -9.27928); --color-blue-300: lab(77.5052% -6.4629 -36.42); --color-offgray-900: color-mix(in oklch,lab(51.0529% -.623107 -9.27928),black 54%); --color-gray-300: lab(85.1236% -.612259 -3.7138); --color-yellow-400: lab(83.2664% 8.65132 106.895); --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --color-gray-500: lab(47.7841% -.393182 -10.0268); --color-green-500: lab(70.5521% -66.5147 45.8073); --color-white: #fff; --color-gray-400: lab(65.9269% -.832707 -8.17473); --color-blue-400: lab(65.0361% -1.42065 -56.9802); --radius-sm: .25rem; --color-offgray-1000: color-mix(in oklch,lab(51.0529% -.623107 -9.27928),black 89%); --color-yellow-300: lab(89.7033% -.480294 84.4917); --font-weight-bold: 700; --color-gray-100: lab(96.1596% -.0823438 -1.13575); --text-xs--line-height: calc(1/.75); --color-offgray-950: color-mix(in oklch,lab(51.0529% -.623107 -9.27928),black 71%); --color-sky-50: lab(97.3623% -2.33802 -4.13098); --color-green-900: lab(30.797% -29.6927 17.382); --radius-2xl: 1rem; --radius-md: .375rem; --color-blue-800: lab(30.2514% 27.7853 -70.2699); --radius-lg: .5rem; --text-xl: 1.25rem; --color-blue-100: lab(92.0301% -2.24757 -11.6453); --color-green-600: lab(59.0978% -58.6621 41.2579); --color-offgray-300: color-mix(in oklch,lab(51.0529% -.623107 -9.27928),white 40%); --color-red-300: lab(76.5514% 36.422 15.5335); --color-orange-500: lab(64.272% 57.1788 90.3583); --text-2xl--line-height: calc(2/1.5); --spacing: .25rem; --text-xl--line-height: calc(1.75/1.25); --text-sm: .875rem; --color-green-400: lab(78.503% -64.9265 39.7492); --color-zinc-600: lab(35.1166% 1.78212 -6.1173); --color-gray-600: lab(35.6337% -1.58697 -10.8425); --color-orange-100: lab(94.7127% 3.58394 14.3151); --color-yellow-200: lab(94.3433% -5.00429 52.9663); --color-blue-600: lab(44.0605% 29.0279 -86.0352); --color-green-200: lab(92.4222% -26.4702 12.9427); --color-red-600: lab(48.4493% 77.4328 61.5452); --color-blue-50: lab(96.492% -1.14644 -5.11479); --color-black: #000; --color-cream-700: color-mix(in oklch,lab(50.8201% .448912 11.0273),black 28%); --color-offgray-100: color-mix(in oklch,lab(51.0529% -.623107 -9.27928),white 65%); --color-indigo-100: lab(91.6577% 1.04591 -12.7199); --text-2xl: 1.5rem; --color-yellow-600: lab(62.7799% 22.4197 86.1544); --text-lg: 1.125rem; --color-yellow-800: lab(38.7484% 23.5833 51.4916); --color-accent-blue: lab(36.3314% 31.1715 -81.0014); --text-5xl--line-height: 1; --color-offgray-50: color-mix(in oklch,lab(51.0529% -.623107 -9.27928),white 80%); --color-green-100: lab(96.1861% -13.8464 6.52365); }

Build a landing page in the visual style of Zed. Reference design system (extracted from the live site): - Palette: #1c51dd, #0e2b75, #9eb2ea, #a4a96e, #acd4a4 - Typefaces: plexSerif, writer - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/zed-dev