# Relay Brand Brief
*v3.4 — 2026-06-03 | Supersedes v3.3 · Type specimen: brand/type-specimen-v33.html*

## Company
RelayCTX: async context handoff platform for AI agents and teams. Users package and pass work context using short Relay Codes (e.g. QNHC2C).

**Legal entity:** Relay Context Inc.
**GitHub (app):** https://github.com/christensen-digital/relay-app
**GitHub (creative):** https://github.com/christensen-digital/relay-creative

---

## One Visual System

Light mode is primary. Pure white canvas with teal-tinted surfaces. Dark is terminal contrast — opt-in only.

No separate warm, deck, or marketing palette. One system across all surfaces.

---

## Colour — Light Mode (primary)

| Token | Value | Use |
|---|---|---|
| bg | `#ffffff` | Page background |
| surface | `#f5faf9` | Cards, sidebars — teal tinted |
| panel | `#edf7f5` | Nested panels, inputs |
| deep | `#e2f0ec` | Hover, pressed |
| border | `#daeee9` | Dividers, card edges |
| border-strong | `#b8dbd5` | Focus / active emphasis |
| text | `#0f1f1e` | Body text |
| text-2 | `#446160` | Labels, metadata |
| text-muted | `#8caaaa` | Placeholders, disabled |
| text-bright | `#060f0f` | Headings, display |
| teal | `#0d9488` | PRIMARY — CTAs, Relay Codes, active states |
| indigo | `#6366f1` | SECONDARY — org/team badges, pro tier |
| success | `#16a34a` | Claimed |
| warning | `#d97706` | Pending / expiring |
| error | `#dc2626` | Expired / failed |

## Colour — Dark Mode (terminal contrast)

| Token | Value | Use |
|---|---|---|
| bg | `#0d0d0d` | Terminal black |
| surface | `#181818` | Cards, sidebars |
| panel | `#222222` | Nested panels |
| border | `#2a2a2a` | Dividers |
| text | `#f0f0f0` | Body text |
| text-2 | `#999999` | Labels, metadata |
| text-muted | `#606060` | Decorative / large text only |
| teal | `#2dd4bf` | Primary (brighter on dark) |
| indigo | `#818cf8` | Secondary (lighter on dark) |

---

## Typography

| Role | Font | Weight | Use |
|---|---|---|---|
| Display / Titles | Cormorant Garamond | 300–400 italic | Hero headings, section titles, editorial display |
| Body / UI + Wordmark | Outfit | 600 (wordmark) · 300–500 (body) | All UI text, nav, labels, buttons — and **RelayCTX** lockup |
| Codes / metadata | JetBrains Mono | 400–600 | Relay Codes, IDs, timestamps, eyebrows |

**IBM Plex Sans, DM Mono, Syne — superseded, not in use.**

Google Fonts:
```
https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap
```

---

## Key Patterns

### RelayCTX Wordmark
Outfit 600, letter-spacing -0.02em. Always **RelayCTX** — never lowercase, never recoloured.

### Relay Code
Always uppercase · JetBrains Mono 600 · letter-spacing 0.15em · rendered in teal `#0d9488`.
Always called **Relay Code** — never PIN, relay ID, or relay key.

### Cards
`surface` bg · 0.5px border · border-radius 8px · padding 16px · no shadows

### Primary Button
Teal bg `#0d9488` · white text · Outfit 600 · border-radius 6px · padding 8px 16px

### Teal Usage — Touch Points Only
Teal and indigo on: buttons, active nav, Relay Codes, badges, rules, focus rings.
The surface tint (`#f5faf9`) is the only passive use — it is ground, not a touch point.

### Status Dots
7px circle — claimed `#16a34a` · pending `#d97706` · expired `#dc2626` · draft `#8caaaa`
Always `aria-hidden="true"` — meaning in adjacent text, never dot alone.

---

## Rules

- **Light mode is primary** — dark is terminal contrast, not the default
- **Flat surfaces** — no drop shadows, no gradients (exception: teal→indigo bar in brand hero moments only)
- **Touch points only** — teal/indigo on interactive elements, not on prose or decoration
- **Transitions** — max 0.18s, always respect `prefers-reduced-motion`
- **Focus ring** — 3px teal box-shadow, never `outline: none` without a visible replacement

---

## v3.2 Changes from v3.1

| Concern | v3.1 | v3.2 |
|---|---|---|
| Surfaces | Warm off-white `#f7f6f5` | Teal-tinted `#f5faf9` |
| Panel | `#f0efed` | `#edf7f5` |
| Border | `#e2ddd8` | `#daeee9` |
| Text | Warm `#1a1714` | Teal-tinted `#0f1f1e` |
| Text-2 | `#6b6560` | `#446160` |
| Text-muted | `#b8b0aa` | `#8caaaa` |
| Visual systems | Three (Product, Deck, Marketing) | **One** |
| Fonts | Syne + exceptions | Syne everywhere |
| Legal entity | Little Rocket Ltd. | **Relay Context Inc.** |

---

## Figma
Import `relay-design-tokens.json` via the **Token Studio** plugin to generate Figma Variables.