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.pyThe 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.