Layout & Structure

Layout & structure

The scaffolding of an operations console: resizable panes, scrollable feeds, ratio-locked media, and the empty and loading states that hold a screen together when there is nothing to show yet.

Resizable panels

Drag the handle to redistribute space. Panels persist their layout while the page is mounted, and nested groups can split along the other axis.

Clients

Kestrel
Varnhem
Halcyon
Beacon Fondsenwerving

Assay splitter

Kestrel · production · triggered by inbox label coa/incoming

Runs (30d)

1.284

Success

99,2%

Avg. duration

3,4s

Horizontal split — drag the grip between the client list and the run detail.

Steps

1Fetch attachment
2Split per lot
3Validate
4Write to ERP

Run log

12:04:11  fetch     attachment coa-2481.pdf
12:04:12  split     18 lots detected
12:04:14  validate  18 ok · 0 rejected
12:04:15  write     exact-online: 18 created

Output

18 lot records written to Exact Online, batch TRD-2481. No manual review required.

Nested groups — a vertical split living inside the right-hand panel.

Carousel

Embla-backed, keyboard accessible with the arrow keys. Slide width is set per item, so one-up and multi-up views come from the same component.

Assay splitter
Kestrel
Slide 1 / 6
Splits certificates of analysis into per-lot records.

Runs (30d)

1.284

Success

99,2%

Owner

Perpetuum

Invoice intake
Kestrel
Slide 2 / 6
Reads supplier PDFs and pushes them into Exact Online.

Runs (30d)

612

Success

97,8%

Owner

Perpetuum

Donor pipeline sync
Beacon Fondsenwerving
Slide 3 / 6
Nightly reconciliation between field app and CRM.

Runs (30d)

5.740

Success

99,9%

Owner

Perpetuum

Support triage agent
Varnhem
Slide 4 / 6
Classifies inbound tickets and drafts a first reply.

Runs (30d)

312

Success

94,1%

Owner

Perpetuum

Store rota assistant
Halcyon
Slide 5 / 6
Turns staffing forecasts into a publishable rota.

Runs (30d)

96

Success

98,0%

Owner

Perpetuum

Weekly client digest
Perpetuum
Slide 6 / 6
Assembles run stats into a Monday-morning summary.

Runs (30d)

31

Success

100%

Owner

Perpetuum

One card per view — previous and next disable at the ends.
Assay splitter
Kestrel
Live
Invoice intake
Kestrel
Live
Donor pipeline sync
Beacon Fondsenwerving
Live
Support triage agent
Varnhem
Live
Store rota assistant
Halcyon
Live
Weekly client digest
Perpetuum
Live
Contract renewal alerts
Perpetuum
Live
Multi-up — basis-1/2 on small screens, basis-1/3 from md upwards.

Collapsible

A show-more disclosure for lists that would otherwise dominate the page. The trigger keeps its own state so the label and chevron stay in sync.

Assay splitter

Splits certificates of analysis into per-lot records.

Kestrel
Invoice intake

Reads supplier PDFs and pushes them into Exact Online.

Kestrel
Donor pipeline sync

Nightly reconciliation between field app and CRM.

Beacon Fondsenwerving
Three automations visible, the rest behind the trigger.

Item

A row primitive for lists that are richer than a table but lighter than a card — media, title, description and a trailing action, in three border treatments.

KE
Kestrel

Assay intake · 4 live automations

VA
Varnhem

Agent workshop programme · 2 pilots

Kestrel

Assay intake · 4 live automations

Varnhem

Agent workshop programme · 2 pilots

Halcyon

Retail ops assistant · discovery

Beacon Fondsenwerving

Donor pipeline sync · production

DV
Daan Visser

Strategy & delivery

SG
Sanne de Groot

Kestrel — process owner

LW
Ruben Smit

Varnhem — pilot lead

Default, outline and muted variants.

Empty states

What a panel says before it has anything to say. Three flavours: nothing created yet, nothing matched, and something went wrong.

No automations yet
Connect a trigger and Perpetuum will start logging runs here.
No runs match “rituals q3”
Try a shorter query or widen the date range to the last 90 days.
Could not load run history
The Kestrel workspace did not respond. Nothing was lost — the runs are still queued.
No data yet, no search results, and a failed load.

Scroll area

A styled, fixed-height viewport for feeds that never end — and a horizontal variant for shelves of cards.

Twenty activity entries in a 18rem-tall viewport.
Horizontal shelf — scroll sideways through the client workspaces.

Aspect ratio

Ratio-locked boxes keep media from shifting the layout while it loads. Placeholders use the muted token, so they read correctly in both themes.

16 / 9 · case study reel
1 / 1 · client logo
4 / 3 · deck cover
16 / 9, 1 / 1 and 4 / 3 placeholders.

Spinners & loading

Indeterminate progress at three sizes, an action that actually goes into a loading state, and a skeleton for content that has a known shape.

Spinner sizes: 3, 4 (default), 6 and 8.
Click “Deploy automation” — the button disables and swaps its icon for a spinner.
Store rota assistant
Halcyon
Turns staffing forecasts into a publishable rota.
Skeleton card — matches the shape of a loaded automation card.

Separators

Vertical rules group related controls inside a toolbar; horizontal rules break a stack into readable chunks.

Vertical separators inside a toolbar.

July retainer — Kestrel

Period 01–31 July 2026

Automations live4
Runs1.284
Hours saved86
Horizontal separators between summary rows.