Design system
Every part Signal ships, rendered with real content: 19 sections, 19 primitives, and 73 tokens per mode.
src/components · src/components/ui · src/theme.css · src/fonts.ts
73 variables per mode in src/theme.css: 46 colour and application roles, 24 type roles, and three shape and weight roles.
--background
--foreground
--card
--card-foreground
--primary
--primary-foreground
--secondary
--secondary-foreground
--muted
--muted-foreground
--accent
--accent-foreground
sunken
--surface-sunken
raised
--surface-raised · --shadow-raised
Selected evidence
--selection · foreground · border
info
role · soft · border
solid · foreground
positive
role · soft · border
solid · foreground
warning
role · soft · border
solid · foreground
critical
role · soft · border
solid · foreground
--primary
--primary-hover
--primary-active
--surface-tint
--font-text · IBM Plex Sans
Aa Bb Cc 0123
--font-mono · IBM Plex Mono
Aa Bb Cc 0123
--radius · --radius-inner
8px outer, 5px inner, never the other way round
--border
one hairline weight, everywhere
--ring · --shadow-raised
2px ring offset 2 · shadows never use --background
Each section rendered once, at the width and with the content it ships with.
Sticky nav: wordmark, five links, a star chip and two buttons. Below md it collapses into a JS-free details menu.
The home masthead: badge, headline, install row and a live sgl watch transcript that overhangs the container.
When p95 moves, the commit that shipped 24 seconds earlier is already next to it.
brew install signalhq/tap/sgl8.4 MBfree for solo devs · no card · self-host the collector
$ sgl watch --env prod --since 15m prod · us-east-1, eu-west-1 · 3 services ok api-gateway p95 184ms err 0.02% ▁▂▁▁▂▁ ok checkout p95 221ms err 0.05% ▁▁▂▁▁▁ !! payments-worker p95 912ms err 1.31% ▁▂▄▆██ ▲ regression payments-worker · p95 +611ms baseline 301ms (24h rolling) onset 14:02:11Z · 11m ago deploy 8f21c4e "retry budget for webhooks" @nadia · 24s before onset → sgl trace payments-worker --deploy 8f21c4e
The hero's regression narrative, drawn: a p95 series flat in its 24h envelope, the deploy marker, then the step up 24 seconds later. Inline SVG computed from two point arrays, token-coloured, server-rendered and static.
Eight data sources on a full-bleed hairline grid, one lucide glyph each, describing what the source does.
No proprietary agent: anything that speaks OTLP works the day you install it, and the rest pipes through sgl ingest.
Four cards carrying nine lines of real YAML, TypeScript and shell, a named outcome, then three supporting claims.
What you get
Signal is a CLI first: everything you can click, you can also review in a pull request.
Every release lands on the timeline with its sha, author and diff. When a regression starts inside a deploy window, Signal attributes it before you open a dashboard.
# runs after your existing deploy step
- name: Mark deploy in Signal
uses: signalhq/mark-deploy@v2
with:
service: payments-worker
env: prod
sha: ${{ github.sha }}
by: ${{ github.actor }}
fail-on-regression: trueOne import at the top of your entrypoint. The SDK wraps HTTP, gRPC and your database driver, and adds nothing to the request path but a buffer write.
import { init } from "@signal/node";
init({
service: "payments-worker",
env: process.env.SIGNAL_ENV,
// all errors, half the slow ones, 1% of the rest
sample: { errors: 1, slow: 0.5, baseline: 0.01 },
endpoint: process.env.SIGNAL_ENDPOINT,
});Thresholds are code, reviewed in pull requests, versioned with the service they watch. No click-ops, no drift between staging and prod.
import { alert, p95 } from "@signal/config";
export default [
alert({
when: p95("checkout.submit").above("400ms"),
for: "5m",
notify: ["#oncall-payments", "escalate:tier1"],
}),
];The same query language in the CLI, the dashboard and the API. Pipe it to jq, commit it as a saved view, or page it into an incident doc.
$ sgl query 'p95(latency) by route' \
--service checkout --since 24h
route p95 n 24h
/checkout/submit 412ms 18.2k +38%
/checkout/quote 121ms 44.9k -2%
/checkout/receipt 88ms 12.1k +1%
/checkout/webhook 118ms 6.4k -1%
/checkout/refund 204ms 2.1k +4%“Time to attribution went from forty minutes to under three.”
Head sampling throws away exactly the requests you needed. Signal decides after the fact: every error, every p99 outlier, a slice of the boring remainder.
sgl config sampling
The collector is a single static binary: no queue, no cluster to babysit. On the self-hosted plan raw traces never leave your VPC.
sgl collector verify
Priced per ingested gigabyte after sampling, not per host and not per seat. Estimate it against your current volume before you commit.
sgl cost --estimateestimator
Three plans on one price model, then the definition of a billed gigabyte beside the ledger of things that are never metered.
Plans
Ingested gigabytes after sampling is the only meter on the account.
$0
Up to 5 GB a month after sampling. There is no expiry on it.
$0.42/ GB
Every gigabyte after sampling. No minimum, no seat count, no host count.
Aggregates only
The same $0.42 meter, on what the collector forwards. Raw spans never leave your VPC.
The collector measures the compressed bytes it accepts, after your sample rates have already thrown work away. A span you never sent is a span you never pay for.
Retention is included rather than metered: thirteen months on the usage plan, thirty days on the free tier. Storing a gigabyte for a year costs the same as storing it for a week.
Run sgl cost --by service to see which service is spending it.
A client island. Raw volume and sample rate go in, the invoice arithmetic comes out; the default state is the same 107.1 GB and $44.98 the sgl cost transcript prints.
Estimator
Every figure below is the arithmetic on your invoice, not a range.
Whole gigabytes, 0 to 2,000
Sample rate
Sampling is set per service in signal.config.ts. Every error and every p99 outlier is kept whatever the rate, so the slice you drop is the boring remainder.
Estimated month
107.1 GB at $0.42/GB
Up to 5.0 GB a month after sampling costs nothing. Above that line every gigabyte is billed, including the first five.
Already sending spans? Run sgl cost --estimate and it reads the last thirty days off your own account.
The company surface: four contact routes with stated response times, a full-bleed operations band, and the legal minimum at #legal.
Support
Pick the one that matches the problem and it reaches an engineer, not a queue.
Instrumentation that will not attach, a query that returns nothing, a sample rate that reads wrong. Paste the output of sgl doctor and skip the first three replies.
Vulnerability reports and coordinated disclosure. Encrypt with the key at fingerprint 3C7A 55E1 90BD 4F26 if the report contains customer data.
Ingest is dropping spans, alerts are not firing, the collector will not start. Usage-plan accounts page an on-call engineer directly.
Invoices, VAT numbers, purchase orders and the one question everyone asks: which service spent the gigabytes. Include the invoice number.
support and billing Mon to Fri, 09:00 to 18:00 CET · incidents and security any hour, any day
terms and privacy · last updated 6 Aug 2026
Requests for the DPA, the sub-processor list or a deletion confirmation go to legal@signal.sh. Account deletion is also a command: sgl org delete --confirm.
Dated release entries with icon-marked tags. Shown here in preview: variant='full' swaps the three latest for all eight, adds the migration transcript and the tag filter.
Changelog
216 releases since 2024, each written by the person who shipped it.
One incident view now keeps the selected deploy, trace comparison, failure groups, and verification receipt in order.
Processes that never restart drifted above their configured baseline rate, up to 4x on workers older than a week. Thanks to @tvoss for the reproduction.
An alert now arrives carrying the three slowest traces that triggered it, so the notification is the first step of the investigation rather than a reason to go find one.
Incident identity and p95 impact. Canonical resolved state plus every status variant from server props.
One deploy, two UTC windows, and the trace evidence that isolated the retry loop.
The rollback held through a complete five-minute verification window.
Incident p95
912 ms
+611 ms
Current health refreshed 14:31:09Z.
Investigating
Impact is confirmed. The cause is still open.
Identified
The retry budget in 8f21c4e matches the onset window.
Monitoring
The rollback is applied. The verification window is still open.
Resolved
The rollback held through a complete five-minute verification window.
Aligned trace evidence with exact table equivalence, plus honest missing-span and partial-window variants.
Trace evidence
The retry span moved by 959 ms while database and flush time held.
http.server
463 ms → 1,284 ms
webhook.retry
190 ms → 1,149 ms
pg.query
118 ms → 118 ms
signal.flush
2 ms → 2 ms
| Span | Baseline | Incident | Change |
|---|---|---|---|
| http.server | 463 ms | 1,284 ms | +821 ms |
| webhook.retry | 190 ms | 1,149 ms | +959 ms |
| pg.query | 118 ms | 118 ms | +0 ms |
| signal.flush | 2 ms | 2 ms | +0 ms |
Aligned traces
4 named spans share one 0 to 1,284 ms scale.
Missing span
1 duration is absent and remains missing.
Partial window
2,410 of 2,437 expected traces were complete.
Exact release configuration before, during, and after the incident, including absent and reverted variants.
Release evidence
The selected release raised retry attempts, backoff, and the total budget in one commit.
| Field | Before | 8f21c4e | Rollback |
|---|---|---|---|
| retry.maxAttempts | 1 | 3 | 1 |
| retry.backoff | 0 ms | 380 ms | 0 ms |
| retry.budget | 250 ms | 1,200 ms | 250 ms |
| retry.scope | failed webhooks | failed webhooks | failed webhooks |
Selected deploy
8f21c4e changed attempts, backoff, and retry budget.
No diff
No configuration field changed in the selected release.
Reverted
8f21c4e remains the cause record; 4b9e2d1 restores the prior values.
A semantic ordered list of normalized UTC evidence, with dense and grouped server variants.
UTC sequence
Times are normalized to UTC. Collector skew was +3.2 seconds before correction.
8f21c4e by @nadia changed the webhook retry budget.
payments-worker p95 left its 24h rolling envelope 24 seconds later.
The release-window distance ranked 8f21c4e above two older deploys.
Aligned traces isolated 1,149 ms inside webhook.retry.
4b9e2d1 restored the previous retry budget.
Five complete minutes held p95 at 309 ms and errors at 0.05%.
Dense timeline
Six UTC events remain in one ordered reading sequence.
Grouped timeline
Deploy, diagnosis, and recovery stay grouped without changing order.
Ranked failure signatures with exact counts and shares, plus empty and uncertain variants.
Failure groups
Complete traces are ranked by matched signature, with counts and shares kept visible.
Aggregation
1,412 · 58.6%
Three attempts with 380 ms backoff dominate the incident trace.
612 · 25.4%
The 1,200 ms budget ends before the third attempt returns.
386 · 16.0%
The receiver times out after the worker has already retried.
Ranked clusters
Three named groups account for all 2,410 complete traces.
No clusters
No complete traces matched the selected window.
Uncertain ranking
2,410 of 2,437 traces are complete (98.9%), below the 99.5% confidence threshold; 27 partials are excluded.
Rollback, resolved time, verification, and separately refreshed health, plus monitoring and rolled-back variants.
Resolution receipt
Rollback, verification, and current health are separate facts with separate timestamps.
Current health: healthy
Health refreshed 14:31:09Z UTC.
Resolved
A complete verification window records the recovery.
Monitoring
The rollback is applied; the verification window remains open.
Rolled back
The rollback is recorded without declaring recovery.
Six priced objections, on ui/accordion-disclosure. The first answer is open so the frame photographs both states of the row; the rest are closed, which is how /pricing serves them.
Questions
Six answers to the questions the estimator raises and the plan cards cannot hold.
Every ingested gigabyte is billed at $0.42, including the first five. Nothing stops collecting and no service is throttled: the invoice grows and the timeline stays complete.
Every error and every p99 outlier is kept whatever the rate you set in signal.config.ts. What a 10% rate drops is the remainder: successful requests inside the normal latency band.
Yes, on every plan including the free tier. The collector is one binary and it speaks OTLP, so a service already exporting spans needs one endpoint changed.
Thirteen months on the usage plan and thirty days on the free tier. Close an account and every span is deleted within thirty days, backups included.
sgl export writes the selected window to newline-delimited JSON, at full fidelity, with no rate limit on the first export of a month.
Neither. Usage is billed monthly in arrears and the plan can be closed from the CLI on any day of the month.
The closing panel: headline, two buttons, an init command and four answers to cost, risk and effort.
Install the CLI, point one service at the collector, and the next deploy annotates itself.
sgl init --service payments-workerPage-scale: sidebar, article, on-this-page rail and the full-bleed payoff band. Shown here in variant='quickstart'; variant='cli' swaps in the seven-command reference and its own transcript.
This guide takes a Node service from zero to a deploy-annotated latency timeline. It takes about ten minutes, and nothing here is reversible in a way that should worry you — the SDK is a no-op until an ingest key is present.
The CLI is a single binary. It is the same tool your CI uses, so install it the same way in both places.
brew install signalhq/tap/sgl
# or: curl -fsSL https://get.signal.sh | sh
sgl --version
# sgl 2.4.0 (darwin/arm64)A service is the unit everything else hangs off: spans, alerts, deploys and cost. Create one per deployable, not per repo.
sgl login
sgl service create payments-worker --env prod
# wrote SIGNAL_INGEST_KEY to .env.local
# scoped to payments-worker/prod
# rotate with: sgl key rotateThe SDK wraps HTTP, gRPC and your database driver. It has to load before your application code, which is what the --import flag is for.
import { init } from "@signal/node";
init({
service: "payments-worker",
env: process.env.SIGNAL_ENV ?? "dev",
});{
"scripts": {
"start": "node --import ./instrument.js dist/app.js"
}
}Running the collector yourself? Set SIGNAL_ENDPOINT before this step. In self-hosted mode the SDK never opens a connection to signal.sh — the checks to run first are under sgl collector.
This is the step that makes the rest of Signal worth having. Run it at the end of your deploy job, after traffic shifts.
sgl deploy mark \
--service payments-worker \
--env prod \
--sha "$(git rev-parse HEAD)" \
--by "$CI_ACTOR"Once a deploy and a few thousand spans are in, the timeline can attribute a change to a release. Add --json to the same command to gate a rollout in CI.
sgl watch --env prod --since 15m
sgl watch --env prod --since 15m --json | jq '.regressions'A local request proves the middleware emitted a trace before you deploy anything.
$ curl -i http://localhost:3000/checkout/health HTTP/1.1 200 OK content-type: application/json {"ok":true,"traceId":"local-7ce91b2a"}
One local request, one trace ID: the middleware emitted a span before anything was deployed.
The library's disclosure in Signal's recipe: a ruled row, a chevron that turns on the same 250ms clock as the height, and Escape from inside the panel collapsing it onto its summary. The header's burger runs on the same skeleton with its own recipe.
closed
Every ingested gigabyte is billed at $0.42, including the first five.
Yes, on every plan including the free tier.
open
Every error and every p99 outlier is kept whatever the rate you set in signal.config.ts. What a 10% rate drops is the remainder: successful requests inside the normal latency band.
Thirteen months on the usage plan, thirty days on the free tier.
Under prefers-reduced-motion the height tween is off and the panel is simply there. The marker turns on the native [open] attribute rather than on data-state, which the browser writes one task later.
The library’s field shell in Signal’s recipe: one label, one control, one supporting line, and the aria-describedby arithmetic behind it. Precedence is error, then success, then description — a field says one thing at a time, and what it says while wrong is what to do about it. The controls stay native and stay Signal’s.
rest
The value sgl reports under, one per deploy target
Appended to the resolution receipt, plain text
invalid
Sample rate is a percentage. Pick a whole number from 1 to 100.
Both meanings hold: the critical edge and the ring outside it.
valid
Test page delivered to #payments-oncall
read-only
Read-only here. Rotate it with sgl keys rotate.
disabled
Fixed at 7 days on Free; Team sets it per service
submitting
The control arrives through a render prop, so the id, the aria-invalid and the aria-describedby cannot be dropped without the call site failing to compile — and the critical edge reads the same attribute the reader is announced, so the two cannot disagree. Read-only says so in words rather than with a lock glyph, and disabled steps the border down to the structural hairline: it stopped being a control.
One press, one receipt, and a refusal that says so. The glyph swap runs in three frames at steps(3, jump-none), because a terminal confirms by redrawing.
idle
brew install signalhq/tap/sgl8.4 MBcopied
brew install signalhq/tap/sglblocked
sgl init --service payments-workerdisabled
sgl keys show --service payments-workernavigator.clipboard is undefined outside a secure context and rejects on a denied permission. The control widens and prints clipboard blocked on the critical family — and that is also the button’s accessible name, because the drawn word and the name are one string here. A polite live region says to select the text instead, and the state holds until the next attempt, because a denial is not transient. The fourth row has nothing to copy yet and carries the DOM attribute for it, so it leaves the tab order rather than being dimmed.
The ui/ parts every section is built from, in one frame.
Every theme-authored ui/ part in the states it ships with, including the ones no fiction page uses: disabled and pending actions, a mode-locked switch, a command row on both grounds. The three vendored parts — ui/accordion-disclosure, ui/field, ui/copy-button — have frames of their own above, because a vendored part's capture contract names the states its frame has to carry. ui/container, ui/type and ui/logo are structural: they render in the shell around this page.
ui/button · variant
ui/button · disabled + pending
Disabled carries the DOM attribute, so it leaves the tab order and the press ramp is gone rather than dimmed. Pending takes the informational family, aria-busy and a label in the progress tense; it does not spin, because the terminal cursor holds this theme’s one ambient slot. Pressed is a toggle, so it lives on the controls that toggle: the theme switch below, the estimator’s sample-rate presets and the changelog’s tag filters all carry aria-pressed.
ui/theme-toggle
The second switch is the mode-locked state: a host that pinned the mode gets a control that says so, not a dead one. aria-pressed still reports the mode showing.
ui/command-row · idle
brew install signalhq/tap/sgl8.4 MBsgl init --service payments-workerTwo grounds, one row: surface="tint" on the page background, surface="plain" inside a panel that is already tinted. The command scrolls inside its own box at 375 rather than truncating, which is the difference between an instruction and a fragment.
ui/badge · neutral
sgl trace --deploy 8f21c4eui/badge · accent
Appearance is variant here, renamed from tone in 2.7.0: tone is the closed semantic set and this theme now has a component that means it.
ui/status-badge
The glyph is a required prop, so a status can never arrive as colour alone. Which incident state earns which tone is the section's knowledge, not the pill's.
ui/icon-chip
Square on the tinted surface for a glyph that illustrates a name; round on a semantic ground for the one that marks a state. Both are aria-hidden: the words are always beside them.
ui/alert-callout
Collection
role="alert" when the tone is critical, role="status" otherwise. The prose stays --foreground; only the label and the glyph carry the family.
ui/state-card
Investigating
Impact is confirmed. The cause is still open.
Monitoring
The rollback is applied. The verification window is still open.
Resolved
The rollback held through a complete verification window.
No diff
No configuration field changed in the selected release.
The box every incident section renders for one of its states. The state name lands on data-state, which is what makes the panes under each section frame addressable.
ui/code-block · card
import { init } from "@signal/node";
init({ service: "payments-worker", sample: { errors: 1 } });ui/code-block · sunken
export default {
sample: { rate: 0.1, errors: 1, p99: 1 },
};ui/terminal-window
$ sgl status --env prod ok api-gateway p95 184ms !! payments-worker p95 912ms
ui/section-heading · left
Alerts
Route by deploy author, not by rota. The commit already knows who to wake.
ui/section-heading · center
Rollout
Instrument the noisiest service, read a week of traces, then widen.
ui/page-hero · tight
Docs
From an uninstrumented Node service to a deploy-annotated latency timeline.
counterweight slot
Every masthead fills its right half. A1, never the retired A2.
ui/page-hero · standard
Changelog
Breaking changes carry the exact command that moves you across.
counterweight slot
Same slot, more air above and below the stack.
Three link columns, the product blurb, a build string and a status line. Every link resolves to a page or an anchor the theme ships. Rendered in place as the page shell.