№ expressjs-com--en-api-html

Expressjs

Deep charcoal expanse, crisp geometric type, spacious digital stillness.

Feature Stackminimalism swiss monochrome brutalism editorial glassmorphism developer toolslight

The page uses a stark, dark color palette with a prominent code block as a hero. Typography is clean and functional, prioritizing readability. The layout is divided into distinct sections, presenting key features and information in a structured manner. · javascript framework, node.js express, developer tools, dark theme, code example, minimalist website, technical design, express documentation

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#6c94cc
OKLCHoklch(66.0% 0.095 257)
RoleDominant
find sites →
Hex#223c62
OKLCHoklch(35.5% 0.074 258)
RoleSurface
find sites →
Hex#fcecc4
OKLCHoklch(94.6% 0.055 89)
RoleInk
find sites →
Hex#a09171
OKLCHoklch(66.2% 0.048 86)
RoleAccent
find sites →
Hex#d5ccb2
OKLCHoklch(84.6% 0.036 91)
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	Helvetica Neue	54px	500	1.25	-1.35px	Aa Bb Cc
h2	Helvetica Neue	30px	500	1.25	-0.75px	Aa Bb Cc
h3	Helvetica Neue	16px	700	1.5	-0.4px	Aa Bb Cc
body	Helvetica Neue	16px	400	1.5	0	Aa Bb Cc
button	Helvetica Neue	16px	400	1.5	0	Aa Bb Cc

Spacing scale

12px

24px

48px

64px

80px

128px

Radius scale

0px

2px

4px

8px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #6c94cc;
  --color-surface: #223c62;
  --color-ink: #fcecc4;
  --color-accent: #a09171;
  --color-detail: #d5ccb2;
}

/* CSS variables exposed by source */
:root {
  --space-36: 14.4rem;
  --font-family-body: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --color-bg-secondary: light-dark(oklch(98% 0 0),oklch(19% 0 1));
  --space-16: 6.4rem;
  --color-button-primary-bg-hover: light-dark(oklch(25% 0 0),oklch(92% 0 0));
  --color-bg-inverse-secondary: light-dark(oklch(25% 0 0),oklch(92% 0 0));
  --space-40: 16rem;
  --space-7: 2.8rem;
  --size-44: 17.6rem;
  --color-text-secondary: light-dark(oklch(45% 0 0),oklch(94% 0 0));
  --color-text-tertiary: oklch(55% 0 0);
  --color-button-primary-bg: light-dark(oklch(19% 0 1),oklch(100% 0 0));
  --radius-none: 0;
  --color-icon-primary: light-dark(oklch(19% 0 1),oklch(98% 0 0));
  --space-3-5: 1.4rem;
  --font-size-4xl: 3.6rem;
  --space-5: 2rem;
  --space-h4: 2.4rem;
  --size-2-5: 1rem;
  --size-36: 14.4rem;
  --radius-sm: .2rem;
  --font-weight-bold: 700;
  --space-3: 1.2rem;
  --size-6: 2.4rem;
  --space-60: 24rem;
  --font-size-h2-docs: 3rem;
  --space-18: 7.2rem;
  --space-1: .4rem;
  --color-bg-inverse: light-dark(oklch(19% 0 1),oklch(97% 0 0));
  --size-3-5: 1.4rem;
  --radius-base: .4rem;
  --font-size-xs: 1.2rem;
  --radius-2xl: 1.6rem;
  --radius-md: .6rem;
  --radius-badge: 9999px;
  --font-family-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --radius-lg: .8rem;
  --radius-button: .6rem;
  --space-24: 9.6rem;
  --color-bg-info: light-dark(oklch(97% .01 250),oklch(18% .06 250));
  --size-84: 33.6rem;
  --color-icon-secondary: light-dark(oklch(55% 0 0),oklch(70% 0 0));
  --font-weight-heading: 700;
  --size-20: 8rem;
  --font-size-2xl: 2.4rem;
  --size-7: 2.8rem;
  --size-64: 25.6rem;
  --size-1: .4rem;
  --font-family-sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xxs: 1rem;
  --font-size-h1: 5.4rem;
  --space-64: 25.6rem;
  --color-button-primary-text: light-dark(oklch(100% 0 0),oklch(0% 0 0));
  --color-border-secondary: light-dark(oklch(92% 0 0),oklch(25% 0 0));
  --size-8: 3.2rem;
  --font-size-h4: 2rem;
  --font-size-5xl: 4.5rem;
  --space-6: 2.4rem;
  --color-text-info: light-dark(oklch(47% .19 250),oklch(69% .15 250));
  --space-20: 8rem;
}

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 Expressjs.
Reference design system (extracted from the live site):
- Palette: #6c94cc, #223c62, #fcecc4, #a09171, #d5ccb2
- Typefaces: Helvetica Neue
- 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/expressjs-com--en-api-html

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Helvetica Neue

