Design System Inspiration of n8n
1. Visual Theme & Atmosphere
"n8n is a free and open node-based Workflow Automation Tool. It can be self-hosted, easily extended,
and used with third party web applications or custom in-house tools." The press page adds that "n8n
is headquartered in Berlin and was founded by Jan Oberhauser in 2019", and that its name is always
lowercase, pronounced "n eight n". Its imprint names n8n GmbH, Novalisstr. 10, 10115 Berlin.
The site is dark and warm: a midnight navy page #0e0918, navy panels (#1b1728, #1f192a),
soft grey text #d1cece under white headings, n8n's pink #ea4b71, and an orange-to-red
gradient #fd8925 → #ff0c00 on the main call to action. Type is Geomanist.
What makes it worth reading:
- Gradient buttons as token pairs.
--color-button-cta-from / --color-button-cta,
--color-button-primary-from (#077ac7) / --color-button-primary (#6b21ef), and
--color-button-tertiary-from / -tertiary — each button is a two-stop gradient.
- Navy shades named like a palette. Midnight, deep, dark, dark-lighten and slate-blue navies.
- A headline scale in pixels.
--text-headline-xxs 28px up to -xxl 80px, all at 100% line
height.
Primary tasks
- Get started for free; sign in.
- Explore use cases, docs and community; talk to sales.
2. Color Palette & Roles
Measured with getComputedStyle on n8n.io: 190 root custom properties — --color-* 56, --text-*
29, --radius-* 9, --font-* 9 … Tailwind's --tw-* (29) and the carousel library's --vc-* (19)
are excluded.
Brand and gradients
- Brand pink (
#ea4b71) — --color-base-pink.
- CTA gradient
#fd8925 → #ff0c00 — --color-button-cta-from, --color-button-cta.
- Primary
#ee4f27 (600), #f96e49 (400) · Secondary orange #ff9b26.
- Primary button gradient
#077ac7 → #6b21ef.
- Tertiary
#a3a3a3 → #bcbcbc.
Navy and text
- Midnight navy (
#0e0918) — the page · Dark navy (#1b1728) · Deep navy (#1f192a) ·
Slate blue (#48556a) · Hazy white (#f7f6fa).
- Heading (
#ffffff) · Text primary (#d1cece) · Text secondary (#9d9797).
- Green (
#35a670) — excellent scores.
3. Typography Rules
Font family
Geomanist (300, 400, plus a Book cut), geomanist, ui-sans-serif, system-ui, sans-serif,
loaded (document.fonts).
Scale
Headlines 28–80px at 100% line height (section H2 48px/400); body 16–18px at 150%; navigation 15px;
buttons 14px.
4. Component Stylings
Measured with a hover counted only when :hover matched; consent declined. Focus showed only the
browser's ring and is not recorded.
- CTA — Get started for free: a 30°
#fd8925 → #ff0c00 gradient, white 14px, 8px, 40px.
Hover and press lay a 12% white layer over the gradient.
- Glass button — Talk to sales:
rgba(163,163,163,0.2) → rgba(188,188,188,0.2) on
hover.
Radius
8px buttons; --radius-small 1rem, --radius-default 1.5rem, --radius-huge 2rem on cards.
5. Layout Principles
- A dark header, a hero with the gradient CTA, a workflow canvas illustration and use-case tabs.
6. Depth & Elevation
Translucent white panels (rgba(255,255,255,.03)–.1) on the navy ground; blur tokens exist.
7. Do's and Don'ts
Do
- Put the orange-to-red gradient on the one main CTA, and brighten it with a white layer on hover.
- Use the navy shades for the page and panels.
- Write the name lowercase — n8n.
Don't
- Don't use flat orange where the CTA gradient belongs.
- Don't use pure black backgrounds; the page is midnight navy.
- Don't treat the carousel library's variables as n8n tokens.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. Agent Prompt Guide
Quick Color Reference
#ea4b71 n8n pink · #fd8925 → #ff0c00 CTA · #0e0918 midnight · #1b1728 navy · #d1cece text ·
#9d9797 secondary · #077ac7 → #6b21ef primary gradient · #35a670 green
Example Component Prompts
- "A 40px button with a 30°
#fd8925 → #ff0c00 gradient, white 14px Geomanist, 8px radius; hover adds
a 12% white layer."
- "A glass button at
rgba(163,163,163,0.2) on #0e0918."
10. Voice & Tone
Not assessed as authored voice.
11. Brand Narrative
A Berlin-built, fair-code automation tool that you can self-host. The site is a night-time canvas —
midnight navy and grey — lit by a pink logo and a warm gradient button.
12. Principles
- Automate without limits. The page title's promise.
- Self-hostable and extensible.
- Gradients as buttons.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Hover: a 12% white layer on the gradient CTA; the glass button brightens. Press: the same. Focus:
the browser's ring (not recorded).
15. Motion & Easing
Not measured.
Tier 1 sources: https://n8n.io/ (live homepage — 190 root custom properties read via getComputedStyle, Tailwind and carousel variables excluded; Geomanist loaded; two components measured at rest, hover and pressed, captured 2026-09-27); https://n8n.io/zz-this-does-not-exist (nonsense-path control — HTTP 404 in the browser, read 2026-09-27); https://n8n.io/press/ (press — "a free and open node-based Workflow Automation Tool", headquartered in Berlin, founded by Jan Oberhauser in 2019, read 2026-09-27); https://n8n.io/imprint/ (imprint — n8n GmbH, Novalisstr. 10, 10115 Berlin, read 2026-09-27)