Design System

Design System

A living sketch of tokens and primitives. Use this page to validate new UI patterns before rolling them out.

Color Tokens

Surface and action colors from the CSS variables.

background
var(--background)
foreground
var(--foreground)
card
var(--card)
muted
var(--muted)
primary
var(--primary)
secondary
var(--secondary)
accent
var(--accent)
border
var(--border)
success
var(--success)
warning
var(--warning)
info
var(--info)

Typography

Scale and usage hints.

Display 24px / Semibold
Title 20px / Semibold
Body 16px / Medium
Body 14px / Regular
Caption 12px / Muted
Overline 10px

Buttons

Primary, secondary, and contextual actions.

Badges

Status and metadata chips.

DefaultSecondarySuccessWarningInfoAccentDestructiveOutline

Inputs

Forms and configuration surfaces.

Tabs

Segmented navigation for adjacent contexts.

Table

Default table style for lists.

NameStatusUpdated
Trustpilot Scraperrunning2m ago
Site Auditcompleted1h ago

Alerts & Empty States

System feedback and zero-data states.

Heads up

Default alert surface.

Warning

Workflow is approaching its rate limit.

Failure

Step failed. Review logs before retrying.

No jobs are currently running.

Toasts

Transient notifications that auto-dismiss.

Workflow saved

Changes have been applied.

Secret rotated

Rotation succeeded, but no secret was returned.

Node Gallery

Sample node treatments with current tokens.

Overlays

Tooltip, popover, and modal layouts.

Inline help text
Workflow info

Last edited 2 minutes ago by Admin.

Confirm action

Are you sure you want to dispatch this workflow now?