AI agents and workflows you can see and control.

The source-available workflow automation platform that combines AI with 400+ integrations — on a canvas you own.

01 / Color

Palette

A deep purple-black canvas lit by the signature orange→red gradient. Green marks a node that executed successfully.

Signature — orange → red

--brand

#FF3B21

Primary — buttons, active nodes

--brand-hot

#FF2B09

Hover, run pulse (live CTA)

--grad

orange→red

Hero energy, accents

--green

#2FBE6E

Node executed successfully

Purple-black canvas & text

--ink-950

#0E0918

Main canvas — the n8n signal

--ink-850

#1A1624

Cards, node bodies

--ink-border

#262149

Purple borders

--text2

#A7A0C0

Muted purple-grey

02 / Type

Typography

Geomanist (≈ Manrope) — n8n's geometric brand sans — carries display and UI; JetBrains Mono owns node params, expressions, and JSON.

Manrope48px · 800

see and control

Manrope16px · 400

Build visually, go deep with code, connect to anything.

JetBrains Mono13px · 400

{{ $json.status }} === "active"

03 / Components

Building blocks

Buttons, expression chips, and the node-execution states that drive the canvas.

Buttons & expressions

{{ $json.email }}{{ $now }}$node["HTTP"]

Node execution state

Running Success Error Waiting

04 / Signature

The workflow canvas

Wire nodes on a dotted-grid canvas and run them left-to-right. Click a node to inspect it; press Execute to watch data flow through.

Order alerts · my-workflow

⏱Schedule
Trigger

1 item

◇HTTP Request

GET /orders

1 item

⑂IF

status = active

1 item

✉Send Slack

#orders

1 item

▤Google Sheets

Append · Archive

0 items

05 / Guardrails

Do & Don't

Anchor on the purple-black canvas #0E0918; light it with the orange→red gradient

Darken orange-red to #E8330F for text/links on light surfaces

Set the UI in Geomanist (≈ Manrope); reserve mono for expressions

Color nodes by type; mark execution with green + item counts

Don't

Don't use a plain black/grey canvas — purple-black is the n8n signal

Don't put orange text on the orange button

Don't invent node data — use real n8n language (Trigger, IF, items, {{ }})

Don't use Math.random — keep the execution deterministic