n8n

Overview

n8n is a workflow automation platform that bridges the gap between no-code simplicity and code-first flexibility, designed for technical teams who demand both visual clarity and programmatic control. The brand embodies "Intelligent Minimalism"—a design philosophy that strips away unnecessary ornamentation while layering sophisticated depth through glassmorphic surfaces, dynamic gradients, and precise micro-interactions. The UI evokes a sense of controlled power: dark, focused backgrounds (#0e0918) provide a canvas for vibrant accent colors (#ee4f27 orange, #077ac7 blue) that signal actionable moments and AI-driven intelligence. The emotional response is one of confidence and precision—users feel they are orchestrating complex systems with clarity and intent.

n8n's voice is technical yet approachable, direct without being cold. The brand speaks in imperatives and outcomes: "Build AI agents you can actually follow," "Plug AI into your own data," "Code when you need it, UI when you don't." Vocabulary favors concrete nouns (workflows, agents, integrations) over abstract adjectives. The tone assumes competence; it educates through example rather than reassurance. Example sentence in brand voice: "Your workflow runs at 6:14 AM—watch every step in the visual debugger, or drop into code to optimize the loop."

Colors

The color system is built on a dark, immersive foundation (#0e0918 surface, #1b1728 container) that positions n8n as a serious, focused tool. This deep navy-black backdrop is not merely aesthetic—it reduces cognitive load and allows accent colors to command attention without fatigue. Primary (#ee4f27, a warm orange-red) is the signature accent used exclusively on call-to-action buttons, active states, and critical workflow indicators; it signals "act now" with urgency and warmth. Secondary (#077ac7, a vibrant blue) supports data visualization, status indicators, and secondary interactions, creating a complementary accent pair that feels technical and trustworthy. Tertiary (#fd8925, a golden orange) is reserved for highlights, badges, and tertiary CTAs, adding visual rhythm without competin

Typography

The type system pairs Geomanist (a geometric sans-serif with tight, technical proportions) for headlines and body text with Open Sans (a humanist sans-serif with warmth) for UI labels and CTAs. This pairing communicates precision (Geomanist's geometric structure) balanced with accessibility (Open Sans's friendly curves). Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and sets the tone of authority; Headline-lg (40px, 600 weight, -0.02em) anchors section introductions with visual weight without overwhelming; Headline-md (28px, 600 weight, -0.01em) breaks up content and guides the eye through feature sections. Body-lg (18px, 400 weight) is used for descriptive copy and ensures readability at arm's length; Body-md (16px, 400 weight) is the default for most interfa

Layout

The layout system uses a 12-column fluid grid with a max-width of 1280px, allowing content to breathe on large screens while maintaining focus on medium and small viewports. The page rhythm is built on a semantic spacing scale: xs (4px) for micro-adjustments and icon spacing, sm (12px) for tight component padding, md (24px) for standard section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Container max-width is set to 1280px to prevent text lines from exceeding 75 characters, maintaining readability. White-space is generous but purposeful: sections are separated by lg spacing (40px) on mobile, increasing to xl (64px) on desktop, creating a sense of breathing room without fragmentation. The gutter (24px) is applied consiste

Elevation & Depth

Depth in n8n is conveyed through a layered glassmorphic system rather than traditional drop shadows. Level 1 (Base) is the dark background gradient (#0e0918 to #0e091800 with radial accents), which provides the energetic foundation. Level 2 (Standard Card) uses a 1px inset border at rgba(255, 255, 255, 0.1) with a subtle inset shadow (inset 0 1px 1px rgba(255, 255, 255, 0.2)) and a soft outer shadow (0 1px 2px rgba(8, 8, 8, 0.2), 0 4px 4px rgba(8, 8, 8, 0.08)) to separate the card from the background without heaviness. Level 3 (Elevated/Glass) adds backdrop-filter: blur(24px) with background:

Shapes

The shape language is "Soft-Technical," balancing the precision of sharp corners with the approachability of subtle rounding. Buttons and interactive elements use 8px (DEFAULT) border-radius, a size that feels intentional and modern without appearing overly rounded or playful. Cards and containers use 10px (md) for a slightly more generous curve that signals content importance and visual hierarchy. Glass surfaces and premium components use 12px (lg) to emphasize their elevated status and create visual distinction from standard UI. Input fields and form elements use 8px (DEFAULT) to align with

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: Primary (background: #ee4f27, color: #ffffff, padding: 12px 38px, height: 44px, border-radius: 8px, font-weight: 700) for main CTAs like "Get Started" and "Accept All"; Secondary (background: rgba(255, 255, 255, 0.106), border: 1px solid rgba(255, 255, 255, 0.2)) for alternative actions like "Decline All" or "Learn More"; and Ghost (background: transparent, color: on-surface) for tertiary interactions. All buttons use Open Sans at 14px weight 700 for maximum legibility and tactile presence. Hover states transition the background color over 0.15s (cubic-bezier(0.4, 0, 0.2, 1)), with Primary shifting to #ff7a42 (primary-fixed-dim) and Secondary brightening to rgba(255, 255, 255, 0.15). Focus states

Do's and Don'ts

**Do**

• Do use the primary accent (#ee4f27) exclusively on high-priority CTAs and active states—overuse dilutes its signal strength and confuses users about what to click.
• Do pair Geomanist headlines with Open Sans labels to create a clear hierarchy between content and interaction, reinforcing the brand's technical-yet-approachable personality.
• Do apply backdrop-filter: blur(24px) to all glass surfaces and pair with rgba(255, 255, 255, 0.05–0.1) backgrounds and 1px borders at rgba(255, 255, 255, 0.1–0.2) to maintain the frosted-lens aesthetic without sacrificing readability.
• Do use the full surface stack (surface-dim through surface-container-highest) to create visual hierarchy; never skip levels or use arbitrary grays that break the system.
• Do transition interactive states over 0.15s (cubic-bezier(0.4, 0, 0.2, 1)) to feel responsive without appearing jittery or sluggish.

**Don't**

• Don't use pure white (#ffffff) as a background or primary text color—it creates harsh contrast and breaks the immersive dark aesthetic; use #fefefe for highlights and #d1cece for body text.
• Don't apply drop shadows (box-shadow: 0 X Xpx Xpx rgba(0, 0, 0, Y)) to glass surfaces; use inset shadows and border highlights instead to maintain the crystalline, frosted effect.
• Don't mix Geomanist and Open Sans arbitrarily—use Geomanist for headlines and body copy, Open Sans only for UI labels and CTAs to avoid visual chaos.
• Don't round corners beyond 12px on standard components; it undermines the technical credibility and makes the interface feel playful rather than powerful.
• Don't use secondary (#077ac7) or tertiary (#fd8925) as primary CTAs—they lack the warmth and urgency of the primary accent and will confuse users about action priority.