№ warp-dev

Warp

Deep charcoal expanse, crisp sans-serif clarity, and subtly glowing electric blue accents.

Feature Stackminimalism dark mode monochrome futurist developer toolsdark

The design prioritizes clarity and functionality with a dark, high-contrast palette. Typography is clean and legible, emphasizing the code snippets and tool descriptions. The layout uses a left-aligned navigation and a scroll-synced right pane for showcasing features. · dark saas, developer tools, terminal design, code interface, saas landing page, ai tools, technical website, minimalist dark, code showcase

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#157cfc
OKLCHoklch(60.6% 0.210 258)
RoleDominant
find sites →
Hex#055a78
OKLCHoklch(43.8% 0.086 230)
RoleSurface
find sites →
Hex#4e99fc
OKLCHoklch(68.2% 0.165 256)
RoleInk
find sites →
Hex#6492a3
OKLCHoklch(63.3% 0.056 223)
RoleAccent
find sites →
Hex#98bccc
OKLCHoklch(77.4% 0.045 227)
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	theFuture	72px	400	1.1	-2.52px	Aa Bb Cc
h2	theFuture	50px	400	1.25	-1.764px	Aa Bb Cc
h3	theFuture	30px	400	1.33	-1.05px	Aa Bb Cc
body	Matter	16px	400	1.5	0	Aa Bb Cc
caption	Matter	14px	400	1.5	0	Aa Bb Cc
button	Matter	14px	400	1.5	0	Aa Bb Cc

Spacing scale

24px

32px

64px

Radius scale

0px

1px

2px

3px

4px

6px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #157cfc;
  --color-surface: #055a78;
  --color-ink: #4e99fc;
  --color-accent: #6492a3;
  --color-detail: #98bccc;
}

/* CSS variables exposed by source */
:root {
  --color-violet-600: lab(41.088% 68.9966 -91.995);
  --color-blue-700: lab(36.9089% 35.0961 -85.6872);
  --font-body: "Matter", system-ui, sans-serif;
  --surface-texture-size: 200px 200px;
  --text-base--line-height: 1.5;
  --color-blue-300: lab(77.5052% -6.4629 -36.42);
  --color-text-secondary: oklch(40% .007 220);
  --color-cyan-700: lab(44.7267% -21.5987 -26.118);
  --color-card-foreground: lab(96.5592% .310391 3.81117);
  --space-section: calc(4rem * 1);
  --font-mono: "Azeret Mono", "Azeret Mono Fallback", ui-monospace, monospace;
  --type-xl: calc(1rem * 1.25);
  --color-olive-100: lab(96.0988% -.493258 1.82395);
  --color-primary-foreground: #121212;
  --border-treatment: none;
  --color-green-500: lab(70.5521% -66.5147 45.8073);
  --color-status-success: lab(69.7863% -53.411 45.1934);
  --type-7xl: calc(1rem * 4.5);
  --color-white: #fff;
  --color-accent: oklch(40% .007 220);
  --color-blue-400: lab(65.0361% -1.42065 -56.9802);
  --radius-sm: calc(.125rem * .5);
  --color-zinc-950: lab(2.51107% .242703 -.886115);
  --font-weight-bold: 700;
  --color-status-active: lab(57.7421% 5.71477 -72.009);
  --font-instrument-serif: "Instrument Serif", "Instrument Serif Fallback";
  --color-input: lab(29.263% .195071 2.29271);
  --type-3xl: calc(1rem * 1.875);
  --font-weight-extralight: 200;
  --text-xs--line-height: 1.5;
  --type-h4: calc(1rem * 1.25);
  --color-violet-500: lab(49.9355% 55.1776 -81.8963);
  --font-abel: "Abel", "Abel Fallback";
  --color-tertiary: #c59fff;
  --radius-2xl: calc(.125rem * 3);
  --type-base: 1rem;
  --radius-md: .125rem;
  --text-xl: calc(1rem * 1.25);
  --color-factory-subtle-bg: #0000000d;
  --radius-lg: calc(.125rem * 1.5);
  --color-border-subtle: color-mix(in oklch, oklch(78% .007 220) 40%, transparent);
  --color-text-body: lab(16.4913% .1041 1.1425);
  --font-azeret-mono: "Azeret Mono", "Azeret Mono Fallback";
  --color-cyan-500: lab(67.805% -35.3952 -30.2018);
  --color-sky-400: lab(70.687% -23.6078 -45.9483);
  --type-small: calc(1rem * .875);
  --text-2xl--line-height: 1.25;
  --spacing: calc(.25rem * 1);
  --type-body: 1rem;
  --type-sm: calc(1rem * .875);
  --color-secondary: lab(17.659% .165299 1.91246);
  --text-8xl: calc(1rem * 6);
  --color-olive-950: lab(3.26204% -.309289 1.13377);
  --text-xl--line-height: 1.25;
  --color-factory-teal-bg: #008ec41a;
  --color-factory-warning-bg: #a89c141a;
  --text-sm: calc(1rem * .875);
  --color-emerald-500: lab(66.9756% -58.27 19.5419);
  --color-accent-foreground: lab(96.5592% .310391 3.81117);
  --color-amber-700: lab(47.2709% 42.9082 69.2966);
}

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 Warp.
Reference design system (extracted from the live site):
- Palette: #157cfc, #055a78, #4e99fc, #6492a3, #98bccc
- Typefaces: theFuture, Matter
- 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/warp-dev

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

