Design Spec v3.4
Surface-by-surface spec for the v3.4 design system rollout. One system, every surface, no legacy holdovers.
§
What v3.4 is
Theme
One system. Every surface. No legacy holdovers.
v3.3 locked the token system and type stack. v3.4 ships it across every surface — resolving font inconsistencies, applying locked vocabulary (V&V Sessions 0–1), porting legacy prototypes, and designing new surfaces (Spaces, social graph).
§
Progress summary
| Surface | Prototype | Production |
|---|---|---|
| App UI |
v3.4
existing
|
vocab pending
#145
|
| Console |
v3.4
Jun 5
|
not started
|
| Auth System |
v3.4
Jun 5
|
not started
|
| Marketing Site |
Concept C
Jun 5
|
direction lock pending
|
| Email (5 files) |
v3.4
Jun 5
|
Session 3 vocab pending
|
| MCP reference |
partial
|
not started
|
| Mobile |
Phase 3
|
vocab pending
|
| Spaces |
not designed
|
gated on build
|
| Design system ref |
partial
|
— |
§
Fonts
| Specimen | Role | Family | Weight |
|---|---|---|---|
Context version control. |
Display / hero headlines | Cormorant Garamond italic | 300–400 |
Body · UI · Nav · Labels · Buttons |
ALL body, UI, nav, labels, buttons, wordmark | Outfit | 300–600 |
K886XH · 2026-06-07T14:32Z |
Codes, timestamps, monospace only | JetBrains Mono | 400–600 |
Retired — do not use: Syne · IBM Plex Sans · DM Mono
§
Tokens
--bg
#ffffff
Page background
--surface
#f7f7f7
Card backgrounds
--panel
#f0f0f0
Panel / inset areas
--border
#e4e4e4
Default borders
--border-hi
#cccccc
Hover / emphasis borders
--text
#111111
Primary text
--text-2
#555555
Secondary text
--text-muted
#999999
Muted / meta text
--teal
#0d9488
PRIMARY — touch points only
--teal-dim
rgba(13,148,136,0.08)
Teal tinted fill
--indigo
#6366f1
SECONDARY — org/team/pro tier
--success
#16a34a
Received state
--warning
#d97706
Pending / expiring
--error
#dc2626
Expired / failed
Dark mode — [data-theme="dark"] · opt-in only
--bg
#0d0d0d
--surface
#181818
--teal
#2dd4bf
--indigo
#818cf8
§
Rules
- Flat — no drop shadows, no gradients (exception: teal→indigo bar in brand hero moments)
- Touch points only — teal/indigo on buttons, active states, Codes, badges, focus rings only
- Light is primary — dark is
[data-theme="dark"] , opt-in - Cards:
--surface bg · 0.5px--border · 8px radius · 16px padding - Focus: 3px
rgba(13,148,136,0.25) box-shadow
§
Vocabulary
| Old (retired) | New (locked) |
|---|---|
| PIN / relay ID / Relay Code | Code |
| Claimed / claim / accept | Received / receive |
| handoff | relay (user) / transfer (API) |
| contribution | Item |
| Org-visible | Org |
| CLAIMS TODAY | RECEIVED TODAY |
1
Prototype Index
Prototype Index
Syne font — needs Outfit swap
In progress
font-family: 'Syne' →'Outfit' throughout- Spaces section added (stub cards)
- All pre-v3.3 cards version-bumped
2
App
App (relay-app)
v3.4 prototype exists. Production vocab pending (#145).
Vocab pending
- relay-app production: vocab pass applied (issue #145)
- Space detail page designed + prototyped
- Space badge component shipped
- "In common" profile display designed
- Relay card with PR #784 display spec applied
3
Console
Console (relay-console)
✅ v3.4 prototype built June 5, 2026
Prototype done
- Font: Outfit + Cormorant Jun 5 2026
- Tokens: neutral surface/border set Jun 5 2026
- Vocab: "Received" not "Claimed" throughout Jun 5 2026
- Spaces admin view (#692): Space list, member management, visibility controls
- Production implementation matches prototype
4
Auth System
Auth System
✅ v3.4 prototype built June 5, 2026
Prototype done
- Font: Outfit body, Cormorant italic for auth headlines Jun 5 2026
- Tokens: neutral set Jun 5 2026
- Vocab: "Code" not "PIN/Relay Code" throughout Jun 5 2026
- Production implementation matches prototype
5
Marketing Site
Marketing Site
✅ v3.4 prototype built June 5, 2026. Direction: Concept C.
Prototype done
- Font: Cormorant Garamond italic hero, Outfit body Jun 5 2026
- Tokens: v3.4 neutral set Jun 5 2026
- Vocab: "Code", "Receive", "Received", capitalised "Codes" throughout Jun 5 2026
- Direction: Concept C — Code hero figure, 4-step loop, MCP integration block, 4-tier pricing, "Context in. Context out." close Jun 5 2026
- Session 4 vocab audit applied
- Site direction formally locked by EC
- Production deployment
6
Email & Notifications
Email & Notifications
✅ All 5 transactional emails updated June 5, 2026
Resend pending
- Font: Outfit + Georgia fallback Jun 5 2026
- Tokens: neutral set,
#e4e4e4 borders Jun 5 2026 - Vocab: "Code", "Received", "receive"; relay-claimed → relay-received copy Jun 5 2026
- Code display: JetBrains Mono / monospace, teal, 0.15em tracking Jun 5 2026
- Entity: Relay Context Inc. Jun 5 2026
- Session 3 (Comms vocab audit) applied
- Resend/send integration verified
7
MCP Reference
MCP Reference
relay-card-display ✅ built (v3.3). response-cards needs port. relay-edit-timeline missing.
Partial
relay-card-display built in v3.3 Jun 3 2026relay-card-display Syne → Outfit font swapresponse-cards ported from dark IBM Plex to v3.4 lightrelay-edit-timeline built (gated on PR #784 merge)
8
Mobile
Mobile
Phase 3 shipped. Spaces mobile pending build.
Vocab pending
- Session 1 vocab applied to mobile copy
- Spaces mobile view (#46) — gated on Spaces v1
- Relay card display spec applied (PR #784)
9
Design System Reference
Design System Reference
relay-tokens.css fixed (Jun 3 2026). relay-design-system.md body still v3.2.
Partial
- relay-tokens.css comment corrected: Outfit not Syne Jun 3 2026
- TEAM-HANDOFF-v34.md created for app + console teams Jun 3 2026
- relay-design-system.md body updated to v3.4
- relay-brand-guide.html updated to v3.4
- Spaces entity tokens defined (gated on Spaces v1)
★
New Surfaces — Spaces
Gated
No designs exist yet. All gated on Spaces v1 (#681–#692).
| Surface | Issue | Notes |
|---|---|---|
| Space badge on relay/pulse | #686 | |
| Space detail page | #687 | Name, visibility badge, mixed timeline, members |
| Space creation + management | #688 | Visibility selector: Private/Org/Connected/Open |
| Space directory | #685 | Org-visible list, search, filter |
| Profile integration | #690 | Spaces on profile, "in common" display |
| Admin view | #692 | relay-console |
§
Dependencies & Gates
| Item | Blocked on |
|---|---|
| Spaces design | blocked Spaces v1 build (#681–#692) |
| Marketing production | blocked Site direction lock (EC) |
| Sessions 2–6 vocab | blocked Running the sessions |
| relay-edit-timeline | blocked PR #784 merge |
| Console Spaces admin | blocked Spaces v1 build |