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.

Platform type scale — Inter

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 §Iconography for 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

Chrome-style tabs — active tab uses bg-background against a muted bar surface, with inverted SVG corners

Modals

One shell, four sizes (sm / md / lg / full), five fixed slots: header → optional persistent identity strip → optional tab strip → body → footer. Tabbed modals share the chrome-strip + chrome-tab pattern with §Page shell — a modal-with-tabs is structurally a tiny chrome page. See DESIGN.md §Modals for the canon.

Form Elements

Inputs, labels, and form patterns

Cards

Content containers with header, body, footer

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 (Agent 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.

Page shells

Two underlying surface modes — canvas (used by Plain, Hero, and Start) and chrome (used by Tabbed and Detail) — produce the platform page shapes. Canvas pages get a bg-light-muted well with bg-card surfaces lifting off it. Chrome pages drop the canvas and let a bg-sidebar strip + tabs sit directly above a single bg-background content panel — the active tab is the only seam between chrome and content. Sidebar carries the page label; the title slot is reserved for the active tab (Tabbed/Detail), the editorial composition (Hero/Start), or nothing at all (Plain).

Anatomy — canvas mode vs chrome mode

The core shell shapes

Title rule

Tabs — pick the API by semantic, not by look

Both render the same chrome-tab visual — same surface, same shoulder, same inverted corners on the active tab. The split is about what the tabs mean, not how they look.

Create / Start Surface

The Start page shape: a canvas-first decision surface for creating an agent, onboarding a user, or choosing a first workflow. 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 State

Guides users when there's no data

Kitchen Sink — Agent 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 & Duration for the convention table and rationale.

Truncated text

Single-line labels that can grow arbitrarily long — agent 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.

Sans voice — Futura PT → Google Fonts Inter → InterVariable

Futura is geometric — clean but anonymous, reads more "brand" than "UI". Google-Fonts Inter is the industry workhorse but its stripped build renders flat. InterVariable with the tuned features is recognizably Inter but with measurable character: I gains serifs (cv08), l a tail (cv05), 1 disambiguates from I / l (ss02), 0 is slashed (zero).

Inter character inventory — Era 2 → Era 3

Brand / editorial voice — Futura (same sans) → Iowan fallback → Freight Big Pro

In context — dashboard hero across the three eras

Correction to an earlier note on this page: Recoleta (Latinotype) is not on Adobe Fonts — it's licensed via MyFonts / Fontspring, so the original .preview-recoleta class was silently falling through to Iowan. The four-column comparison below uses Quincy CF as a free, Fontshare- hosted stand-in from the same warm Cooper-derived humanist-serif category.

Typography archive · serif-candidate bake-off

Four voices side-by-side

The four candidates we've taken seriously for the editorial / hero voice. Futura PT was the Era 1 single-voice sans (no dedicated serif at all). Freight Big Pro is the live choice and now loads from the Adobe kit referenced in DESIGN.md. Quincy CF is a free Recoleta-alike on Fontshare. Fraunces remains the strongest non-Adobe alternate we considered. Same sample text, same size, same weight — the only variable is the typeface.

Editorial headline — "A quiet weekend, everything held."

Pangram at reading size — the full alphabet + numerals