Asteroid Design System

Colors

Semantic tokens — OKLCH color space, light & dark mode

Typography

Two voices — InterVariable for UI, Freight Big Pro for brand & editorial. IBM Plex Mono for coordinates.

Type roles: pick the role, not a size

Editorial tier — Freight Big Pro (use sparingly)

In-context example — empty state

Serif headline + Inter supporting copy + mono overline. The three voices playing together.

Buttons

Button face is lifted from flow, shadow at flow position — sinks on hover, presses on active

Iconography

Icons are a supporting voice — they reinforce an affordance or classify a type. Four working sizes, six semantic colors, and a strict anti-pattern list. See DESIGN.md §Iconographyfor the canon.

Time components never wear leading icons — the mono typography carries the signal. Cross-link: §Time & Duration.

Button Groups

Grouped actions with shared offset shadow

Badges

Tinted backgrounds with colored text — quiet labels, not loud fills

Admin Indicators

The affordance IS the signal — admin elements paint themselves amber. Badge stays as the page-header chip and the fallback for elements that already carry color. See DESIGN.md → Admin Indicators.

Tabs

Line tabs navigate a page from the canvas header. A SegmentedControl switches sub-views. Framed chrome tabs only nest inside modals and panels.

Forms and type roles

A form is sections of fields; a field is one label and one control. FormField encodes the anatomy and the aria wiring. Type roles replace ad-hoc sizes and weights. See DESIGN.md §Forms and §Type roles.

Surfaces

Drawers, the graph inspector and large dialogs share one panel anatomy. Drawers stack numbered sections. Status uses one badge with a map per domain. Pick the surface with DESIGN.md §Surfaces.

Entity drawer: Logins

The complete R5 drawer for one entity, built like the Logins page in the product. Create, view and edit share four numbered sections. Edit in the header edits them all behind one save bar. The address bar shows the URL each mode writes.

Surfaces in practice

The rules applied to real entities. Each frame is a working slice of the platform built only from the primitives above. Sheets, dialogs and alert dialogs open over the whole page, as they do in the product.

Dialogs

How to build a Dialog once the rules chose one (R1 confirms, R2 show once, R6 tasks). One shell, four sizes set by content: sm 0–1 input, md 2–8 fields, lg 9–16 fields in 2–4 sections or tabs, full files, diff and debugger only. See DESIGN.md §Modals.

Stat cards

Compact metric tiles — label + icon, value, helper. Used on /overview and /executions and reserved for future summary strips (billing, usage, scheduled). One row, 3 or 4 tiles, top of page.

Anatomy

Strip — 4 tiles · /overview

Strip — 3 tiles · /executions

Loading — full strip skeleton

Future use — billing strip (same shell, different content)

Same shell, swap the helper. Numeric metric → number value + breakdown helper. Set of related items → no value, badge children. Trend tile → same shell, badge as the helper (see kitchen-sink dashboard below).

Entity cards

How a domain entity (Profile, Integration, Notification, API Key, Schedule, …) renders anywhere in the platform. The same identity — icon, name, type, meta — at three densities: full on index pages, compact in side panels and drawers, and chip as an inline reference with a popover. Detail lives in a vertical stack of named body sections — and only those sections — so two cards for different entity types still read as members of the same family.

People and organisations

Every mention of a user or an org uses one chip. A user is a circle and an org is a rounded square, so the shape says which one it is. The colour comes from a hash of the email for a user (the ID when there is no email) and of the ID for an org, so the same person or org has the same colour on every page. A profile picture replaces the initials. API keys, services and unnamed people use a neutral tile. The lead cell of a row uses the same avatar with the name and one muted line.

Page shell

One layout: the shell (apps/platform/src/components/shell). The rail sits on the bg-sidebar frame. An inset rounded canvas holds the docked Astro thread and the page. Every page but Home and Astro's page opens with the canvas header: a context row (crumbs + actions) and a nav row (line tabs + controls). Routes render inside it through Page, PageTabs and PageDetailHeader. The rail names the page, so the title slot is usually empty.

Anatomy · AppShell with the thread docked

Search

HomeCatalog

Insurance Scraper

Builder

Deploy

Executions

LoginsEnvironmentsConnections

Recents

Fix the login stepWhy did 92890146 fail?

Astro

Why did 92890146 fail?

The login step timed out. The portal now shows a cookie banner over the sign-in button. I can add a step that dismisses it.

Ask Astro…

Run

Publish

Builder graph · flat, full-bleed

frame

bg-sidebar · the page behind the rail and the canvas. Mobile swaps the rail for ShellTopBar + a sheet.

rail

ShellRail · rows text-xs, idle text-muted-foreground hover:bg-accent, active bg-primary/5 text-primary font-medium. No headings: dividers split the sections. The workflow scope pill heads Build / Run / Monitor and tints their frame bg-primary/[0.04]. Recents lists chats. Folds to icons.

canvas

