signal components

Every component in its statesGeist · Geist Mono · Remix IconDark by default

Foundations

Every value on this page comes from these tokens. Dark is the default; light follows the switch or the OS.

tokens.css

Surfaces, lines, text and meaning

--bgbg
--surfacesurface
--surface-2surface-2
--hoverhover
--selectedselected
--lineline
--line-strongline-strong
--texttext
--text-2text-2
--text-3text-3
--accentaccent
--okok
--warnwarn
--badbad
--idleidle

Type: seven steps, mono for anything an operator compares

Overview--type-title600 20/28 Geist
Latency and errors--type-heading600 14/20 Geist
Stops all 6 instances until resumed.--type-body400 14/20 Geist
9c2e71b · 142 ms · 14:19:06 UTC--type-data400 13/20 Geist Mono
p95 latency--type-label500 12/16 Geist Mono
SLO 250 ms · 30d budget 81% left--type-small400 12/16 Geist
2,481--type-stat500 24/32 Geist Mono

Space on a 4px scale · radius 2px everywhere, 4px on dialogs · rows and controls 32px, 44px on phones

--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
--space-8

Buttons

One filled primary per view. Danger is an outline until it is the confirm button in its own dialog.

.ui-button

Variants

primary
secondary
ghost
danger

States

hover
focus
disabled
loading
primary disabled

Sizes and icon buttons

sm · 24px
default · 32px
lg · 40px
icon
ghost icon
with shortcut

Text fields

A visible label, help under the field, the error in words. Values that are identifiers are mono.

.ui-field .ui-input .ui-select .ui-textarea

States

default
hover
focus
error
disabled
read only

Adornments and other fields

with icon
with suffix
select
textarea

Choices

Switches act at once; checkboxes and radios wait for Save.

.ui-choice .ui-radio-group .ui-switch

Checkbox

checked
unchecked
focus
disabled
with help

Radio and switch

Restart policy
radio group
switch: on, off, focus, disabled

Slider and combobox

The slider always shows its value in mono beside the track; set --value to the filled share.

.ui-slider .ui-combobox

Slider

default
focus
disabled

Combobox: a native input list

combobox
error

Selection

Segmented for a view setting, chips for filters that combine, tabs for panels at the same level.

.ui-segmented .ui-chip .ui-tabs .ui-filter-bar

Segmented and chips

segmented
chip: pressed, default, hover, disabled

Tabs (arrow keys move)

Service, commit, author and regions for this deploy.

Filter bar

8 of 214

Overlays

Floating layers are the only things with a shadow. Try the live ones; the open states are drawn below them.

.ui-menu .ui-tooltip .ui-dialog .ui-sheet .ui-toast .ui-command

Live

menu
tooltip
dialog
sheet
toast
command

Open states

menu, open
Settings saved

api-gateway picks them up on the next deploy.

tooltip and toast
dialog, open

Feedback

Status is always a mark and a word. Alerts tint the surface; the icon carries the status color.

.ui-alert .ui-status .ui-badge .ui-skeleton .ui-empty

Alerts: info, ok, warn, bad, neutral

search-indexer is deploying 7d33e2a to fra1.

Rolled back to 9c2e71b. 6 of 6 instances healthy.

Build minutes are at 90% of the plan. Overage is $0.008 a minute.

Health check /healthz failed 3 times on iad1-2.

Variables changed. They apply on the next deploy.

Status, badges, loading

HealthyDegradedFailedDeployingSleeping
status: mark plus word; live pulses
MonthlyPreviewVerifiedSEV-2SEV-1
badge tones
skeleton, loading

Empty state

No services yet

Your first service shows up here when its first deploy goes out.

Progress and meter

Progress is cobalt because it is work in motion. Usage is grey until it nears the limit, then amber, then red.

.ui-meter .ui-progress

States

Build image62%62%
progress
Shifting trafficwaiting
indeterminate
Instance hours31,904 / 50,000 h64%
meter, under
Log retention412 / 500 GB82%
meter, warning
Build minutes5,912 / 6,000 min99%Overage starts in about 4 hours.
meter, over