54px

500

1.25

-1.35px

Aa Bb Cc

Helvetica Neue

30px

500

1.25

-0.75px

Aa Bb Cc

Helvetica Neue

16px

700

1.5

-0.4px

Aa Bb Cc

body

Helvetica Neue

16px

400

1.5

Aa Bb Cc

button

Helvetica Neue

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #6c94cc; --color-surface: #223c62; --color-ink: #fcecc4; --color-accent: #a09171; --color-detail: #d5ccb2; } /* CSS variables exposed by source */ :root { --space-36: 14.4rem; --font-family-body: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --color-bg-secondary: light-dark(oklch(98% 0 0),oklch(19% 0 1)); --space-16: 6.4rem; --color-button-primary-bg-hover: light-dark(oklch(25% 0 0),oklch(92% 0 0)); --color-bg-inverse-secondary: light-dark(oklch(25% 0 0),oklch(92% 0 0)); --space-40: 16rem; --space-7: 2.8rem; --size-44: 17.6rem; --color-text-secondary: light-dark(oklch(45% 0 0),oklch(94% 0 0)); --color-text-tertiary: oklch(55% 0 0); --color-button-primary-bg: light-dark(oklch(19% 0 1),oklch(100% 0 0)); --radius-none: 0; --color-icon-primary: light-dark(oklch(19% 0 1),oklch(98% 0 0)); --space-3-5: 1.4rem; --font-size-4xl: 3.6rem; --space-5: 2rem; --space-h4: 2.4rem; --size-2-5: 1rem; --size-36: 14.4rem; --radius-sm: .2rem; --font-weight-bold: 700; --space-3: 1.2rem; --size-6: 2.4rem; --space-60: 24rem; --font-size-h2-docs: 3rem; --space-18: 7.2rem; --space-1: .4rem; --color-bg-inverse: light-dark(oklch(19% 0 1),oklch(97% 0 0)); --size-3-5: 1.4rem; --radius-base: .4rem; --font-size-xs: 1.2rem; --radius-2xl: 1.6rem; --radius-md: .6rem; --radius-badge: 9999px; --font-family-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace; --radius-lg: .8rem; --radius-button: .6rem; --space-24: 9.6rem; --color-bg-info: light-dark(oklch(97% .01 250),oklch(18% .06 250)); --size-84: 33.6rem; --color-icon-secondary: light-dark(oklch(55% 0 0),oklch(70% 0 0)); --font-weight-heading: 700; --size-20: 8rem; --font-size-2xl: 2.4rem; --size-7: 2.8rem; --size-64: 25.6rem; --size-1: .4rem; --font-family-sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-size-xxs: 1rem; --font-size-h1: 5.4rem; --space-64: 25.6rem; --color-button-primary-text: light-dark(oklch(100% 0 0),oklch(0% 0 0)); --color-border-secondary: light-dark(oklch(92% 0 0),oklch(25% 0 0)); --size-8: 3.2rem; --font-size-h4: 2rem; --font-size-5xl: 4.5rem; --space-6: 2.4rem; --color-text-info: light-dark(oklch(47% .19 250),oklch(69% .15 250)); --space-20: 8rem; }

Build a landing page in the visual style of Expressjs. Reference design system (extracted from the live site): - Palette: #6c94cc, #223c62, #fcecc4, #a09171, #d5ccb2 - Typefaces: Helvetica Neue - 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/expressjs-com--en-api-html