---
title: "n8n design system"
variant: extended
source: https://n8n.io/
captured_at: 2026-10-12
theme: dark
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/n8n-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# n8n · Design System

> A dark canvas for visible, controllable AI

**Theme:** dark · **Industry:** ai · **Source:** https://n8n.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

n8n pairs a near-black violet canvas with restrained surfaces, fine borders, and vivid orange-to-violet accents. Its long homepage alternates product storytelling, workflow visuals, customer proof, and enterprise reassurance in spacious, centered sections.

## North star

Keep the interface on a near-black violet canvas and use color, imagery, and fine borders to make the workflow story legible without adding visual clutter.

## Overview

The page is anchored by a nearly black violet canvas, #0e0918, which lets product imagery and warm accent lighting carry the visual drama without making the interface feel crowded. White headings create clear hierarchy; pale gray body copy stays readable but secondary. Surfaces use closely related dark purples, with muted violet-gray hairlines outlining cards and navigation rather than heavy shadows. Geomanist’s rounded, open sans-serif forms keep the technical product approachable. The hero pairs large left-aligned copy and calls to action with a dramatic lightning-bolt visual and customer marks. Farther down, centered headings introduce integration marks, workflow cards, case studies, and social proof. Sections have generous breathing room even as individual cards remain compact. Orange-red and blue-violet gradients appear selectively in calls to action, feature artwork, and the footer glow; brighter hues inside product illustrations should not be mistaken for global interface colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Violet | `#0e0918` | `--color-midnight-violet` | brand | Dominant page canvas and section background; also anchors dark gradient fades. |
| Soft Fog | `#d1cece` | `--color-soft-fog` | neutral | Primary muted copy across navigation, body text, and secondary control labels. |
| Shadow Plum | `#1a1624` | `--color-shadow-plum` | surface | Dark card and footer surface, subtly lifted from the canvas. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Headings, selected navigation items, and prominent link text. |
| Deep Aubergine | `#1f192a` | `--color-deep-aubergine` | surface | Secondary card and section surface for understated contrast. |
| Violet Slate | `#322e3a` | `--color-violet-slate` | semantic | Fine card, footer, and navigation borders. |
| Graphite Plum | `#272230` | `--color-graphite-plum` | surface | Subtle outlines and dark control or card details. |
| Muted Ash | `#9d9797` | `--color-muted-ash` | neutral | Tertiary copy, including compact card and footer text. |
| Iris Shadow | `#281e43` | `--color-iris-shadow` | accent | Minor dark violet gradient detail within controls. |
| Plum Shadow | `#27083a` | `--color-plum-shadow` | accent | Deep purple gradient detail within buttons. |
| Indigo Haze | `#1e1c46` | `--color-indigo-haze` | accent | Violet-indigo atmospheric gradient in decorative page artwork. |
| Smoky Lilac | `#4a4752` | `--color-smoky-lilac` | neutral | Muted gray-violet transition in gradient artwork, not a primary text color. |
| Signal Indigo | `#3d409f` | `--color-signal-indigo` | accent | Blue-violet accent in atmospheric gradient artwork and interactive emphasis. |
| Burnished Amber | `#aa6620` | `--color-burnished-amber` | accent | Warm footer accent and decorative gradient tone. |

### Semantic aliases

`--color-canvas` → `#0e0918` (Midnight Violet) · `--color-surface` → `#1a1624` (Shadow Plum) · `--color-surface-2` → `#1f192a` (Deep Aubergine) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#d1cece` (Soft Fog) · `--color-text-subtle` → `#9d9797` (Muted Ash) · `--color-border` → `#322e3a` (Violet Slate) · `--color-accent` → `#3d409f` (Signal Indigo) · `--color-accent-2` → `#aa6620` (Burnished Amber)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0e0918` | 19.61:1 | AAA |
| `#ffffff` | `#1a1624` | 17.73:1 | AAA |
| `#ffffff` | `#1f192a` | 17.06:1 | AAA |
| `#d1cece` | `#0e0918` | 12.54:1 | AAA |
| `#d1cece` | `#1a1624` | 11.34:1 | AAA |
| `#d1cece` | `#1f192a` | 10.91:1 | AAA |
| `#9d9797` | `#0e0918` | 6.82:1 | AA |
| `#9d9797` | `#1a1624` | 6.17:1 | AA |
| `#9d9797` | `#1f192a` | 5.94:1 | AA |
| `#3d409f` | `#0e0918` | 2.27:1 | fail |

### Gradients

