№ n8n-io--features

N8n — Features

Deep charcoal expanse, sharp geometric forms, stark sans-serif precision feels powerfully modern.

Feature Stackminimalism dark mode monochrome futurist brutalism developer tools saasdark

The design prioritizes a bold, impactful hero with a striking visual element, followed by concise information blocks. Typography is clean and functional, emphasizing readability and a sense of technological precision. The overall feel is efficient and direct. · ai workflow, developer tools, saas landing page, dark ui, technical design, ai platform, automation platform, n8n, lightning graphic, ai agents

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: neon · high-contrast · monochrome · saturated

SwatchHexOKLCHSuggested roleCopy

Hex#de582a
OKLCHoklch(62.9% 0.178 38)
RoleDominant
find sites →
Hex#661211
OKLCHoklch(33.5% 0.117 27)
RoleSurface
find sites →
Hex#d5c2a3
OKLCHoklch(82.2% 0.047 80)
RoleInk
find sites →
Hex#a1616f
OKLCHoklch(56.8% 0.085 6)
RoleAccent
find sites →
Hex#c5c1be
OKLCHoklch(81.3% 0.006 60)
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
h2	geomanist	48px	400	1	-0.96px	Aa Bb Cc
h3	geomanist	24px	400	1.2	-0.48px	Aa Bb Cc
body	geomanist	16px	400	1.5	0	Aa Bb Cc
caption	geomanist	14px	400	1.25	0	Aa Bb Cc
button	geomanist	15px	400	1	0	Aa Bb Cc

Spacing scale

4px

8px

16px

24px

32px

40px

48px

56px

64px

128px

192px

Radius scale

0px

4px

6px

8px

12px

16px

24px

40px

Container

Max content width 559px

Export

:root {
  --color-dominant: #de582a;
  --color-surface: #661211;
  --color-ink: #d5c2a3;
  --color-accent: #a1616f;
  --color-detail: #c5c1be;
}

/* CSS variables exposed by source */
:root {
  --text-headline-sm--line-height: 100%;
  --color-loop-bg: #fff;
  --color-winners-third: #783200;
  --radius-default: 1.5rem;
  --color-yellow-600: oklch(68.1% .162 75.834);
  --text-headline-lg--line-height: 100%;
  --text-lg: 18px;
  --color-primary-900: #b83617;
  --color-button-tertiary: #bcbcbc;
  --text-headline-md--line-height: 100%;
  --color-primary-400: #f96e49;
  --color-shades-deep-navy: #1f192a;
  --color-shades-darker-gray: #7a7a7a;
  --bg-rotation: 0deg;
  --color-shades-dark-navy: #1b1728;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --color-winners-first: #ffcf23;
  --color-score-good: #077ac7;
  --text-headline-xl: 54px;
  --color-gray-500: oklch(55.1% .027 264.364);
  --text-nav-link: 15px;
  --text-xxl: 24px;
  --color-base-pink: #ea4b71;
  --color-primary-700: #e04722;
  --font-geomanist-book: geomanist-book,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --text-lg--line-height: 150%;
  --color-white: #fff;
  --color-button-cta-from: #fd8925;
  --radius-sm: .25rem;
  --color-loop-pink: #ea4b71;
  --color-secondary-500: #ff9b26;
  --text-headline-md: 48px;
  --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --color-base-text-primary: #d1cece;
  --text-md--line-height: 150%;
  --color-loop-gray-60: #868686;
  --color-score-poor: #d91616;
  --color-red-500: oklch(63.7% .237 25.331);
  --bg-to: rgba(0, 0, 0, 0);
  --bg-hover: rgba(0, 0, 0, 0);
  --color-base-dark: #040506;
  --color-button-primary-from: #077ac7;
  --text-xs--line-height: 150%;
  --font-weight-light: 300;
  --color-button-cta: #ff0c00;
  --color-score-average: #ff9b26;
  --color-linear-bottom: rgba(0, 0, 0, 0);
  --color-winners-second: #fff;
  --color-green-2: #35a670;
  --radius-2xl: 1rem;
  --radius-md: .375rem;
  --text-xl: 20px;
  --radius-lg: .5rem;
  --shadow-card-top-glow: 0 0 0 1px #ffffff1a inset,0 1px 0 0 #ff8e5d4d inset;
  --color-base-red: #ff492c;
  --color-score-default: #1b1728;
  --color-radial-center: rgba(0, 0, 0, 0);
  --color-linear-top: rgba(0, 0, 0, 0);
  --bg-bottom: rgba(166, 55, 85, 0);
  --color-shades-hazy-white: #f7f6fa;
}

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 N8n — Features.
Reference design system (extracted from the live site):
- Palette: #de582a, #661211, #d5c2a3, #a1616f, #c5c1be
- Typefaces: geomanist
- 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/n8n-io--features

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

