Skip to content

[00] Design system

A quiet control room, built to be read.

Monochrome surfaces, 1px borders and one electric-violet accent for what matters: the agent that is running, the action waiting for you, the link you can follow. Every component below is the real one used in the product.

Dark is the default. Every screen is designed in both.
[01]

Typography

Geist 500 with tight tracking for headings, Inter for UI and body, JetBrains Mono for traces, ids and indices.

Display · Geist 500 · 48 / −0.04emDelegate work to agents
Page title · Geist 500 · 32Boards
H2 · Geist 500 · 24Approvals waiting on you
Section · Geist 500 · 18This period
Body · Inter 400 · 14Drag a card to Running and an agent picks it up, works in the open and waits for a human before anything irreversible.
UI small · Inter 400 · 13 · mutedReading pricing page… · 38 s · €0.03
Caption · Inter 400 · 12Updated 5 min ago
Mono · JetBrains Mono 500 · 12fetch_url("northwind.example/pricing") → 200 · 14.2 KB
Eyebrow · mono 11 uppercase[01] Workspace
Agents you can watch.Thinking about the next step…Dispatch
Gradient keyword (text-dia) · shimmer (text-shimmer-brand) · brand gradient
[02]

Colour

A monochrome engineering palette with colour kept for a few deliberate moments: the violet brand, run states and semantics. Both themes, side by side.

Dark (default).dark
Surfaces
background
surface
card
popover
muted
border
foreground
muted-foreground
Brand — electric violet
brand
brand-hover
brand-subtle
brand-muted
primary
ring
Semantic
success
success-subtle
warning
warning-subtle
danger
danger-subtle
info
info-subtle
Charts
chart-1
chart-2
chart-3
chart-4
chart-5
Backlog
Queued
Running
Review
Done
Failed
Light.light
Surfaces
background
surface
card
popover
muted
border
foreground
muted-foreground
Brand — electric violet
brand
brand-hover
brand-subtle
brand-muted
primary
ring
Semantic
success
success-subtle
warning
warning-subtle
danger
danger-subtle
info
info-subtle
Charts
chart-1
chart-2
chart-3
chart-4
chart-5
Backlog
Queued
Running
Review
Done
Failed
[03]

Buttons

Primary buttons are near-white on dark and near-black on light. Brand violet marks the main action of a surface; the rainbow button is reserved for marketing and upgrade moments.

Variants — default (near-white on dark / near-black on light) · brand · secondary · outline · ghost · subtle · destructive · link
Sizes xs · sm · default · lg · icon · loading · disabled
RainbowButton — marketing CTAs and upgrade moments only
[04]

Inputs

Labelled fields with inline errors, 6px radius controls and visible focus rings.

Short and specific. The agent reads it first.

Enter a full URL, like https://northwind.example

Field + Input · Textarea · Select · PasswordInput · invalid state
Checkbox · Switch · RadioGroup · DateRangePicker
FileDropzone — drag & drop, per-file progress, type/size validation
[05]

Badges, status & avatars

Pills for state, tones for meaning, deterministic avatar tints.

BacklogQueuedRunningAwaiting approvalReviewDoneFailedCancelledPartial
StatusPill — card and run states (Running pulses in violet)
ProViewerVerifiedPartialSuspendedDefaultSecondaryOutline Running Healthy⌘KA
TonePill · Badge · StatusDot · Kbd
dsp_live_3f9a…c21eUpdated
CopyButton · RelativeTime (refreshes on a shared clock; exact date on hover)
NBOHYD
NBOHYDLM+2
UserAvatar · AvatarGroup (deterministic tints, +N overflow)
[06]

Cards & surfaces

1px low-contrast borders, soft two-level shadows, the double border for featured panels and dot-matrix bento tiles.

Card
10px radius, 1px border, soft shadow.
Borders do the work; colour is kept for state.
Double borderRing + inner card with a 5px gap, for featured panels.
Animated gradient borderUpgrade moments and the Pro plan card.
[01]
Watch every stepLive trace of plans, tool calls and costs.
[02]
Approve what mattersSide effects wait for a human.
[03]
Run in parallelSeveral agents, one board.
[04]
Cited artifactsEvery claim links to its source.
[07]

Data table

TanStack Table v8: sorting, faceted filters, selection, column visibility, pagination, sticky header, skeleton rows.

