01 · Typography
Three fonts. Each with a single job.
The system uses exactly three typefaces. Using any other font — including the retired list below — is a system violation.
Cormorant Garamond — Display / Hero Headlines
The session ends,
context shouldn't.
Context moves. Memory persists.
Use exclusively for hero headings, large section titles, and editorial display moments. Never for body text, labels, or buttons. Never upright — always italic in this system.
Outfit — Body / UI / Wordmark
Relay moves context across sessions, tools, agents, and people.
All body text, navigation, labels, buttons, the wordmark. When in doubt, use Outfit. This is the workhorse — never Cormorant Garamond or JetBrains Mono for prose.
JetBrains Mono — Codes / Metadata / Eyebrows
QNHC2C Design System · V3.4Relay Codes, IDs, timestamps, version strings, token names, eyebrow labels. Always uppercase when used as eyebrows or labels. Codes always 0.15em letter-spacing, teal #0d9488.
Retired & off-limits: IBM Plex Sans, DM Mono, Syne — retired as of v3.3. Do not use. Any file referencing these fonts is out of date. Remove and replace with the three-font system above.
02 · Colour Palettes
Two palettes. Neither is interchangeable.
The system has a Product palette for the app and marketing site, and a separate Deck palette for slides and investor materials. Do not mix them.
All digital product surfaces
Never use in app or marketing site
Slide preview — deck palette in action
Context is the
missing layer.
Relay captures what matters across every session, every tool, every handoff — and makes it portable.
Which palette? Site & app → Product palette. Deck slides, investor materials, Figma illustrations → Deck palette. If it lives in a browser or the relay app, it uses the product tokens. If it goes into a slide or Figma illustration frame, it uses deck tokens. Never mix.
03 · Key Rules
Four rules. Memorise them.
These are not guidelines — they are the system constraints. Breaking any one of them produces an off-spec result.
Flat — no shadows, no gradients
No drop-shadows anywhere. No gradient fills anywhere. Depth is created by layering surface tokens (bg → surface → panel), not by illusion. If you’re reaching for a shadow, use a border instead.
Touch points only — teal is a signal, not a theme
Teal (#0d9488) appears only on interactive elements: buttons, Codes, active states, links. Never in prose, never as a background fill on large areas, never decoratively. If it’s not clickable or interactive, it shouldn’t be teal.
Light is primary — dark is opt-in
The system is light-first. Dark mode is not in scope for v3.4. The one exception is terminal/CLI contexts, which may use dark surfaces when semantically appropriate. Do not build dark mode variants speculatively.
Card anatomy is fixed
Cards use: surface bg (#f7f7f7) · 0.5px border (#e4e4e4) · 8px border-radius · 16px padding. This is not approximate — the 0.5px border and exact token values are part of the spec. Do not round up to 1px.
04 · Component Examples
Live rendered components.
These are the actual rendered outputs — not mockups. What you see here is exactly what the spec produces.
Buttons
Primary: teal bg · white text · Outfit 600 · 5px radius
Ghost: transparent bg · 0.5px border · text #111
Relay Code — Inline
Your relay is ready to send. Share the code QNHC2C with the recipient.
JetBrains Mono 600 · teal #0d9488 · 0.15em tracking · uppercase
Relay Code — Hero
Panel bg #f0f0f0 · 0.5px border · 6px radius · 32px · JetBrains Mono 600
Status Indicators
8px dot · success #16a34a · warning #d97706 · error #dc2626
Card — Standard
Project Brief — Q3 Planning
Context package containing the full Q3 planning materials, session notes, and decision log from the June 8 workshop.
surface bg #f7f7f7 · 0.5px border #e4e4e4 · 8px radius · 16px padding
05 · Prototype Map
What lives where on the prototype index.
Each section of the index serves a distinct purpose. Use this to find the right prototype for a given task.
| Section | What it is |
|---|---|
| Web v3.4 | Marketing site in the Concept C direction. Cormorant hero, Code figure, 4-step product loop, MCP integration block, 4-tier pricing. This is the canonical marketing direction. |
| App UI v3.4 | End-user relay app. Outfit + Cormorant, neutral token set, locked vocabulary throughout. Sidebar, stats panel, relay list. |
| Console v3.4 | Platform admin shell for the team. Receive Approvals workflow, Code display, v3.4 stat grid. Not the user-facing app. |
| Auth System v3.4 | All authentication states and flows. Cormorant italic card headlines, Code unlock flow, neutral token set throughout. |
| App Components | All 20 relay-app component classes — buttons, relay cards, onboarding, sidebar, toasts. Reference before building anything new. |
| Type Specimen | Full type scale reference. Shows every weight and size in context. Start here when something looks typographically wrong. |
| MCP Response Cards | Tool interaction gallery. Chat-rendered card formats for all 24 Relay tool interactions. Reference for agent-facing display work. |
| Relay Card Display | Display field spec from PR #784. All transfer card states — preview, confirmed, owner, pending, series. Rich + plain mode. |
| Email Templates | Transactional email designs. OTP, relay received, expiring, registration approved, team invitation. Resend-compatible. |
06 · Resources
Source files and references.
All canonical source material. When in doubt about a token value or component spec, these are the ground truth.
Figma Design File — Wires & Components
figma.com/design/wr7wFBqGOlLGYqDFvDjxt0
FigJam — Content & System Board
figma.com/board/deJ1lPuGhlyanOnOy3GY7I
Design Tokens (JSON)
relay-creative/brand/relay-design-tokens.json
CSS Tokens — Product UI
relay-creative/brand/relay-tokens.css
CSS Tokens — Deck Palette
relay-creative/brand/relay-deck-tokens.css
Brand Brief (Markdown)
relay-creative/brand/BRAND-BRIEF.md
This guide
relay-creative/brand/relay-brand-guide.html
Mark (SVG)
relay-creative/brand/relay-mark.svg