geomanist

48px

400

-0.96px

Aa Bb Cc

geomanist

24px

400

1.2

-0.48px

Aa Bb Cc

body

geomanist

16px

400

1.5

Aa Bb Cc

caption

geomanist

14px

400

1.25

Aa Bb Cc

button

geomanist

15px

400

Aa Bb Cc

:root { --color-dominant: #de582a; --color-surface: #661211; --color-ink: #d5c2a3; --color-accent: #a1616f; --color-detail: #c5c1be; } /* CSS variables exposed by source */ :root { --text-headline-sm--line-height: 100%; --color-loop-bg: #fff; --color-winners-third: #783200; --radius-default: 1.5rem; --color-yellow-600: oklch(68.1% .162 75.834); --text-headline-lg--line-height: 100%; --text-lg: 18px; --color-primary-900: #b83617; --color-button-tertiary: #bcbcbc; --text-headline-md--line-height: 100%; --color-primary-400: #f96e49; --color-shades-deep-navy: #1f192a; --color-shades-darker-gray: #7a7a7a; --bg-rotation: 0deg; --color-shades-dark-navy: #1b1728; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --color-winners-first: #ffcf23; --color-score-good: #077ac7; --text-headline-xl: 54px; --color-gray-500: oklch(55.1% .027 264.364); --text-nav-link: 15px; --text-xxl: 24px; --color-base-pink: #ea4b71; --color-primary-700: #e04722; --font-geomanist-book: geomanist-book,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --text-lg--line-height: 150%; --color-white: #fff; --color-button-cta-from: #fd8925; --radius-sm: .25rem; --color-loop-pink: #ea4b71; --color-secondary-500: #ff9b26; --text-headline-md: 48px; --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --color-base-text-primary: #d1cece; --text-md--line-height: 150%; --color-loop-gray-60: #868686; --color-score-poor: #d91616; --color-red-500: oklch(63.7% .237 25.331); --bg-to: rgba(0, 0, 0, 0); --bg-hover: rgba(0, 0, 0, 0); --color-base-dark: #040506; --color-button-primary-from: #077ac7; --text-xs--line-height: 150%; --font-weight-light: 300; --color-button-cta: #ff0c00; --color-score-average: #ff9b26; --color-linear-bottom: rgba(0, 0, 0, 0); --color-winners-second: #fff; --color-green-2: #35a670; --radius-2xl: 1rem; --radius-md: .375rem; --text-xl: 20px; --radius-lg: .5rem; --shadow-card-top-glow: 0 0 0 1px #ffffff1a inset,0 1px 0 0 #ff8e5d4d inset; --color-base-red: #ff492c; --color-score-default: #1b1728; --color-radial-center: rgba(0, 0, 0, 0); --color-linear-top: rgba(0, 0, 0, 0); --bg-bottom: rgba(166, 55, 85, 0); --color-shades-hazy-white: #f7f6fa; }

Build a landing page in the visual style of N8n — Features. Reference design system (extracted from the live site): - Palette: #de582a, #661211, #d5c2a3, #a1616f, #c5c1be - Typefaces: geomanist - 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/n8n-io--features