CURATED · OPEN · FREE

n8n

A dark-themed developer tool landing page using high-contrast orange accents and clean sans-serif typography to present AI workflows.

devautomation

↓ Download design system (18 MB)Open in OpenDesign

Visit: https://n8n.io

📦 Browse pack contents →

Identity DNA

workflowautomationvisualAI agentsdeveloper

An IDE for connecting APIs and AI, styled like a high-end developer tool.

Color

#ee4f27Accent

#d1ceceInk

#9d9797Ink soft

#0e0918BG

#1a1624BG soft

#151020BG quiet

#6f6f6fMuted

rgba(111,111,111,0.3)Line

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

Typography

geometric-sans · monospace

display56px · 600
h240px · 600
body-lg20px · 400
body16px · 400
caption12px · 600

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.

Spacing

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

96px

Standard 4px base grid with generous padding (48px) for major sections.

Surfaces

sm · 4px

md · 8px

lg · 16px

pill · 999px

1px solid rgba(111,111,111,0.3)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

200mssmall

300msmedium

cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

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.

Smooth color and background transitions, subtle scale or translate on buttons. · Visual feedback via background color change or opacity.

Components

button Solid orange (#ee4f27) for primary actions, dark outlined for secondary, pill-radius.
card Dark background with subtle border and box-shadow for depth.
chip Not explicitly prominent, but checkmark indicators use a clean, minimal style.
input Dark backgrounds with subtle borders.
hero Large centered headline, two CTA buttons, and a prominent 3D graphic.

Voice & Don'ts

Tone Direct, professional, and developer-focused.
Headlines Concise, action-oriented statements (e.g., 'Move fast. Break nothing.').
CTAs Clear and direct calls to action ('Get started for free', 'Talk to sales').

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.
Avoid: Overly casual or playful language.
Avoid: Excessive jargon not related to workflow automation.
Avoid: Cluttered or chaotic layouts.
Avoid: Bright, multi-colored palettes.
Avoid: Heavy, decorative serif fonts.

Inside the pack — real screenshots

n8n — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko