# Design System v3.4 — Team Handoff
*For: relay-app + relay-console teams*  
*June 2026 · Single source of truth*

---

## The short version

Three things changed. Everything else is the same.

1. **Font is Outfit, not Syne.** The `--rly-font` CSS variable already says Outfit. The old comment was wrong.
2. **Surfaces are teal-tinted, not warm grey.** `#f5faf9` not `#f7f6f5`.
3. **Status copy: "Received" not "Claimed".** Applies to badges, toasts, errors.

---

## Import

```html
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,300;1,400&family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
```

Then in your CSS:
```css
@import url('relay-creative/brand/relay-tokens.css');
/* or copy the :root block directly */
```

---

## Font stack

| Font | Role | Weight |
|---|---|---|
| Cormorant Garamond italic | Display / hero headlines only | 300–400 |
| Outfit | ALL body, UI, nav, labels, buttons, wordmark | 300–600 |
| JetBrains Mono | Codes, timestamps, monospace only | 400–600 |

**Retired — do not use:**
- ~~Syne~~ (was UI font in v3.2 — now replaced by Outfit)
- ~~IBM Plex Sans~~
- ~~DM Mono~~

---

## Canonical tokens

```css
/* Backgrounds */
--rly-bg:          #ffffff;
--rly-surface:     #f5faf9;   /* NOT warm grey */
--rly-panel:       #edf7f5;
--rly-deep:        #e2f0ec;

/* Borders */
--rly-border:      #daeee9;
--rly-border-hi:   #b8dbd5;

/* Text */
--rly-text:        #0f1f1e;   /* NOT warm black */
--rly-text-2:      #446160;
--rly-text-muted:  #8caaaa;
--rly-text-bright: #060f0f;

/* Accent */
--rly-teal:        #0d9488;   /* PRIMARY — touch points only */
--rly-teal-dim:    rgba(13,148,136,0.12);
--rly-indigo:      #6366f1;   /* SECONDARY — org/team/pro tier only */

/* Status */
--rly-success:     #16a34a;   /* Received */
--rly-warning:     #d97706;   /* Pending / expiring */
--rly-error:       #dc2626;   /* Expired / failed */

/* Shape */
--rly-radius:      6px;
--rly-radius-card: 8px;
--rly-radius-sm:   4px;
```

---

## Rules (non-negotiable)

- **Flat** — no drop shadows, no gradients (exception: teal→indigo bar in brand hero moments only)
- **Touch points only** — teal/indigo on buttons, active states, Codes, badges, focus rings. Never on surfaces, prose, or decorative elements.
- **Light is primary** — dark mode is `[data-theme="dark"]`, opt-in, terminal contrast only
- Cards: `rly-surface` bg · 0.5px border · 8px radius · 16px padding
- Hover: shift border to `rly-border-hi` — no shadow
- Focus: 3px `rgba(13,148,136,0.25)` box-shadow — never `outline: none` without visible replacement

---

## Code display

```css
/* Inline Code */
font-family: var(--rly-font-mono);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--rly-teal);

/* Hero Code (large display) */
font-size: 28px;
letter-spacing: 0.18em;
```

Class: `.relay-code` (inline) · `.relay-code-hero` (large display)

---

## Vocabulary (locked — V&V Session 0, KD8684)

Apply to all UI copy:

| Old | New |
|---|---|
| PIN / relay ID / Relay Code | **Code** |
| Claimed | **Received** |
| Claim / Accept | **Receive** |
| handoff | **relay** (user) / **transfer** (API) |
| contribution | **Item** |
| Org-visible | **Org** |

**Filed issues:**
- relay-app #145 — full App UI change set
- relay-platform #792 — MCP server copy pass

---

## Reference

| What | Where |
|---|---|
| Canonical tokens CSS | `relay-creative/brand/relay-tokens.css` |
| Full design brief v3.4 | `relay-creative/briefs/BRIEF.design-v34.md` |
| App components prototype | `prototype.relayctx.com/web/app-components.html` |
| Relay card display spec | `prototype.relayctx.com/mcp/relay-card-display` |
| MCP response templates | `prototype.relayctx.com/mcp/response-cards` |
| Relay vocab (claim as relay) | `KD8684` |

---

*Claim relay `DSVX34` to load this into your session.*  
*Questions: ping EC or Ada.*