n8n Workflow Automation

Overview

n8n is an enterprise workflow automation platform designed for technical teams and developers who demand precision, extensibility, and control. The design system embodies a "Technical Clarity" aesthetic—clean, minimal, and purposeful—where every visual element serves a functional role in reducing cognitive load and accelerating task completion. The interface prioritizes information density and accessibility, using a cool-toned, light-dominant palette anchored by a vibrant blue accent (#0969da) that signals interactivity and trust. The emotional response is one of competence and reliability: users feel empowered to build complex automations without friction.

The brand voice is direct, precise, and developer-centric. Vocabulary favors technical accuracy over marketing flourish—"workflow execution", "node configuration", "trigger logic"—and sentences are structured for scannability. Tone is helpful and unpatronizing, assuming users have domain expertise. Example sentence in brand voice: "Configure your trigger node to fire on webhook POST requests; execution logs appear in real-time below."

Colors

The color system follows a light-mode-first, accessibility-conscious approach rooted in GitHub's design language. Primary (#0969da) is the signature interaction color—used exclusively on CTAs, active states, focus rings, and key links—creating a consistent visual anchor across the interface. Secondary green (#1f883d) supports success states and affirmative actions, while error red (#cf222e) signals destructive or warning conditions. The surface stack ranges from near-white (#fcfcfc) to mid-gray (#d0d7de), providing subtle visual hierarchy without harsh contrast. On-surface text (#1f2328) maintains WCAG AAA contrast (18.5:1) against the light background, ensuring readability for extended workflows. Outline and outline-variant tokens (#8c959f, #d0d7de) define borders and dividers, creating v

Typography

The type system uses InterVariable as the single typeface family, optimizing for screen legibility and variable-weight flexibility. Display (60px, 700) anchors hero sections and major page titles; Headline-lg (40px, 600) structures primary content sections; Headline-md (28px, 600) breaks up dense workflows; Title-lg (20px, 600) labels card headers and modal titles; Body-lg (18px, 400) and Body-md (16px, 400) serve as primary reading text with 28px and 24px line heights respectively, ensuring comfortable scanning of configuration instructions and documentation. Label-md (14px, 600) and Label-sm (12px, 500) are reserved for UI controls, badges, and metadata. Letter-spacing is minimal (0 to 0.05em) to maintain technical precision. Apply text-shadow: 0 1px 2px rgba(0,0,0,0.05) on small labels

Layout

The layout system uses a 12-column grid with a 1280px max-width container, enabling responsive scaling from mobile (single column) to desktop (full grid). Gutter spacing is consistently 24px, creating breathing room between major sections. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied semantically: xs for micro-interactions (icon spacing), sm for component padding, md for card padding and section margins, lg for major section separation, and xl for hero/footer spacing. White-space is treated as a first-class design element—dense information is always surrounded by at least md (24px) spacing to prevent cognitive overload. Container max-width of 1280px ensures readability on ultra-wide displays while maintaining focus. Margins between sections follow the lg (

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than aggressive visual separation. The elevation system uses three tiers: sm (0 1px 2px rgba(31,35,40,0.06)) for subtle card borders and hover states; md (0 4px 12px rgba(31,35,40,0.08)) for elevated cards and modals; lg (0 3px 8px rgba(0,0,0,0.15)) for dropdown panels and floating elements. Buttons use inset shadows (inset 0 1px 0 rgba(255,255,255,0.03)) to create a pressed appearance without lifting off the page. On hover, buttons transition to md elevation with a 200ms ease-out timing function. Focus states use a 3px ring at rgba(

Shapes

The shape philosophy is "Geometric Precision"—rounded corners are applied judiciously to soften hard edges without sacrificing technical clarity. Buttons and primary CTAs use lg (1rem / 16px) border-radius, creating a friendly but professional appearance. Cards and containers use lg (1rem) for consistency with buttons. Input fields and form controls use DEFAULT (0.5rem / 8px) for a tighter, more technical feel. Badges and small UI elements use full (9999px) for a pill shape, signaling non-interactive status indicators. Modals and dropdowns use xl (1.5rem / 24px) for a softer, more prominent ap

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses primary blue (#0969da) with white text, 48px height, and 24px horizontal padding. On hover, the background shifts to #0860ca with a multi-layer shadow (0 3px 2px rgba(0,0,0,0.07), 0 7px 5px rgba(0,0,0,0.04), 0 12px 10px rgba(0,0,0,0.03)) to create lift. Active state uses #0757ba with inset shadow (inset 0 1px 0 rgba(0,33,85,0.2)). Transitions use 200ms cubic-bezier(0.2, 0, 0.13, 1) for snappy feedback. Button-secondary uses surface-container-high (#d0d7de) background with primary text, maintaining the same dimensions and hover behavior but with reduced shadow intensity. Button-danger mirrors primary styling but uses error red (#cf222e) and darkens to #a40e26 on hover. All buttons include a 1px inset highli

Do's and Don'ts

**Do**

• Do use primary blue (#0969da) exclusively on CTAs, focus rings, and active states—never as a background fill for large surfaces.
• Do maintain at least md (24px) spacing between major sections and lg (40px) between page sections to prevent cognitive overload.
• Do apply label-sm text-shadow (0 1px 2px rgba(0,0,0,0.05)) when small text appears over busy or colored backgrounds.
• Do use 200ms cubic-bezier(0.2, 0, 0.13, 1) transitions on all interactive state changes (hover, focus, active) for consistent feedback.
• Do keep border-radius consistent: lg (1rem) for buttons and cards, DEFAULT (0.5rem) for inputs, full (9999px) for badges.
• Do ensure all interactive elements have a visible focus state with a 3px ring at rgba(9,105,218,0.1) for keyboard accessibility.

**Don't**

• Don't use shadows darker than rgba(0,0,0,0.15) or blur values exceeding 12px—maintain the light, airy aesthetic.
• Don't apply primary blue to backgrounds, large surface areas, or non-interactive elements; reserve it for actionable UI.
• Don't exceed 700 font-weight; use 600 for emphasis instead to maintain visual restraint and technical precision.
• Don't mix border-radius values within the same component family (e.g., don't use sm and lg on different buttons in the same group).
• Don't apply letter-spacing greater than 0.05em on body text; maintain readability for dense workflow documentation.
• Don't use more than three elevation levels in a single view; excessive layering creates visual noise and reduces clarity.