DSP-120Summarize Northwind’s pricing pageResearch briefBacklogNBNadia Benali<€0.01
DSP-121Extract contacts from the partner PDFCompetitor summaryQueuedOHOmar Haddad€0.14
DSP-122Draft a follow-up email for JaneData extractionRunningYDYasmine Demo€0.05
DSP-123EU AI Act obligations briefDraft emailReviewLMLéa Martin€0.19
DSP-124Invoice line items to CSVStructured extractionDoneNBNadia Benali€0.10
DSP-125Compare onboarding flows of 3 competitorsResearch briefFailedOHOmar Haddad€0.01
DSP-126Events from the conference agendaCompetitor summaryBacklogYDYasmine Demo€0.15
DSP-127Market sizing: B2B agents in MoroccoData extractionQueuedLMLéa Martin€0.06
0 of 36 rows selected
1 / 5
[08]

Empty states & plan gates

Illustration-free, precise and calm — with at most two actions. Upgrade prompts are inline and never block.

Nothing to review

Run a card to see results here.

You’re all caught up

Approvals, finished runs and mentions will show up here.

Timeline view is a Pro feature. See every run over time and spot slow or failing task types at a glance.

[09]

Dialogs & sheets

Dialogs for decisions, sheets for context. Destructive actions can require typed confirmation.

Dialog · Sheet · ConfirmDialog (typed confirmation) · confirm() · upgrade sheet
[10]

Toasts

Short confirmations and errors that explain what happened.

Sonner toasts — neutral surface, tinted icon per type, no exclamation marks
[11]

Loading

Skeletons shaped like the content they replace — never spinners inside content areas.

[12]

Motion & texture

Motion only where it conveys state. Everything respects prefers-reduced-motion.

Reading pricing page…Thinking…
Live status line — shimmer (brand) + running dot
Sunrise
Aurora glow (hero composer, upgrade sheet)
Textures: dot matrix · blueprint grid · grain
[13]

Icons

One icon family, one variant.

Kanban
DocumentText
Copy
Magicpen
Profile2User
Chart2
Setting2
Notification
SearchNormal1
Global
TableDocument
Sms
ShieldTick
TickCircle
CloseCircle
Danger
Play
Pause
Refresh2
Trash
AddSquare
More
ArrowRight
Crown1
MagicStar
Cpu
Code1
Flash
Timer1
Clock
Eye
Lock1

iconsax-react, Bulk variant everywhere (size-4 in dense UI, size-5 in nav), drawn in currentColor. Brand marks and the few missing glyphs live in components/brand:

[14]

Board & cards

The Kanban: 320 px columns tinted by status, cards with a type, a two-line title, a live status line while running and a quiet footer. Dragging lifts the card with a 2° tilt on a spring.

Research brief
High priority

Research brief: how the EU AI Act applies to B2B SaaS vendors

Q4 planCompetitors
1 Oct
OH
Backlog · ready (high priority, due date, labels)
Competitor summary
Running

Summarize Linear’s pricing page

Reading linear.app/pricing…
Pricing
1€0.02
YD
Running · animated dot + live status line
Draft email

Draft a follow-up email for Acme after the pilot demo

Client: Acme
1€0.03
NB
Awaiting approval
Competitor summary
Review

Competitor summary: Linear vs Jira vs Asana positioning

CompetitorsNeeds reviewPricing+1
32€0.07
YD
Review · selected (multi-select)
Data extraction
Failed

Extract every contact from the partner PDF into a table

The PDF is scanned and has no text layer. Upload a text PDF or an image.

11<€0.01
Failed · reason from the last run
No task type
Draft

Turn the 14 customer interview notes into themes

Draft · quick-created, no task type yet
KanbanCard — type + 2-line title, status pill, live status, labels (3 + overflow), footer: due, comments, attachments, runs, cost, reviewer
Research brief
High priority

Research brief: how the EU AI Act applies to B2B SaaS vendors

Q4 planCompetitors
1 Oct
OH
Research brief
High priority

Research brief: how the EU AI Act applies to B2B SaaS vendors

Q4 planCompetitors
1 Oct
OH
Drag layer — spring (300/30), 2° tilt, raised shadow; the source slot stays as a dashed placeholder

Backlog

0

No cards yet. Add one with + or press N.

Running

1
2 / 5 running
Competitor summary
Running

Summarize Linear’s pricing page

Reading linear.app/pricing…
Pricing
1€0.02
YD

Review

0

Nothing to review. Run a card to see results here.