- `linear-gradient(rgb(14, 9, 24) 5%, rgba(14, 9, 24, 0) 40%), linear-gradient(rgba(14, 9, 24, 0) 35%, rgb(14, 9, 24) 90%), radial-gradient(circle at 5% 50%, rgba(253, 152, 37, 0.65) 0px, rgba(255, 59, 33, 0) 50%), radial-g`
- `radial-gradient(65% 75%, rgba(81, 89, 217, 0.24), rgba(81, 89, 217, 0) 70%)`
- `linear-gradient(90deg, rgb(14, 9, 24) 10%, rgba(14, 9, 24, 0) 30%, rgba(14, 9, 24, 0) 75%, rgba(14, 9, 24, 0.1) 90%, rgb(14, 9, 24)), radial-gradient(circle at 60% -10%, rgba(14, 9, 24, 0), rgba(14, 9, 24, 0.2) 80%, rgba`
- `radial-gradient(126.99% 234.27% at 10.15% 142.35%, rgba(217, 126, 75, 0.133), rgba(255, 255, 255, 0) 37%), radial-gradient(66.99% 135.93% at 77.49% 23.63%, rgba(4, 0, 255, 0.09), rgba(163, 167, 136, 0) 80%), linear-gradi`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| geomanist | `--font-body` | webfont | 400, 300 | Primary face for headings, navigation, body copy, buttons, and links. | Jost |
| geomanist-book | `--font-geomanist-book` | webfont | 400 | Book-style supporting face used for a smaller share of site text. | Jost |

- **geomanist:** Use regular and light weights; large headings are compact and slightly tight-tracked, with sentence case.
- **geomanist-book:** Keep the regular book weight for supporting copy; maintain the same clean sans-serif voice.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 400 | 1 | -0.02em | — | geomanist | Hero headline; large, light-feeling and closely tracked. |
| h2 | 48px | 400 | 1 | -0.02em | — | geomanist | Major section headings, often centered. |
| h3 | 24px | 300 | 1.5 | 0 | — | geomanist | Feature and subsection headings. |
| h4 | 20px | 400 | 1.5 | 0 | — | geomanist | Card titles and smaller supporting headings. |
| body | 16px | 400 | 1.5 | 0 | — | geomanist | Main explanatory copy and product descriptions. |
| caption | 14px | 400 | 1.5 | 0 | — | geomanist | Compact labels, quotes, and secondary metadata. |
| button | 15px | 400 | 1 | 0 | — | geomanist | Short CTA and action labels. |
| nav | 14px | 400 | 1.5 | 0 | — | geomanist | Header and announcement-bar navigation text. |
| link | 14px | 400 | 1.5 | 0 | — | geomanist | Inline links and card actions. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 10, 12, 14, 16, 20, 24, 32, 40, 44, 48, 64 px.
- Section rhythm 32px · element gap 8px · card padding — · max content width 1120px.

The page uses a centered content frame with a measured maximum width of 1120px, while hero media and selected feature sections feel full-bleed. A 12-column grid supports broad integration rows and tighter two-column story or feature layouts. Most section backgrounds remain on the same canvas, so rhythm comes from generous vertical gaps, shifts in alignment, and alternating centered headings with left-aligned copy. The overall density is compact inside cards but spacious between major blocks.

## Shape & elevation

