We stopped waking up the whole team.
Before Relay every alert went to a channel and whoever was awake took it. Now one person is paged, with the runbook. Our on-call survey went from dread to fine.
Relay style guide
One system, every page.
Every colour, size and component on this page comes from Automatic.css settings and the kit's component classes. Change a setting and the whole kit follows. This page ships with the kit so your client can see the system too.
01
Colour
Primary is the violet and it sits on the one ask: buttons, links, the current thing. The mint is for what shipped and what succeeded, never a button. Everything else is ink, in two steps, and the rare light band.
- –primaryButtons, links, the ask
- –primary-hoverHover
- –primary-lightText on dark bands, rarely
- –accentShipped, success
- –base-ultra-darkThe canvas
- –base-darkCards and the dark band
- –neutral-ultra-lightLight text, light bands
- –neutral-lightLines on light bands
- –whiteWhite band
Ink
Heading on ultra-dark
Body text and a button take their colours from the band, not from the component.
Start a projectDark
Heading on dark
Body text and a button take their colours from the band, not from the component.
Start a projectLight
Heading on light
Body text and a button take their colours from the band, not from the component.
Start a projectWhite
Heading on ultra-light
Body text and a button take their colours from the band, not from the component.
Start a project02
Type
Fix incidents before customers notice.
Everything the 3am screen needs.
Alerts that find a person
Card title and small headings
Lead text sits under a headline and says the one thing the section is about, in a sentence or two.
Body text is Space Grotesk at 17px on desktop and 16px on phones, line height 1.55. Headings are Space Grotesk at weight 500 with tight tracking. Figures, versions and labels are Geist Mono, like 0.9.0, lined up. Inline links look like this link to pricing, underlined so nobody has to guess.
Small text for captions, notes under buttons and legal lines. Never lighter than this.
Eyebrow label, the literal section heading03
Buttons
Three weights: primary for the one ask on a page, outline for the alternative, text link for everything else. Verb plus noun labels. At least 48px tall. The primary carries ink text on the violet.
On a light band
04
Section intro
Every section starts with this component: the literal heading as an eyebrow, the headline as a paragraph, an optional lead and buttons. Alignment and the band colour are props.
05
Cards
Talking points
Review cards
Priya Natarajan, CTO, Tally, Beta customer since May 2026 The status page is finally honest.
We used to update it after the fact. Now it is written from inside the incident and customers see it before they notice anything. Support tickets during incidents fell by half.
Marcus Oyelaran, head of platform, Ferry, Beta customer since June 2026
Process cards
Connect your alerts
Datadog, Grafana, Sentry, CloudWatch or a webhook. Ten minutes, no agent.
Map your services
Who owns what, in a file in your repo. Relay reads it and keeps it current.
Write the first runbook
Start from ours. Relay opens it the next time the alert fires.
Sleep
The right person is paged, the status page speaks, and the timeline is kept. You read it in the morning.
06
Stats and a release
- 90sAlert to a human, median
- 38%Fewer repeat incidents, first quarter
- 1200+Teams on the waitlist
- 12Integrations, with a webhook for the rest
Status page subscribers by email and RSS
Customers can subscribe to a status page and get the first update within ninety seconds of an incident opening. RSS for the people who prefer it.
07
Contact details and FAQ
When can we start?
We invite teams from the waitlist every two weeks, smallest first. Most wait under a month. Beta teams pay nothing until general availability.
Does Relay replace our monitoring?
No. Keep Datadog, Grafana, Sentry or whatever you have. Relay takes the alerts they raise and makes sure a person, a runbook and a status page meet them.
What happens to our runbooks if we leave?
Nothing. They are Markdown files in your repository. Relay reads them; it never owns them.
08
Media
Images are always in a figure. Product shots are 16:9 and 16:10 with a hairline outline, cards fix 4:3, team photos are square. Corners come from the ACSS auto radius, so the client cannot upload a square-cornered photo by mistake.