KanbanColumn — 320 px, status tint, sticky header with count, WIP indicator on Running, per-column empty state
0 / 1 running1 / 1 running2 / 5 running5 / 5 running
WIP indicator — plan concurrency (Free 1, Pro 5); full turns amber and new runs wait in Queued
Draft
Searching the web…
Status pill — 200 ms crossfade on change (cycling) · LiveStatusLine — slides in without layout jump
Research brief Competitor summary Data extraction Draft emailLowNormalHighUrgentPricingCompetitorsClient: AcmeNeeds reviewQ4 plan
PricingCompetitorsClient: Acme+2
Task type icons · priorities · labels
Board status bar (boards home) — the mix of a board’s cards by status
[15]

Runs, traces & approvals

The agent works in the open: a live trace on a rail — plan, tool calls with their results, artifacts — a cost meter that ticks while it runs, and approvals that show the exact action before anything leaves the board.

QueuedStartingRunningAwaiting approvalCompletedPartialFailedCancelled
Run & card states · StatusPill
TraceTimeline · live (paired tool calls, source chips, collapsible payloads, live cursor) + CostMeter
From
send@dispatch.example
To
jane.cooper@acme-logistics.example
Subject
Your two-week pilot starts Monday 12 October

Hi Jane,

Thanks again for making time for Tuesday’s kickoff. As a next step, I’d like to propose the two-week pilot starting Monday 12 October.

Would Thursday at 10:00 work for a quick call?

Thanks, Nadia

Sent with Dispatch on your behalf.

Email · as the recipient will see it
ApprovalSheet · email exactly as the recipient sees it
client-acme
D

DispatchAPPnow

Acme pilot starts Monday 12 October. Two weeks with the ops team; weekly supplier report ready by Monday 9:00.

Slack message
ApprovalSheet · Slack message
POSThttps://hooks.acme.example/dispatch
Content-Type
application/json
{
  "event": "dispatch.output",
  "card": "Weekly supplier report",
  "rows": 42
}
HTTP request
ApprovalSheet · webhook request
subject

Next steps after Tuesday’s kickoff: theYour two-week pilot starts Monday 12 October

body

As a next step, I’d like to proposeconfirm the two-week pilot starting Monday 12 October.

Edit-then-approve · diff (F-64)

This run failed

Tool failure

None of the 3 sources could be read (blocked, empty or unreachable), so no cited brief could be written.

Two likely fixes

  1. 01Retry — most tool failures are temporary (a site timing out or rate-limiting).
  2. 02Replace the sources that failed with other public pages, or upload them as PDF.
Failure panel · reason + the two most likely fixes (F-47)
[16]

Artifacts & citations

What the agent produced, readable at once: documents with a headings nav and numbered source chips, virtualised tables with per-cell sources, JSON with its validation report, email drafts with variants — and a diff between two runs.

Linear charges $16 per seat on Business , Jira is free up to ten users , and the budget ceiling comes from the Q3 review .

linear.app[1]

Linear pricing — plans for teams of every size

What the page says

Business is $16 per user per month, billed annually. Everything in Basic, plus unlimited teams and Linear Insights.

Open source
q3-vendor-review.pdf[3]

q3-vendor-review.pdf

Page 4

Passage in the file

The team agreed to consolidate on one tracker before January, with a budget ceiling of €15 per seat.

Download q3-vendor-review.pdf
CitationChip — hover for the excerpt, click to open the source (URL preview or file location)
DocumentTableJSONEmail draftFile
Kinds

Issue trackers: what a 40-person team pays

Competitor summary · 3 sources

Summary

Linear is the most expensive per seat on its Business plan , while Jira stays free for the first ten users . Both fit under the €15 ceiling agreed in the Q3 review .

Key findings

  • Linear's Business plan adds Insights and unlimited teams.
  • Jira's Standard plan starts at $7.53 per user.

Next steps

  1. Run a two-week pilot with the design team.
  2. Decide before the January budget freeze.
Document — rendered Markdown, headings nav, rehype-slug anchors, inline citations

4 rows · 4 columns · 3 cited

#
Table — virtualised, sortable, filterable, resizable columns, per-cell sources
To
jane.cooper@acme.example
Cc
marc.diallo@acme.example
Subject
Pilot proposal — next steps for the supplier report

Hi Jane,

Thank you for Tuesday. As promised, here is the pilot plan: four weeks, the weekly supplier report automated, and a review with your warehouse leads at the end.

Would Thursday at 10:00 work for a 20-minute call?

Best, Nadia

Tone · warm · 41 words

Email draft — variants, copy subject / body / all
preset · contacts

array · 2 items

