RelayCTX Brand Guide · v3.4.1 · June 2026

Let the signal out of the box.

The v3.4 system is warm, light, and flat — teal-tinted surfaces, editorial italics, monospace Codes. v3.4.1 frees the mark to belong to it: the Open Signal, unboxed, in system teal, with the pulse as the brand's one living thing.

Ratified v3.4.1 · Session FYBFRY · Jun 10 2026
01 Why the mark changed

The old mark was a dark-mode artifact in a light-mode brand.

v3.4 declares light mode the primary experience. The boxed mark — legacy teal strokes locked inside a #0D0D0D square — only looked at home on terminal black. On every primary surface it arrived as a hole punched in the page. The geometry was never the problem; the container was.

What stayed: the broadcast geometry — centre, signal, eight directions — and the pulse energy. What went: the box, and the dual-teal exception. The mark renders in system teal via currentColor. Legacy #00D9C8 is retired from static use and lives on as the pulse colour — it appears only in motion.
02 The mark — Open Signal

One drawing, three sizes, every surface.

v3.4.1

Open Signal

Ratified — Jun 10 2026

The broadcast geometry, unboxed. Full (8 rays, ≥28px) for hero and brand moments · compact (4 rays, 16–27px) for nav and small UI · core (dot alone, ≤15px) for notification badges and pulse anchors. Containers are contextual: an app icon gets a tile; the web gets nothing at all. Source: brand/relay-mark*.svg

Full · light · heartbeat
Full · dark — no box needed
Compact · nav / favicon
App icon — tile is contextual
RulesAlways inline SVG, never <img>. No container on concepts/app. Clear space: one mark-height on all sides. Never static #00D9C8. Class hooks rm-core / rm-ray are the animation contract with relay-pulse.css.
WeightsUnboxed strokes carry heavier weight: 2.2 full · 2.6 compact · 3.0 favicon. Diagonals 55% opacity. Compact drops diagonals; core drops rays entirely.
03 The pulse

Motion is the brand's heartbeat — and it has one colour.

Legacy teal #00D9C8 is retired from static use and is now the pulse colour — it only ever appears in motion. A Code being received flashes #00D9C8 once, then settles to system teal. If it glows, it's alive. Six moments: heartbeat · receipt flash · send burst · awaiting · arrival ring · broadcast (hidden). Spec: briefs/SPEC.pulse-motion.md · CSS: brand/relay-pulse.css

Timing. Brand pulse: 2.8s ease-in-out loop. Product UI stays ≤0.18s — the pulse is a brand-surface behaviour, never a product transition.

Receipt flash. One 0.9s ripple in #00D9C8 on the moment a relay is received. Once. Never looping on product surfaces.

Reduced motion. Everything disables under prefers-reduced-motion. The static mark must carry the brand alone.

Hierarchy. One pulsing element per view, maximum. The heartbeat reads because everything around it is flat and still.

04 Colour

White canvas, teal-tinted ground, colour on touch points only.

Light — primary experience
bg
#FFFFFF
surface
#F5FAF9
panel
#EDF7F5
deep
#E2F0EC
teal · primary + mark
#0D9488
teal-dim
#CCFBF1
indigo · secondary
#6366F1
text
#0F1F1E
text-2
#446160
success · received
#16A34A
warning · pending
#D97706
error · expired
#DC2626
Dark — terminal contrast, not primary
bg
#0D0D0D
surface
#181818
panel
#222222
teal + mark
#2DD4BF
indigo
#818CF8
pulse · motion only
#00D9C8
05 Typography

Three voices, never mixed up.

Display
Cormorant Garamond
300 italic
Context gets to who needs it, when they need it.
Body / UI
Outfit
300–600
All product text, nav, labels, and subheads. Light by default (300), medium for labels (500), semibold for actions and headings (600). The wordmark — RelayCTX — is Outfit 600, −0.02em, never split, never recoloured.
Codes / meta
JetBrains Mono
400–600
QNHC2C
Retired
do not use
Syne · DM Mono — fully retired in v3.4. IBM Plex Sans is the marketing site (relayctx.com) only, never app or decks.
06 The Code

Six characters carry the whole product.

JetBrains Mono 600 · uppercase · 0.15em tracking (0.18em hero) · always teal. It's a Code — never PIN, never relay ID, never "Relay Code" (retired — "relay" is the verb). Click it.

QNHC2C
↑ the receipt flash — #00D9C8, 0.9s, once
07 Voice

Write short. Then cut half.

Say

  • relay — the verb, lowercase. "relay a Code"
  • Code — capitalised, six characters
  • receive — what happens on the other end
  • context layer — what RelayCTX is
  • continuity — the benefit framing
  • orgs, teams, operators — the audience
  • Join Relay → — the locked primary CTA

Don't say

  • handoff → relay / transfer
  • PIN · relay ID · Relay Code → Code
  • claim · accept → receive
  • memory · persistence → continuity
  • enterprises → orgs, teams, operators
  • seamless · AI-powered → never
  • Click here · Learn more → verb-led CTAs
08 Guardrails

The rules that keep it Relay.

Lead positive. Continuity, not loss. Show the product, don't describe it.

Flat product UI. No shadows, gradients, or glows. The pulse is the only living thing.

Touch points only. Teal and indigo on interactive elements — never prose, never decoration. The surface tint is ground, not touch point.

Indigo is secondary. Org/team/pro hierarchy only. Primary action is always teal.

No orange. No warm dark mode. Terminal dark is pure neutral.

No terminal windows or code blocks in brand-facing creative.

Light is primary. Dark is a contrast mode the user chooses, never the default face of the brand.

Accessibility is brand. 3px teal focus ring, WCAG AA contrast, reduced-motion always honoured, status never by dot alone.