Data display

Figures in mono with the unit beside them, quieter. Avatars are square like everything else.

.ui-avatar .ui-card .ui-stat-strip .ui-data-list .ui-accordion

Identity and cards

MODR
avatar, large, group

payments-worker

4 instances in iad1. Queue depth above 5,000 for 12 minutes.

card

View runbook

Queue backlog: scale workers, then drain.

link card

Stat strip

Requests
2,481req/s
62%62% of 4,000 req/s capacity
p95 latency
168ms
81%SLO 250 ms · 81% of 30d budget left
5xx error rate
0.62%
18%SLO 0.5% · 18% of 30d budget left

Facts and details

Service
api-gateway
Commit
9c2e71bmain
Author
Dani Reyes
Started
2026-10-28 14:19:06 UTC
data list
Why is the deploy waiting?
Health checks must pass on 2 instances before traffic shifts.
Who gets paged?
The payments on-call rotation in PagerDuty.
accordion: open, closed

Lists and timeline

Selected rows take the same tint as the current nav item. Timelines read who, what, when on one line.

.ui-list .ui-list-item .ui-timeline .ui-timeline-item

List: building, selected, hover

Timeline

  1. Dani Reyes rolled api-gateway back to 9c2e71b

    6 of 6 instances healthy in 1m 52s

  2. Alert p95 latency above 300 ms fired on api-gateway

  3. Dani Reyes deployed a3f9c1e

Table

32px rows, mono numbers right-aligned, sortable headers. The second row is selected.

.ui-table-wrap .ui-table

Sortable, with a selected row

ServiceStatusRegionCPUp95
api-gatewayHealthyiad1 fra141%142 ms
payments-workerDegradediad187%1.41 s
search-indexerDeployingfra112%—
fx-rates-syncSleepingiad10%—

Code

Inline code and blocks share the data face. Log levels take the status colors; timestamps stay quiet.

.ui-code

Inline, command, log

Set PORT or the service listens on 8080.

Deploy from the CLI
# link the directory, then deploy
outpost link ledgerline/payments-core
outpost deploy --service api-gateway --env production
api-gateway · iad1-3 · stderr
13:21:07.412 WARN  gc pause 412ms heap=1.84GiB
13:21:09.006 ERROR POST /v1/transfers 504 upstream timeout
13:35:44.270 INFO  rollback complete 9c2e71b 6/6 healthy

Charts

Lines for rates over time, bars for counts per interval, one shared time axis. Cobalt is the focused series; everything else is grey until it breaks a threshold.

.ui-chart .ui-chart-legend .ui-chart-axis

Latency over errors on one axis

  • p95
  • p50
  • Deploy
  • UTC
a3f9c1e

5xx per 15 min112 total

App shell

This page is itself the shell: sidebar, top bar, then main. Under 768px the sidebar becomes a drawer behind the menu button.

.ui-shell .ui-sidebar .ui-topbar .ui-page-header .ui-section

Page and section heads

Overview

1 service degraded7 servicesiad1 · fra1

page header: one h1, its line, its actions

Services

All services
section head

Settings

Label and help on the left, the control on the right; destructive actions live apart behind a red hairline.

.ui-settings-group .ui-settings-row .ui-danger

Group, row, danger zone

Health checks

New instances take traffic only after they pass.

Must return 200 within the timeout.

Autoscale

Add an instance when CPU stays above 70% for 2 minutes.

Last changed by Mara Okafor, Oct 27

Danger zone

These act on production immediately.

Delete service

Removes api-gateway and its 214 deployments.

Sign in

A centered column on the page background: mark, title, providers, divider, fields, legal line.

.ui-auth

Error state

Sign in to Outpost

Deploy, watch and roll back your services.

or with email

That email and password do not match.

Full page: blocks/sign-in.html

Delete api-gateway?

fix(gateway): cap idempotency cache

Deployment
dpl_4k9xq2m7
Commit
9c2e71b
Duration
1m 48s
↑ ↓ to move · Enter to run · Esc to close