Style guide

Everything Relay is built from, rendered live. Change a colour or a font on any section in the right panel; this page shows the defaults.

Colour

RGB(243, 244, 248)
PaperPage background
RGB(255, 255, 255)
WhiteCards and bands
RGB(22, 26, 38)
InkText, console, featured plan
RGB(93, 99, 119)
MuteSecondary text
RGB(223, 226, 236)
LineBorders and the track
RGB(38, 67, 255)
CobaltButtons, lit steps
RGB(220, 226, 255)
Cobalt softPill tag
RGB(255, 197, 66)
SignalPacket, clock, cursor
RGB(23, 163, 114)
PassDone and sent

Type, Geist and Geist Mono

Display, 103px, 600Agents that finish.
Heading 1, 67px, 600Built for the parts that break.
Heading 2, 31px, 600Checks before it replies
Quote, 34px, 500Every answer is tested before a customer sees it.
Body, 17px, 400Relay runs your AI agents in production. It plans, calls your tools and checks its own work.
Mono, 15px, 400payments.refund(£24.00) 200 412ms

Buttons and parts

NewPill for announcements

tool payments.list(order 4417) 200 81ms
check refund equals the duplicate charge: pass
Work email
you@company.com
Side gutters: 48px on desktop, 32px on tablet, 20px on phones. Corners: 10px buttons, 16px cards, 20px large cards.

Create a free website with Framer, the website builder loved by startups, designers and agencies.