theFuture

72px

400

1.1

-2.52px

Aa Bb Cc

theFuture

50px

400

1.25

-1.764px

Aa Bb Cc

theFuture

30px

400

1.33

-1.05px

Aa Bb Cc

body

Matter

16px

400

1.5

Aa Bb Cc

caption

Matter

14px

400

1.5

Aa Bb Cc

button

Matter

14px

400

1.5

Aa Bb Cc

:root { --color-dominant: #157cfc; --color-surface: #055a78; --color-ink: #4e99fc; --color-accent: #6492a3; --color-detail: #98bccc; } /* CSS variables exposed by source */ :root { --color-violet-600: lab(41.088% 68.9966 -91.995); --color-blue-700: lab(36.9089% 35.0961 -85.6872); --font-body: "Matter", system-ui, sans-serif; --surface-texture-size: 200px 200px; --text-base--line-height: 1.5; --color-blue-300: lab(77.5052% -6.4629 -36.42); --color-text-secondary: oklch(40% .007 220); --color-cyan-700: lab(44.7267% -21.5987 -26.118); --color-card-foreground: lab(96.5592% .310391 3.81117); --space-section: calc(4rem * 1); --font-mono: "Azeret Mono", "Azeret Mono Fallback", ui-monospace, monospace; --type-xl: calc(1rem * 1.25); --color-olive-100: lab(96.0988% -.493258 1.82395); --color-primary-foreground: #121212; --border-treatment: none; --color-green-500: lab(70.5521% -66.5147 45.8073); --color-status-success: lab(69.7863% -53.411 45.1934); --type-7xl: calc(1rem * 4.5); --color-white: #fff; --color-accent: oklch(40% .007 220); --color-blue-400: lab(65.0361% -1.42065 -56.9802); --radius-sm: calc(.125rem * .5); --color-zinc-950: lab(2.51107% .242703 -.886115); --font-weight-bold: 700; --color-status-active: lab(57.7421% 5.71477 -72.009); --font-instrument-serif: "Instrument Serif", "Instrument Serif Fallback"; --color-input: lab(29.263% .195071 2.29271); --type-3xl: calc(1rem * 1.875); --font-weight-extralight: 200; --text-xs--line-height: 1.5; --type-h4: calc(1rem * 1.25); --color-violet-500: lab(49.9355% 55.1776 -81.8963); --font-abel: "Abel", "Abel Fallback"; --color-tertiary: #c59fff; --radius-2xl: calc(.125rem * 3); --type-base: 1rem; --radius-md: .125rem; --text-xl: calc(1rem * 1.25); --color-factory-subtle-bg: #0000000d; --radius-lg: calc(.125rem * 1.5); --color-border-subtle: color-mix(in oklch, oklch(78% .007 220) 40%, transparent); --color-text-body: lab(16.4913% .1041 1.1425); --font-azeret-mono: "Azeret Mono", "Azeret Mono Fallback"; --color-cyan-500: lab(67.805% -35.3952 -30.2018); --color-sky-400: lab(70.687% -23.6078 -45.9483); --type-small: calc(1rem * .875); --text-2xl--line-height: 1.25; --spacing: calc(.25rem * 1); --type-body: 1rem; --type-sm: calc(1rem * .875); --color-secondary: lab(17.659% .165299 1.91246); --text-8xl: calc(1rem * 6); --color-olive-950: lab(3.26204% -.309289 1.13377); --text-xl--line-height: 1.25; --color-factory-teal-bg: #008ec41a; --color-factory-warning-bg: #a89c141a; --text-sm: calc(1rem * .875); --color-emerald-500: lab(66.9756% -58.27 19.5419); --color-accent-foreground: lab(96.5592% .310391 3.81117); --color-amber-700: lab(47.2709% 42.9082 69.2966); }

Build a landing page in the visual style of Warp. Reference design system (extracted from the live site): - Palette: #157cfc, #055a78, #4e99fc, #6492a3, #98bccc - Typefaces: theFuture, Matter - 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/warp-dev