● v0.4 · canvas + ai + design systems

Your creative
environment.

A canvas where prompts, design systems, and AI nodes grow into branded pages, posts, and campaigns — without drifting off-tone.

Q3 launch·running8 nodes · 12 edges · 2.4s elapsed

00:02.4

100%

[ x: 420, y: 180, zoom: 1.0 ]

image · glass flowerWeber

FLUX · 1024²+1.8s

llm · identification

This appears to be a digitally created image of a flower that resembles a lotus, with glowing translucent elements.

claude · sonnet 4.5Bryan

image · loomioing✓ 3.2s

palette · extracted

Some hex colors from the image could be:

#FFA500· primary

var(--white)· neutral

#5B7ACF· accent

project preview

A project, running.

Four-node fintech workflow with one LLM mid-stream. Live state, properties panel open.

Q3 fintech tagline·running · llm step4 nodes · 4 edges · ds: linear · 1.8s elapsed

[ x: 220, y: 180, zoom: 100% ]

text · prompt

Brief

Premium fintech for European founders. Italic editorial accent on a single word.

32 tokens✓ ready

ai · llm

Claude · Sonnet 4.5

Three editorial tagline variants, each ≤6 words…

temp 0.7 · 800t+0.4s

ai · image

FLUX 1.1 Pro

1024² · seed 4082✓ 3.1s

ai · html

HTML Generator

strict · ds: linearqueued

Claude · Sonnet 4.5

running

llm · selected · id: n_2

last run

Latency

0.4s

Tokens

412

Cost

$0.012

ProviderModelTemperature0.7System

Editorial copywriter for a premium fintech. Output exactly 3 taglines, ≤6 words each, one per line.

00:01.8

100%

dashboard preview

Your projects, refreshed.

loom/io

ruben@loomio.app

Projects.

Spend

$24.18

Tokens

412K

Runs

186

OK%

98%

templates · start from

AllBrandImageContent

2 nodes

On-brand social card

HTML

3 nodes

LLM-written image

chained

3 nodes

Recreate a screenshot

strict

2 nodes

Product cutout

cutout

your projects · 6

Search projects…

Acme

Q3 launch creatives

2 hours ago

8n · 12e

Acme

Holiday campaign · banners

yesterday

5n · 6e

Linear

Pricing page hero

3 days ago

4n · 3e

migration scope

What this actually changes.

stays · 0 risk

Canvas plumbingReactFlow, node engine, all 26 executors — untouched
Connector glowSame var(--brand-green-neon) + drop-shadow, animated dashes
Node behaviourHandles, drag, connect, run — identical
Data + DBWorkflows, designs, history — no migration

changes · ~1 day work

Tokensglobals.css: --bg, --text, --accent, fonts (Geist replaces Inter)
LogoNew LoomioLogo replaces 'Canvas' wordmark in Navigation, Topbar
ButtonsAdopt .loomio-btn variants where Button primitive renders
SurfacesModals, panels, cards inherit new glass automatically
ToolbarEditor toolbar adopts dark-glass dock + Mono metadata

Net: tokens swap + chrome refresh + new wordmark. The graph itself looks sharper, not different. No data migration, no executor rewrites, no breaking changes.

01 · palette

Black, white, one loomio.

Pure black

Page

var(--black)

Elevated

Cards

#08090A

Subtle

Inputs

#101214

Text

Primary

#F5F5F5

Accent

CTA · connector

var(--brand-green-neon)

Accent deep

Rail base

var(--brand-green-mid)

Tag · coral

Layer A

#E56B6B

Tag · teal

Layer B

#5BC4A8

02 · type

Sharp sans with a flirt.

Display · Geist Medium + Instrument Serif italic accent

New medium. New canvas.

Heading · Geist 600 / 24

A digital sans for product surfaces.

Body · Geist 400 / 15 · 24

Geist's sharper terminals make tiny labels legible at 10px without looking like a console — body still reads as a product.

Mono · Geist Mono 500 / 11

x: 420 · y: 180
zoom: 1.0
$ loomio run --canvas

03 · surfaces

Layered liquid glass.

Default

Clear pane

Three-layer glass: outer hairline border, inner highlight, ambient backdrop pickup. Looks alive over coloured surfaces.

Active

Brand surface

Same blur, with accent-rim glow. Used for running workflows, pinned design systems, focused state.

04 · controls

Inputs & actions.

Buttons

Dark dialogs.

New design system

Generate from a brief, Figma file, or website

Brand nameSource