Relay design system
From the Relay template.
Included with Everything
Colour
Type
- Funnel Displaydisplay · 500 · SIL Open Font License 1.1
- Funnel Sansbody · 400, 500, 600 · SIL Open Font License 1.1
- DM Monomono · 400 · SIL Open Font License 1.1
- Display76 / 41px · 500A team of agents for the work that piles up
- H256 / 33px · 500Start from an agent that already works
- H322 / 20px · 500Pick the right model for every step
- Lead22 / 20px · 400Build AI agents together on one canvas.
- Body18 / 16px · 400Map each step, test it on real cases and ship with approvals built in.
- Small13 / 13px · 500A website template for an AI agent or workflow platform: code samples, integrations, pricing and docs-style blog.
- Eyebrow13 / 13px · 400AGENT LIBRARY
Components
RelaySecurityCustomersPricingSign inGet started
Get started
Browse pricing
Learn more
AGENT LIBRARY
Pick the right model for every step
Map each step, test it on real cases and ship with approvals built in.
What teams say after the first month
A website template for an AI agent or workflow platform: code samples, integrations, pricing and docs-style blog.
Shape and motion
- sm · 8px
- md · 14px
- lg · 32px
- pill · 9999px
- shadow sm
- shadow md
- out ·
cubic-bezier(.2, .7, .2, 1) - base · 700ms
Exports
- DESIGN.md
DESIGN.md22 KBEverything - CSS variables
tokens.css5 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css5 KBEverything - Figma variables
figma-variables.json29 KBEverything - Webflow variables
webflow-variables.json9 KBEverything - W3C tokens (JSON)
tokens.json18 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("relay") with the MCP server.
- Source
- Relay template
- Palette
- Sanzo Wada 131: Raw Sienna, English Red, Peacock Blue
- Fonts
- Funnel Display (OFL 1.1), Funnel Sans (OFL 1.1), DM Mono (OFL 1.1)
- Themes
- Dark and light
- Contrast
- Text 13.24:1 · muted 6.71:1
Inside DESIGN.md
- At a glance
- Setup
- Colour
- Typography
- Layout and spacing
- Shape and depth
- Motion
- Components
- Voice and copy
- Do and don’t
- Tokens