- Radius: button `6px` · card `24px` · media `50%` · nav `8px` · link `8px` · xs `6px` · sm `8px` · md `12px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `inset` (link, nav): `rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset, rgba(8, 8, 8, 0.2) 0px 1px 2px 0px, rgba(8, 8, 8, 0.08) 0px 4px 4px 0px, rgb(7, 122, 199) 0px 7px 0px -12px, rgba(255, 255, 255, 0.12) 0px 6px 12px 0px `
- Shadow `inset-2` (card, nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(255, 142, 9`
- Shadow `inset-3` (other, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.05) 0px 4px 12px 0px inset, rgba(0, 0, 0, `
- Shadow `sm` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.26) 0px 0px 8px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)` on interactive elements.

The interface stays mostly flat against the dark canvas. Cards and navigation rely on low-contrast hairline borders and related plum surfaces for separation, with rounded corners rather than pronounced drop shadows. Inset highlights and subtle dark shadows appear on selected controls; ambient gradients and glow provide depth in hero, feature artwork, and footer areas.

## Imagery

A cinematic lightning-bolt hero visual supplies the strongest focal point, with customer logos along its base. Product screens and workflow diagrams appear in dark, rounded panels, while integration marks form a dense, orderly grid. Case studies and testimonial cards prioritize text over photography. Artwork uses glow, gradients, and dark framing; vivid illustration hues are localized to the depicted media rather than the interface palette.

## Components

### Announcement bar

A slim, centered event notice sits above the navigation with pale text, warm ambient color, and a compact blue-violet ticket action.

### Navigation

Rounded dark header with the n8n mark, grouped links, GitHub star count, sign-in, and a bright warm Get Started action.

### Hero

Large left-aligned headline, warm primary CTA and subdued sales link balance a dramatic lightning visual and customer logos.

### Feature cards

Dark plum product cards use rounded corners, thin outlines, compact copy, and workflow or interface imagery.

### Integration grid

A centered heading and supporting line sit above a dense matrix of app marks and a compact browse link.

### Case study cards

Two outlined cards combine customer identity, a concise outcome, quote, attribution, and a small gradient action.

### Footer

A broad dark panel overlays warm atmospheric glow and arranges brand details, grouped site links, and a separated legal row.

### Measured component styles

- **Primary button** (“Top 50 Github. 207k stars. Read the sour”): background #0e0a18 · text #d1cece · border 1px solid #272230 · radius 8px · padding 14px · 400 16px geomanist · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Browse all integrations”): transparent background · text #ffffff · radius 8px · padding 0px 20px · 400 14px geomanist · shadow rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset, rgba(8, 8, 8, 0.2) 0px 1px 2px 0
- **Card** (“Build complex AI without getting boxed i”): background #1b1728 · text #d1cece · border 1px solid #272230 · radius 24px · padding 0px · 400 16px geomanist
- **Navigation item** (“In The Loop, the n8n conference: Berlin,”): transparent background · text #d1cece · radius 0px · padding 0px · 400 16px geomanist

## Do

- Use Midnight Violet as the dominant page canvas.
- Keep primary text white and supporting copy pale gray.
- Separate cards with subtle plum surfaces and fine borders.
- Reserve vivid gradients for calls to action and selected artwork.
- Alternate centered section introductions with left-aligned feature copy.
- Use rounded cards to frame product details and customer proof.

## Don't

- Do not replace the dark canvas with bright section bands.
- Do not use accent colors as large, flat backgrounds.
- Do not make card borders brighter than their contents.
- Do not crowd major sections together.
- Do not treat illustration colors as the site's core palette.
- Do not use heavy shadows to define every surface.

## Agent prompt

Build a new page in n8n's dark, technical style. Set Midnight Violet (#0e0918) as the dominant canvas; use Shadow Plum (#1a1624) and Deep Aubergine (#1f192a) for cards, with Violet Slate (#322e3a) hairlines. Use Clean White (#ffffff) for headings and Soft Fog (#d1cece) for supporting text. Choose a Geomanist-like sans serif with open, approachable shapes and restrained tight tracking on large headings. Compose within a centered content frame, mixing full-width media with compact two-column features and centered section introductions. Frame product screenshots and workflow diagrams in rounded dark cards. Use orange-red or violet-blue gradients sparingly for CTAs and atmospheric artwork, not as broad interface fills. Keep generous gaps between sections and keep card copy concise.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and copy alongside full-bleed hero media; customer marks sit near the base. | Primary and secondary CTA, Customer trust marks | Large heading, Cinematic artwork, Warm gradient CTA |
| 2 | feature-grid | Two-column use-case content with product demonstrations. | Role-based examples, Scenario browsing | Dark workflow panels, Compact cards |
| 3 | stats | Three compact proof points arranged in a horizontal row. | Social proof, External review and source links | Small outlined panels, Icon-led statistics |
| 4 | integrations | Centered title and copy above a wide grid of integration marks. | Browse integrations | Dense logo matrix, Compact CTA |
| 5 | feature-grid | Centered introduction above a two-column arrangement of rounded workflow cards. | Capability exploration, Self-hosting information | Product diagrams, Dark bordered cards |
| 6 | feature-split | Full-width feature panel pairs explanatory copy with a large media area. | Feature explanation, Product overview link | Warm gradient artwork, Text and media split |
| 7 | content-feed | Centered section heading above two side-by-side customer cards. | Read case study | Quote cards, Customer logos and attribution |
| 8 | feature-grid | Left-aligned enterprise introduction with two-column supporting features. | Security reassurance, Explore governance details | Feature lists, Sparse product imagery |
| 9 | testimonials | Single-row testimonial cards with horizontal overflow or carousel-style presentation. | Browse customer quotes | Text-first cards, Compact author details |
| 10 | cta | Centered closing message and a single prominent action. | Start building | Large centered headline, Minimal CTA treatment |
| 11 | footer | Brand block and grouped links in columns, with a separate legal footer row. | Explore site sections, Access legal and security links | Dark rounded container, Warm ambient background glow |

## Source CSS custom properties (selected)

```css
--vc-clr-primary: #000;
--vc-clr-secondary: #090f207f;
--vc-nav-background: transparent;
--vc-nav-border-radius: 0;
--vc-nav-color: #000;
--vc-nav-color-hover: #090f207f;
--vc-pgn-active-color: #000;
--vc-pgn-background-color: #090f207f;
--vc-pgn-border-radius: 0;
--vc-pgn-gap: 6px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/n8n-io