App Components v3.4 · prototype.relayctx.com
01 · Buttons
.btn .btn-accent .btn-ghost .btn-danger .btn-sm .btn-lg
02 · Badges / Pills
active verified archived beta pending expired
.badge .badge-teal .badge-green .badge-muted .badge-blue .badge-warn .badge-red
03 · Code
RLX-4K9M-7B2W
Share this relay: RLX-4K9M-7B2W — expires in 3 days
.pin-chip — JetBrains Mono 600, teal, 0.15em tracking
Hero display: font-size: 28px · Inline: font-size: 13px
04 · Status / Staleness
Fresh · 2m ago Aging · 4h ago Stale · 3d ago Expired · 14d ago
.stale-label + .stale-dot · modifier: .fresh .aging .stale .expired
05 · Weight Chip
light mid heavy dense max
.weight-chip · .weight-light .weight-mid .weight-heavy .weight-dense .weight-max
06 · Spinner
sm
default
lg
.spinner — teal border-top, 0.7s linear infinite · sizes: .spinner-sm .spinner-lg
07 · Toggle Switch
.toggle-switch > input[type=checkbox] + .toggle-slider
Checked state: input:checked + .toggle-slider → teal background
08 · Card
Relay Settings active

Configure how this relay behaves when recipients interact with it. Settings apply to all future sends unless overridden per-recipient.

.card > .card-header > .card-title · .card-body
09 · Stat Grid
Total Relays
148
+12 this week
Active Receives
34
across 8 relays
Expired
9
3 this month
Avg. Receive Time
1.4h
↓ 22% faster
.stat-grid > .stat-card > .stat-label + .stat-value + .stat-sub
10 · Form Row
Shown to recipients when they open the relay.
Auto-generated. You can customize it.
Invalid date — use MM/DD/YYYY format.
Managed by workspace admin.
.form-row > .form-label + .form-input + .form-desc
States: default · focus (border:teal + ring) · .error (red border) · disabled
11 · Toast (static variants)
✓
Relay sent
Your relay was delivered to 4 recipients.
×
Send failed
Could not reach the recipient. Try again.
i
Relay expiring soon
RLX-4K9M expires in 24 hours.
#toast · variants: .toast-success .toast-error .toast-info
Structure: .toast-icon + .toast-body > .toast-title + .toast-msg
12 · List Item
📦
Q4 Onboarding Package
Sent to 3 recipients · received 2 of 3
active
🔗
Partner API Credentials
Sent to Acme Corp · expires in 5 days
aging
📄
NDA Template v2
Archived · 14d ago
archived
.list-item > .list-icon + .list-main > .list-title + .list-sub
13 · Progress Bars
Send progress
72% · 3 of 4 delivered
Receives
6/10
Opens
9/10
.send-progress > .send-progress-fill (teal)
.claims-bar-wrap > .claims-bar-track > .claims-bar-fill
14 · Relay Card
Q4 Onboarding Package
live
Includes NDA template, API credentials, and onboarding checklist for new enterprise partners joining in Q4.
heavy enterprise
3 receives · 2d left
Partner API v1 Credentials
expired
Legacy API keys for v1 integration. Deprecated October 2024 — do not distribute.
max api
expired 14d ago
.rl-card > .rl-body > .rl-top (.rl-dot + .rl-title + .rl-chips)
+ .rl-preview + .rl-bottom (.rl-tags + .rl-meta)
Actions: .rl-edit-btn · .rl-preview-btn · .rl-pref-btn
15 · Relay Tabs
All Relays
Active
Drafts
Expired
Archived
Tab content area
.rl-tab · active state: .rl-tab-active → teal underline border
16 · Onboarding Card
Get started with RelayCTX
3 of 5 complete
✓
Create your account
Verified and ready to go.
✓
Set up your workspace
Relay Context Inc. workspace configured.
✓
Send your first relay
4
Invite a team member
Collaborate by inviting colleagues to your workspace.
5
Connect your first integration
Slack, Zapier, or webhook.
.ob-card > .ob-header > .ob-title + .ob-progress-wrap (.ob-progress-track > .ob-progress-fill)
.ob-steps > .ob-step · states: .done .active .pending
Step: .ob-step-num + .ob-step-body + .ob-step-action
17 · Sidebar Nav
Workspace
Dashboard My Relays Activity
Settings
Preferences Security
EC
Erik Christensen
erik@relayctx.com
.sidebar (220px) > .sidebar-logo + .nav-section > .nav-label + .nav-item (.active)
.sidebar-footer > .user-chip
18 · Topbar
Relay Context Inc.
EC
PRO
.topbar > .topbar-search-btn + .topbar-org-badge + .topbar-user-chip (.topbar-user-avatar + .topbar-tier-badge)
19 · User Dropdown
EC
Erik Christensen
erik@relayctx.com
Profile settings
Invite teammates
Workspace settings
Sign out
.user-dropdown > .user-dropdown-header (.ud-avatar + .ud-name + .ud-email)
.user-dropdown-divider · .user-dropdown-item · .user-dropdown-item--danger
20 · Toast System
bottom-right · fixed in app
✓
Relay sent successfully
Delivered to 4 recipients · RLX-4K9M
×
Upload failed
File exceeds 50MB limit.
i
New relay received
Jordan M. received your relay.
Toast stack: position:fixed;bottom:20px;right:20px in app
Variants: .success .error .info · structure: .toast-pill-icon + title + msg