v1.0 · Squadrelay Design System

Build relays at the speed of thought.

A complete dark-themed component & motion system for the squadrelay platform — colors, typography, primitives, and patterns, alive in the browser.

Next.js 15HeroUIFramer MotionTailwind 3
01 / Palette

A palette tuned for dark interfaces.

Twelve calibrated tokens cover surfaces, text, brand, and semantic states. Click any swatch to copy its hex.

02 / Typography

Geist Sans & Geist Mono, a clean, variable-grade pair.

A nine-step scale anchored by the Geist family. Tight tracking on headings, relaxed leading on body.

The quick relay
ships before noon.

DisplayReal-time relays.
H1Heading level one
H2Heading level two
H3Heading level three
Body LgLarger body for intros and supporting prose.
BodyDefault body copy size for paragraphs and long-form content.
CaptionCaption / Label
Monoconst relay = squadrelay.create();
LightAa Bb Cc
RegularAa Bb Cc
MediumAa Bb Cc
SemiboldAa Bb Cc
03 / Buttons

Six variants, three sizes, one consistent feel.

Every button responds to hover, tap, and focus with spring physics and glow shadows. Try hovering.

VariantSizes (sm · md · lg) + states
primary
secondary
ghost
outline
danger
success
Icon-only
04 / Inputs

Form primitives with animated focus rings.

Inputs, checkboxes, radios, switches and sliders — every state hand-tuned for dark backgrounds.

Invalid token format
Preferences
Plan
Auto-retry
Throughput60%
05 / Cards

Four card patterns, one motion language.

Flat surfaces for content, glow cards for actions, conic-gradient borders for emphasis, stat cards for data.

Pattern · 01

Flat card

Plain surface for grouping content. Lifts subtly on hover.

Pattern · 02

Glow card

Hover reveals a brand-color halo. Use for primary actions.

Pattern · 03

Gradient border

Animated conic gradient draws attention to featured content.

12.4%
Relays / day
24,891
06 / Badges & Status

Pills, dots, tags & notification badges.

Tiny components, big personality. All animate in, animate out, and pulse where it matters.

Badges
DefaultPrimarySuccessWarningDangerOutline
Status
Online
Away
Offline
Recording
Notification
Tags (click × to remove)
#real-time#streaming#low-latency#websocket#edge
07 / Tabs & Accordion

Disclosure patterns with layout animations.

Tabs use a shared-layout underline that slides between items. Accordions expand height + fade content.

Tabs

A relay is the smallest unit of work in squadrelay. Each relay takes input, processes through a chain of agents, and emits a result — all in real-time.

FAQ / Accordion

Node.js 20+, Bun 1.0+, Deno 2.0+, and a WASM edge build for Cloudflare Workers and Vercel Edge.

08 / Modals

Spring-in dialogs with layered backdrops.

Click any trigger. ESC and backdrop click both close. Body scroll is locked while open.

09 / Dashboard

A mini dashboard that animates as you read.

Stat cards count up, the line chart draws itself, and table rows stagger in — all powered by viewport triggers.

12.4%
Relays
0
3.1%
Active users
0
6.2%
Latency
0ms
0.01%
Uptime
0.00%
Relay throughput · last 24h
1.42M runs
Recent activity
UserActionStatusTime
alex@squadrelayDeployed `payment-relay`Success2m ago
kai@squadrelayTriggered manual runRunning5m ago
systemAuto-scaled to 12 workersSuccess11m ago
morgan@squadrelayEdited `webhook-relay`Success32m ago
systemRetry exceeded for `email-relay`Failed1h ago
10 / Toasts

Stacked notifications with progress timers.

Click a trigger — toasts spring in from the right, stack with layout animations, and auto-dismiss after four seconds.

Tip: click multiple triggers in a row to see the stack animate.