name:"Camille Roux"
email:"camille.roux@lumen-robotics.example"
company:"Lumen Robotics"
title:"Head of Partnerships"
name:"Tom Becker"
email:"tom.becker@northwind.example"
company:"Northwind Traders"
title:null
JSON — collapsible tree, table, raw with copy, schema validation report
8 words added3 words removed2 paragraphs changed
Issue trackers: what a 40-person team pays
Competitor summary · 3 sources
Summary
Linear is the mostpriciest expensive per seat on its Business plan, while Jira stays free for the first ten users. Both fit under the €15 ceiling agreed in the Q3 review.
Key findings
• Linear's Business plan adds Insights and unlimited teams. • Jira's Standard plan starts at $7.53 per user.
Next steps
1. Run a two-week pilot with the design team. 2. Decide before the January budget freeze. 3. Ask Linear for a nonprofit discount.
Run comparison — word-level document diff
1 added1 removed1 changed · 1 cellRows matched on “Company” · #1 → #2
CompanyWebsitePrice / seatFree plan
~Linearhttps://linear.app1614Yes
Jirahttps://www.atlassian.com/software/jira7.53Yes
−Asanahttps://asana.com10.99Yes
Mondayhttps://monday.com12No
+ClickUphttps://clickup.com7Yes
Run comparison — table cell diff (rows matched on Company)
[17]

Team, onboarding & settings

The quiet parts that make a workspace: seats against the plan, roles you can read at a glance, invitations that count down, a four-step checklist that ticks itself from real data, and settings cards with the audit trail behind them.

2/4

Getting started

From a first card to a reviewed artifact

2 of 4 done. Each step ticks itself as you go.

  1. [01] Done

    Create a card

    Pick a task type and describe the work. A research brief is a good first one.

  2. [02] Done

    Run it

    Drag the card to Running, or press ⌘↵. Watch the agent work in the live trace.

  3. [03] Next

    Review it

    Read the artifact and its sources, then approve it or move the card to Done.

  4. [04]

    Invite a teammate

    Work on the board together and share the reviews. Free includes 2 members.

Onboarding checklist · 2 of 4 · derived from real data
0/42/4
ProgressRing
OwnerAdminMemberViewer
Roles · RolePill / RoleSelect
Invitation expiry · 7 days, warning in the last 24 h
hugo@northwind.examplesara@northwind.examplesara@northwind(not a valid email)
EmailChipsInput · paste a list; invalid addresses in red
  • Changed a roleNadia Benali: Member → AdminYDYasmine Demo
  • Changed agent defaultsApproval policy: Always ask → Ask for side effectsNBNadia Benali
  • Rejected an agent actionsend_email · “Wrong recipient”OHOmar Haddad
Audit events
SeatsFree plan
2of 2 used
Members
1
Pending
1

All seats are taken. Pro has no member limit.

Seats Pro
7people
Members
5
Pending
2

Unlimited members on Pro. Five seats are included, then €9 per seat.

SettingsCard · SettingsRow

Label and help on the left, the control on the right; actions in the footer.

2 to 60 characters.

Roles

Who can do what
Capabilities of each workspace role
CapabilityOwnerAdminMemberViewer
Billing and deleting the workspace
Invite, remove and change roles
Integrations, custom tools, templates
Create boards
Create, edit and run cards
Approve or reject actionsMembers approve when assigned or by board default
View cost and usageMembers see the cost of their own cards
Comment
View boards, traces and artifacts
[18]

Usage, billing, demo & console

Nothing stops silently: meters that turn amber at 80 % and red at 100 % with the exact numbers and one way forward, a Stripe-like test-mode card block, the demo banner that counts runs and minutes down, and the calm tiles and pills of the superadmin console.

Runs this month

17/ 20

85%
3 runs left this monthResets 1 October
RunsHeroMeter · Free at 85 % · daily sparkline
Tokens421.6K357K in · 64.6K out
Boards1 / 1
All boards in use · Pro for more
Boards3 / 1
Boards beyond the first are read-only
StatTile · LimitMeter (capacity)
MeterBar tones · brand < 80 % · warning ≥ 80 % · danger at 100 % · tick at 80 %

17 of 20 runs used — 3 left this month

Runs pause at 20 until 1 October. Upgrade before then to keep agents working without interruption.

Compare plans
UsageLimitAlert · soft warning (80 %) and hard stop (100 %), never silent

By member

Yasmine Demo leads with 13 (52% of runs)

5 included · 2 extra × €90.00 / year

Test mode
IntervalToggle · SeatStepper (+€9 beyond 5) · CardBrandMark · TestModeBadge

Test mode. No real charge is made. Use any future date and any CVC.

