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·running
00:02.4
100%
[ x: 420, y: 180, zoom: 1.0 ]
image · glass flowerWeber
FLUX · 1024²+1.8s

project preview

A project, running.

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

Q3 fintech tagline·running · llm step
[ 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
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

Tags

neutralWeberBryanrunning

Form

05 · modals

Dark dialogs.

New design system

Generate from a brief, Figma file, or website

loom/io

A new medium needs
a new canvas.

loomio · preview · v0.4 · isolated from production