# n8n · Design system migration spec

> Source: https://n8n.io  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a modern, premium developer tool aesthetic, balancing high-impact visuals with a clean, functional interface.

## 1. Identity DNA

n8n presents itself as a workshop for the modern developer, a place where the complex machinery of APIs and AI agents is made visible and malleable. The visual system, much like a well-designed IDE, prioritizes clarity and function over decoration, framing automation as a precise, architectural discipline.

**One-liner:** A dark-themed developer tool landing page using high-contrast orange accents and clean sans-serif typography to present AI workflows.
**Keywords:** workflow · automation · visual · AI agents · developer
**Analogy:** An IDE for connecting APIs and AI, styled like a high-end developer tool.

## 2. Color

The palette is a study in high-contrast restraint, built upon a deep navy canvas. A single, vibrant orange acts as the primary signal, guiding focus to interactive elements and key calls to action.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0e0918` | main background |
| `--bg-soft` | `#1a1624` | card background |
| `--bg-quiet` | `#151020` | quiet area |
| `--ink` | `#d1cece` | body text |
| `--ink-soft` | `#9d9797` | secondary text |
| `--muted` | `#6f6f6f` | placeholder |
| `--muted-soft` | `#4b4b4b` | weak hint |
| `--accent` | `#ee4f27` | single accent |
| `--line` | `rgba(111,111,111,0.3)` | divider |

**Color principle:** High-contrast dark UI with vibrant orange focal points and strictly restrained secondary colors.

The principle is absolute: a single high-chroma accent on a dark field creates a hierarchy of attention that is immediate and unambiguous.

## 3. Typography

The typographic voice is set by Geomanist, a geometric sans-serif that speaks the language of clean interfaces and technical documentation. Headlines are set with tight tracking and semi-bold weight for impact, while body text uses a regular weight for sustained readability.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 600 | -1px | Hero headlines |
| h2 | 40px | 1.2 | 600 | -0.5px | Section headers |
| body-lg | 20px | 1.5 | 400 | 0 | Subheadings and descriptions |
| body | 16px | 1.5 | 400 | 0 | Standard body text |
| caption | 12px | 1.2 | 600 | 1px | Labels and navigation |

**Type rules:**
- All typography uses a geometric sans-serif family (Geomanist).
- Headlines use tight tracking (-1px) and semi-bold weights.
- Body text remains at 400 weight for readability.

## 4. Spacing

A strict 4px base grid establishes a modular rhythm, with generous 48px padding defining major content sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid with generous padding (48px) for major sections.

## 5. Surfaces

Depth is articulated not through heavy drop shadows, but through a combination of subtle inset glows and thin, semi-transparent borders. This approach gives components a sense of being lit from within, sitting cleanly on the dark ground.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - 0px 1px 0px 0px inset rgba(255,142,93,0.3)
  - 0px 0px 0px 1px inset rgba(255,255,255,0.1)
  - 1px 2px 8px 0px rgba(0,0,0,0.35)
- **Borders:** 1px solid rgba(111,111,111,0.3)

## 6. Layout

The layout skeleton is a standard centered container, providing a consistent max-width for content. Within this, a strong left alignment in the hero section grounds the narrative, establishing a clear reading gravity.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard max-width container with centered content, left-aligned text in the hero.

## 7. Motion & Interaction

Motion is purely functional, designed to confirm interaction rather than to entertain. Transitions are smooth and consistent, using subtle easing to make state changes feel responsive and intentional.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Smooth color and background-color transitions on hover (0.2s).
  - Transform and opacity transitions for interactive state changes (0.3s).
  - Subtle easing for all UI element state changes.

- **Hover:** Smooth color and background transitions, subtle scale or translate on buttons.
- **Click:** Visual feedback via background color change or opacity.
- **Transition:** All interactive elements use a 0.2s to 0.3s cubic-bezier easing.
- **Keyboard:** Standard focusable elements (buttons, links) follow system defaults.

## 8. Voice & Don'ts

The editorial voice is direct, professional, and assumes a technically literate audience. Headlines are concise and action-oriented, while calls to action are clear and devoid of ambiguity.

- **Tone:** Direct, professional, and developer-focused.
- **Headline style:** Concise, action-oriented statements (e.g., 'Move fast. Break nothing.').
- **CTA style:** Clear and direct calls to action ('Get started for free', 'Talk to sales').
- **Avoid:** Overly casual or playful language. / Excessive jargon not related to workflow automation. / Cluttered or chaotic layouts. / Bright, multi-colored palettes. / Heavy, decorative serif fonts.

### Don'ts
- ❌ Don't use playful or rounded fonts — screenshot shows a clean geometric sans-serif.
- ❌ Don't use a light background — screenshot shows a deep dark navy (#0e0918) background.
- ❌ Don't use multiple high-chroma colors — screenshot uses orange as the sole dominant accent.
- ❌ Don't use complex or busy background patterns — screenshot uses clean dark gradients and subtle radial glows.
- ❌ Don't use wide, airy letter-spacing in headlines — screenshot shows tight, compact tracking.
- ❌ Don't use heavy drop shadows — screenshot uses subtle inset glows and thin borders for depth.

The system deliberately rejects playful typography, light backgrounds, and multi-colored palettes to maintain its focused, tool-like integrity.

## System Prompt (paste into AI tool)

```
This site is a developer-focused SaaS landing page for workflow automation. It uses a dark mode theme with a deep navy background (#0e0918) and a single dominant high-chroma orange accent (#ee4f27) for primary calls to action. The typography consists of clean, geometric sans-serif fonts (Geomanist) with semi-bold weights for headlines and standard weights for body text. Critical design constraints include: never use light or white backgrounds, never use multiple competing accent colors, and always maintain a clean, professional layout with subtle depth cues like inset glows rather than heavy shadows. The tone is direct and professional, targeting technical teams.
```