Card information
CardFields · TestCardHint — Stripe-like block with a decline
Free and Pro plans compared
Compare plansFreePro
[01]Runs / month20Unlimited (fair use 2,000)
[02]Concurrent runs15
[03]Boards1Unlimited
[04]Members2Unlimited
[05]Task types5 built-in+ Custom task
[06]Model tierStandardStandard + Advanced
[07]ToolsSafe built-ins+ Side-effecting, custom HTTP
[08]Integrations—Slack, Notion, Drive, Email, Webhooks, API
[09]Templates & schedules—Included
[10]ExportsMD / CSV / JSON+ DOCX / PDF / XLSX
[11]History retention30 daysUnlimited
[12]ViewsBoard, List+ Timeline
[13]SupportCommunityPriority
PlanComparisonTable (spec §11)
DemoBanner · 2 runs left · spent · ended — RunPips
Runs today
22721 failed · 6 running · 0 queued
Failure rate, 7 days
10.4%of 237 runs · target under 5 %
Demo sessions, 24 h
813 % saved to an account
ProPro· endsFreeActiveSuspendedDemoDeletingSuperadminBannedDemo visitorUnverified
Console · KpiTile · PlanPill · WorkspaceStatusPill · UserStatusPill
[19]

Tools, integrations & API

What agents may touch, stated plainly: safe tools run, side effects wait for a person. Tool glyphs tinted by risk, a schema editor that validates as you type, a test console that shows exactly what the agent will receive, provider marks, webhook health at a glance and code samples that switch language together.

Safe
Agent calls a toolRuns immediatelyResult in the trace
Side-effecting
Agent proposes the action A person approvesAction runs
Safe runs, side effects wait — the contract every tool follows
SafeNeeds approvalApproval
OKErrorDenied
GETPOSTPUTPATCHDELETE
Tool glyphs, classification and outcomes
SlackNotionGoogle DriveGmailOutlookSMTPWebhooks
ConnectedTest modeErrorTest modeConnected
Integration marks and connection states
Calls · 30 days86Across all boards
Error rate4.7%4 failed calls
Denied3Stopped by a policy or the plan
Median duration496 msp50 of matching calls
Stat strip — above the catalogue and the audit log
JSON Schema · type object
  • in URL
Input schema editor — fields or raw JSON, validated as you type
200 OK184 ms212 Bapplication/json
GEThttps://crm.northwind.example/api/v2/contacts/search?email=ines%40acme.example
Accept
application/json
Authorization
••••••••
[
  {
    "name": "Inès Moreau",
    "company": "Acme",
    "stage": "customer"
  }
]
Test console — what the agent receives, the raw body, the headers
200410TimeoutRetrying
Webhook health — last 20 deliveries and their outcome
curl "https://dispatch.asrar.dev/api/v1/runs/$RUN_ID" \
  -H "Authorization: Bearer $DISPATCH_API_KEY"
Code samples — languages switch together across a page
[20]

Marketing kit

The public site speaks in the same system, with more warmth: a prompt composer as the hero, a looping live board, an approval sheet you can drive with A, E and R, coloured icon wells, blueprint rails with crosshair marks, and original art — sunrise scenes run through a dithering filter, halftone gradients and seeded node graphs. No stock photos.

[01]Product

Keep the final say.

Rainbow CTA · Dia gradient keyword · mono eyebrow

Press Enter to open the demo with this task. Shift and Enter adds a new line.

Try
Prompt composer — rotating typed placeholders, sends to /demo?prompt=
Icon wells (tile tones) · crosshair mark
DitherScene · dawn / medina
DitherScene · dusk / hills
DitherScene · night / medina
HalftoneOrb
NodeField (seeded, beams)
Blueprint linework
LiveBoard — the looping demo (poster frame with reduced motion)

Approval needed

Draft a follow-up email for Jane · run 1 · step 4

Awaiting approval
Tool
send_emailside effect
To
jane@northwind.example
Subject
Following up on the Northwind pilot

Hi Jane,

Thanks again for Tuesday. As promised, here is a two-week pilot for the ops team: three boards, forty runs and a short review every Friday. Would Thursday at 10:00 work for a 20-minute kickoff?

Best, Nadia

The run is paused until someone decides.

ApprovalMock — press A, E or R when focused
Billing interval toggle (radio group, arrow keys)

It reads the card’s inputs, writes a short plan, then works through it with tools: searching the web, reading pages and files, building tables. Every step appears in the card’s live trace, and the run ends with an artifact in Review: a document, a table, JSON or an email draft.

FAQ with [01] indices