# RelayCTX™ brand assets — pack v3.5.3

**Canon for web, product, and marketing.** These are the approved, version-controlled brand assets. If an implementation and this folder disagree, this folder wins — alongside `brand/relay-tokens-v35.css` and `brand/relay-brand-guide.html`.

Design system: **v3.5 (neutral-first)** · Legal entity: **Relay Context Inc.™**
Pack version: **3.5.3** · Updated 2026-08-28

Everyday files, colours, and rules on one screen: **`brand/cheat-sheet.html`** (linked from the repo index).

---

## Pick the right file

| Need | Use | Notes |
|---|---|---|
| Web / app UI | **`brand/relay-lockup.html` component** — *not a file here* | Inline SVG + `currentColor`. The canonical on-screen lockup. |
| Design tools, decks, print, PDFs, non-web | `relay-lockup.svg` | Horizontal. Theme-adaptive (light/dark). **Default choice.** |
| Square / centred / social layouts | `relay-lockup-stacked.svg` | Mark above wordmark. |
| One-colour print, embroidery, etch, stamps | `relay-lockup-mono.svg` | Everything in `currentColor`; set `color`, defaults `#111111`. |
| On the teal fill, dark, or photography | `relay-lockup-on-accent.svg` | White knockout. Only where white holds WCAG AA. |
| og:image / twitter:image | `relay-social-og.svg` | 1200×630. Export to PNG. |
| Social profile / avatar — **feed-sized** | `relay-avatar.svg` | 512×512 accent tile, **mark only**. The default: the only form that holds at the 32–48px a feed renders. |
| Social profile / avatar — **header-sized** | `relay-avatar-lockup.svg` | 512×512 accent tile, **mark + wordmark**, carries the ™. Circle-safe. Readable at 96px+, marginal at 48, gone at 32 — use where the platform shows the avatar large. `-dark` / `-light` grounds alongside. |
| Mark alone, one-ink / "black" slots | `relay-mark-mono.svg` | `currentColor`, defaults brand ink `#111111`. Platform slots that force a dark mono mark. |
| Mark alone, on teal / dark / photo | `relay-mark-white.svg` | Solid `#ffffff` knockout. Only where white holds WCAG AA. |
| Anything that can't read SVG | `png/` | Transparent PNG exports of everything above, plus the marks — see the size matrix below. |

**The canonical teal mark is not duplicated here** — one source of truth lives one level up: `brand/relay-mark.svg` (full, ≥28px), `relay-mark-compact.svg` (16–27px), `relay-mark-core.svg` (≤15px), `relay-mark-animated.svg`, `favicon.svg`, `app-icon-light.svg` / `app-icon-teal.svg`. The pack carries only the mark's *one-ink and white portable exports* (`relay-mark-mono.svg`, `relay-mark-white.svg`), which restate its geometry the same way the lockup files do.

---

## Rules that travel with these files

**Web and app surfaces use the inline component, not these SVGs.** These files are for contexts that cannot inline SVG or resolve CSS tokens. On the web the mark must inherit `currentColor` so it adapts with theme.

**Trademark (™).** `RelayCTX™` and `Relay Context Inc.™` carry a ™ — never ®. It is Outfit **upright** (never the Cormorant italic), superscript ~0.42em, tracking reset to 0, and it **inherits the wordmark colour — never teal**. Placement is **primary / first-use only**: the lockup and the first prominent wordmark on a surface. Nav, body, compact, and repeated wordmarks stay bare `RelayCTX`.

**Colour.** Mark `#0d9488` light / `#2dd4bf` dark (`rly-accent-ui`). Wordmark `#111111` light / `#ededed` dark. Mark and wordmark are different colours by design — never recolour either independently, and never make the wordmark teal (it is not a touch point).

**`#00D9C8` is motion-only.** It appears in no static asset here. Do not introduce it.

**Flat.** No shadows, gradients, or glows. No container or box around the mark on web/app — the avatar and app-icon tiles are the only permitted containers, because the platform demands one.

**Clear space.** One mark-height on all four sides of the lockup.

**Lockup gap.** The space between mark and wordmark is **~0.25 of the mark's inked width** (measured ink-to-ink, not bounding box — the mark's 55%-opacity diagonals read lighter than its box, so a box-measured gap looks too airy). Vertical gap on the stacked lockup follows the same ratio. Never re-space, re-weight, or recolour the mark and wordmark independently — they scale as one object.

---

## Fonts

The wordmark is **live text (Outfit 600, −0.02em)** in these SVGs, not outlines — so it stays editable and correct wherever Outfit is available.