AppShell inset lg:m-2 lg:rounded-xl lg:border. A ResizableHandle splits it between the thread and the page canvas bg-light-muted. Cards bg-card lift off it.

header

ShellCanvasHeader on DetailHeader (bg-light-muted border-b). Context row h-9: crumbs + actions. Nav row h-9, border-t: line tabs left, controls right. Global pages collapse to one row. Home has none.

thread

ShellThread on bg-background, under ShellAstroHeader. Docks left by default, can swap sides, go full screen or hide. Hidden, the header shows an Astro opener.

tabs

Page-level: line tabs in the nav row (PageTabs / NavTabs). Framed chrome Tabs only nest inside modals and panels.

The canvas page shapes

A · Plain

Connections, Environments, API keys

Search

HomeCatalog

WorkflowsAll

Builder

Deploy

Executions

LoginsEnvironmentsConnections

Recents

Fix the login stepWhy did 92890146 fail?

Astro

New connection

SalesforceConnected 2d ago

SlackConnected 7d ago

GmailConnected 21d ago

One header row. The rail names the page, so the row holds the Astro opener and the primary action at its end. The page body is cards on the canvas. Page drops its title when the header names the route.

B · Tabbed

Logins, Insights, Admin → Models

Search

HomeCatalog

WorkflowsAll

Builder

Deploy

Executions

LoginsEnvironmentsConnections

Recents

Fix the login stepWhy did 92890146 fail?

Astro

New profile

PageTabs → the header row. PageTabsList portals line tabs into the header's tab slot. Tab-scoped actions sit at the row's end. Content stays on the canvas. No chrome strip, no inverted corners.

C · Home

/ (ShellHome)

Search

HomeCatalog

WorkflowsAll

Builder

Deploy

Executions

LoginsEnvironmentsConnections

Recents

Fix the login stepWhy did 92890146 fail?

Good morning, Ed.

8 workflows ran 2,840 executions overnight.

Recent workflows

Insurance ScraperRan 4m ago

Claims IntakeRan 1h ago

No canvas header. Home is its own header: an editorial greeting, then Recent workflows, Work from your tools, Learn. Astro's page shares its frame (SHELL_PAGE_FRAME).

D · Detail

Organisation, Batch, workflow pages

Search

HomeCatalog

WorkflowsAll

Builder

Deploy

Executions

LoginsEnvironmentsConnections

Recents

Fix the login stepWhy did 92890146 fail?

Edit

TableChart

PageDetailHeader → both rows. Crumbs start at the list you came from; badges and actions end the context row. NavTabs for the entity's sections, a SegmentedControl for the active tab's sub-views. Workflow pages build the same two rows from the URL (see Anatomy).

Title rule

Tabs: pick the API by where the tabs sit

Create / Start Surface

The Start page shape: a canvas-first decision surface for creating a workflow, onboarding a user, or choosing a first template. One editorial composition may span the primary composer and the supporting template rail, but everything below returns to compact Inter UI.

Canonical ingredients: composer first, primary-tinted interactive controls, neutral/card surfaces, compact learning cards, and a collapsible supporting rail. The rail dimensions are composition constraints, not global spacing tokens.

Empty states

Say what is missing and what to do. Page scale on an empty page or tab;size="sm" inside tables, cards and panels. Filtered-to-nothing offers to clear filters.

Skeletons

Loading chrome that mirrors the final layout. Bars use bg-muted and a 1.5s opacity pulse. Never a single tall blob. Never primary-tinted placeholders. See DESIGN.md §Skeletons.

Kitchen Sink — Workflow Dashboard

A realistic dashboard combining all components

Kitchen Sink — Execution Activity

A realistic execution progress feed with collapsible turns, actions, user messages, and chat input

Kitchen Sink — Astro Chat

The AI builder assistant conversation with messages, function calls, reasoning blocks, and rich input

# Updated 2FA node configuration
- action: wait_for_selector
  selector: ">>> #totp-input"
  timeout: 10000
- action: type
  selector: ">>> #totp-input"
  value: "{{totp_code}}"

Time & Duration

Single rule, applied everywhere a moment-in-time is shown. Always relative on screen, single-letter compact, monospace, tabular-nums. Hover for the absolute moment in the user's timezone plus UTC.

See DESIGN.md §Time & Durationfor the convention table and rationale.

Truncated text

Single-line labels that can grow arbitrarily long — workflow names, profile names, integration names, file names, schedule labels — get the same treatment everywhere: cap the visible width, ellipsize, and mount a tooltip with the full label only when the visible text is actually clipped. The conditional tooltip is the whole point — a tooltip on an already-visible label is noise.

Use <TruncatedText> from @workspace/ui/components/truncated-text for the standard case. Drop down to useIsTruncated from @workspace/ui/hooks/use-is-truncated only when you need to control the tooltip's open state externally (e.g. suppress it while a sibling popover is open). See DESIGN.md §Tables → Truncated text for the full rules.