For **print or handoff to a party without Outfit installed, outline the text first.** Otherwise it falls back to a system sans and the wordmark will not be correct.

---

## PNG exports — `png/`

SVG is the source of truth; rasterise from it rather than editing PNGs. The whole folder regenerates with one command from the repo root:

```
python3 scripts/export_brand_png.py
```

The script drives headless Chromium (real text shaping — the live-text Outfit wordmark rasterises at true SemiBold with its −0.02em tracking) and **requires the Outfit family installed system-wide**; it refuses to run without it so a fallback face can never ship. Do not export with cairosvg — its toy font API silently substitutes the wrong weight and drops the tracking.

Every export has a **transparent background** except the avatar tile, OG card, and app-icon tiles, which are filled by design. Theme-adaptive files bake at their light-mode colours.

| Set | Files | Sizes |
|---|---|---|
| Lockup, horizontal | `relay-lockup@1x/@2x/@3x/@4x.png` | 204 / 408 / 612 / 816 wide |
| Lockup, stacked | `relay-lockup-stacked@1x/@2x/@3x.png` | 168 / 336 / 504 wide |
| Lockup, one ink ("black") | `relay-lockup-mono@1x/@2x/@3x.png` | 204 / 408 / 612 wide |
| Lockup, white knockout | `relay-lockup-on-accent@1x/@2x/@3x.png` | 204 / 408 / 612 wide |
| Mark, spec teal | `relay-mark-128/256/512/1024.png` | 128–1024 square |
| Mark, one ink ("black") | `relay-mark-mono-512/1024.png` | 512 / 1024 square |
| Mark, white knockout | `relay-mark-white-512/1024.png` | 512 / 1024 square |
| Mark, compact + core | `relay-mark-compact-48.png` · `relay-mark-core-32.png` | 2× nominal size |
| Avatar tile — mark only | `relay-avatar-400/512/1024.png` | 400 for X/LinkedIn crops |
| Avatar tile — lockup | `relay-avatar-lockup-400/512/1024.png` · `-dark-` · `-light-` | Mark + wordmark, circle-safe |
| OG card | `relay-social-og.png` | 1200×630 |
| App icons | `app-icon-teal-512/1024.png` · `app-icon-light-512/1024.png` | 1024 for stores |
| Favicon fallbacks | `favicon-32/64.png` | SVG favicon is primary |

---

## Versioning

Assets are versioned with the design system. Pack version is stamped in every file header and in this README.

| Pack | Design system | Change |
|---|---|---|
| 3.5.3 | v3.5 neutral-first | Adds the **lockup avatar** (`relay-avatar-lockup.svg` + `-dark` / `-light`): a 1:1 social tile carrying mark **and** wordmark, with the ™ — correct here because it has a wordmark to carry it, unlike the mark-only tile. Geometry is circle-safe (X/Bluesky/Mastodon round crops clip nothing) and the stacked gap follows the 0.25 × mark-ink rule. **Corrects a claim in this README:** "the wordmark won't survive avatar crops" was absolute; measured under real circle crops it is size-dependent — comfortable at 96px+, marginal at 48, unreadable at 32. Both tiles now ship, with the size rule stated on each. No colour change. |
| 3.5.2 | v3.5 neutral-first | Mark ink-variant exports added (`relay-mark-mono.svg`, `relay-mark-white.svg`). Full transparent-PNG matrix: marks 128–1024 (teal/mono/white), lockups @1x–@4x in all four treatments, avatar + app icons to 1024, favicon-32. All PNGs regenerated through one pipeline (`scripts/export_brand_png.py`, headless Chromium). **`relay-lockup-stacked@2x.png` was native-size (168w) in 3.5.1 and is now a true 2× (336w) — re-pull if you vendored it.** Colours unchanged. |
| 3.5.1 | v3.5 neutral-first | Tightened the lockup mark-to-wordmark gap to ~0.25 of the mark's ink width (horizontal, stacked, mono, on-accent, OG card). Documented the gap rule. **Geometry change — re-pull if you vendored 3.5.0.** |
| 3.5.0 | v3.5 neutral-first | First packaged asset set. Adds portable lockup SVGs (horizontal, stacked, mono, on-accent), social OG card, avatar tile. Carries the ™ treatment. |

Bump the pack version whenever a file in this folder changes shape or colour; note it in the table above. Do not edit an asset in place without a version note — downstream teams pin to these files.

---

## Reporting a problem

If an asset renders wrong, do **not** patch it locally in a project — that fragments canon. Raise it against `relay-creative` so the fix lands here and propagates.