The Open Signal mark
An unboxed radial burst drawn entirely in currentColor, with no container and no fixed hex. Set color on the parent and the mark inherits it: --rly-accent-ui in light, #2dd4bf in dark, white on a teal fill. Never hand-roll the SVG; inline the canonical asset. Syne is retired; the wordmark is Outfit 600 text.
Mark · three optical sizes
Unboxed, always. No rounded-rect container on web or app. Rays thin as the mark shrinks; the core holds. Source of truth: relay-mark.svg.
currentColor · one mark, every ground
On a dark ground the token flips to #2dd4bf automatically. The SVG never changes; only the inherited color does.
Lockup · mark + Outfit-600 wordmark
Trademark. RelayCTX™ and Relay Context Inc.™ carry the ™; it is set in Outfit upright as a superscript (~0.42em) that inherits the wordmark colour — never teal. Use it on primary / first use only: the lockup’s Full form and the first prominent wordmark. Nav, body, and repeated wordmarks stay bare.
Depth from a neutral ramp, not shadow
Every surface is true-neutral grey. The old v3.4 teal-tinted whites (#f5faf9, #edf7f5) are retired. Layering bg → surface → panel → deep is how the interface builds hierarchy: no drop-shadows, no gradients on chrome. Teal appears nowhere in this section, and that is the point.
Surface ramp · light mode
Default 0.5px dividers.
Focused / active edges.
Form input borders.5.1:1 · AA non-text
Body copy.18.9:1 · AAA
Labels, metadata.9.7:1 · AAA
Captions, placeholders.6.2:1 · AA
Disabled / decorative only.WCAG-exempt
Canonical orientation: bg darkest, cards lighter.
Four teal slots, split by contrast job
One brand teal, four roles, because a fill and a link have different contrast requirements. Reach for the slot that matches the job, and the ratio takes care of itself. In dark mode all four move to #2dd4bf and text-on-fill flips to the ink colour #0d1514.
Icons, focus rings, the mark, button fills.3.7:1 · AA non-text
Links and Codes rendered as text.5.5:1 · AA
Button backgrounds. RCTX-240 ratified 2026-08-12 — was #0d9488 at 3.74:1, which fails AA at button sizes.5.47:1 · AA
Text on a teal fill. Dark uses the ink-flip.ink-flip 9.9:1
Teal-tinted chip / badge backgrounds behind accent-text.
1.9:1, so it fails everywhere. In dark mode always ink-flip, never white-on-teal.
#00D9C8, the pulse, is motion only
The bright pulse cyan exists for one job: --rly-pulse drives the heartbeat, send-burst, and arrival-ring animations in relay-pulse.css. It is never a static fill, text colour, or border. If it isn't moving, it shouldn't be on screen. (The hero mark above is its only static-page appearance, and it's animated.)
Status colour, never colour alone
Four semantic hues, each AA as text on white. Indigo is reserved for org / team / pro-tier surfaces. Meaning is always carried by an icon or label as well as the hue, never colour on its own.
Received, confirmed.4.8:1 · AA
Pending, expiring.AA text
Expired, destructive.AA text
Org / team / pro tier only.
Three families, one job each
Cormorant Garamond for editorial display, Outfit for everything in the interface, JetBrains Mono for Codes and metadata. No fourth font. Syne, IBM Plex, and DM Mono are retired.
The session ends,
context shouldn’t.Context moves. Memory persists.
Relay moves working context across sessions, tools, agents, and people, packaged behind a short Code and claimed in one action.
QNHC2C
Transferred 2 mins ago · 04 Jul 2026 · 09:41 UTC · direction 7HZQAX
Syne IBM Plex Sans DM Mono: off the system. Any file still loading these fonts is out of date; the wordmark is Outfit 600 text, never Syne.
Live from the tokens
Rendered straight from relay-tokens-v35.css, not mockups. Tab to any control to see the 3px teal focus ring from the token baseline.
Buttons
Fill: accent-fill bg · on-accent ink · Outfit 600 · r6. Ghost: surface bg · border-hi. Danger: error text + tinted edge.
Input · Code field
Border: border-input #6e6e6e (1px). Focus: accent-ui border + 3px teal ring. Try tabbing in.
Badges & pills
Mono 500 · uppercase · pill radius. Status pills pair a dot with a label, never colour alone.
The Code · the hero artifact
Inline in prose: share the code QNHC2C with your recipient. Mono 600 · 0.15em · accent-text.
Card · standard relay
Q3 Planning: Project Brief
Full Q3 planning materials, session notes, and the decision log from the June 8 workshop.
Anatomy: surface bg #f7f7f7 · 0.5px border · r8 · 16px padding. Depth is the ramp, not a shadow. The Code sits at the same weight as the timestamp it outranks, because the Code is the product.
Radius scale
Four steps. Buttons and inputs at 6px, cards at 8px, small chips at 4px, pills fully round. Nothing else.
The short list
The whole system reduces to a handful of rules. Breaking one produces an off-spec surface.
Do
- Build in black and white first; add teal last, only on touch points.
- Draw the mark in currentColor and inline the canonical SVG.
- Layer bg → surface → panel → deep for depth.
- Pick the accent slot that matches the contrast job.
- Keep every focus ring: the 3px teal box-shadow is required.
- Pair status colour with an icon or label.
Don’t
- Tint surfaces, prose, or chrome teal: brand is a layer, not a ground.
- Render #00D9C8 as a static fill, text, or border: it is motion only.
- Put white text on a teal fill: ink-flip in dark, always.
- Box the mark or set a fixed hex on it.
- Use Syne, IBM Plex, or DM Mono: all retired.
- Reach for a drop-shadow or a gradient on chrome.
The lines you can actually use
Approved copy, at hand. The law is GUIDE.voice.md and the words themselves are locked in _VOCAB.md — this section surfaces what they permit so nobody writes a fresh line when a ratified one exists. Where the two disagree, the guideline wins and this page is the bug.
The voice in one line. Relay states a mechanism and stops. It does not sell the outcome, and it never claims more than the pipe actually does. The persuasion is that the thing is described accurately.
The signature move — the two-beat
A symmetrical pair where the second beat turns the first — a reversal, a completion, or a scope jump. A pair whose halves merely repeat each other is the failure. Budget: one two-beat per surface. It is a headline device; in body copy it becomes a tic.
Single beats — section heads and steps
Live on relayctx.com right now
Every row below was read off the deployed page, not off a brief. If a line is not here, it is not currently in market — see the ratified-but-unshipped set underneath.
| Slot | Line | Note |
|---|---|---|
Landing h1 | Context for AI. When you need it. Where you need it. | A statement and its two conditions. The landing says what Relay is for. |
| Landing beat | Context that moves. | Runs directly under the apex with its teal rule, and now carries the hero alone — the explanatory sub was dropped 08-28. Context is the subject, movement is a property; never “portable sessions”, which promotes the pass to the centre. Same line is the LinkedIn tagline. |
| Meta & social description | Context that moves. Early access to Relay. | The <meta> description and link previews. |
Register h1 | Version control, for the context you own. | The register says what Relay is. |
Carried variant h1 | Context, carried. | Its own headline, which is why that page does not also take the set line. |
| CTAs | Join Relay → · Request access · relay it → · Get access → | CTAs carry the verb. Never “Learn more” or “Click here”. |
Ratified, not currently in market
Approved and quotable — in a deck, a reply, a one-pager — but not on a page today, so do not describe them as live. Move Context with Relay (RCTX-283) · Context Portability Across Systems (RCTX-800) · “You can always leave with all of it.” — the ratified ownership guarantee, and the only sanctioned phrasing of it; never “your knowledge is safe with us”.
Never
The three overclaim traps
These look like good copy and are wrong about the product — voice failures, not vocabulary failures. 1 · A Code does not confer value. All packaged context is valuable; a Code only means it has been wrapped for transport. The wrapper is not the gift. 2 · The Code is the seal, not the package. Copy that makes the Code the hero is selling the envelope. 3 · Continuity is deliberate, not passive. Anything implying Relay quietly watches, retains, or remembers is off-message and wrong about the product.
Which file goes in which slot
Every platform wants a square and crops it to its own shape. What decides the asset is not the platform — it is the crop shape and the size it renders at. Files: the pack. Downloads on one screen: the cheat sheet.
The one rule. Upload 1024×1024 everywhere and let the platform downsample — it beats matching each published minimum, and those minimums change. Then pick by size: mark-only below ~64px, lockup at ~96px and above. The wordmark is comfortable at 96, marginal at 48, and gone at 32; that was measured under real circle crops, not estimated.
Profile picture
Feeds dominate impressions on every consumer platform, which is why mark-only is the default almost everywhere. The lockup tile earns its place where an avatar is only ever seen large — a directory listing, a press kit, a partner page, a conference profile. Its geometry is circle-safe, so a round crop clips nothing when you do use it. It carries the ™, and it is the only avatar that may — the ™ attaches to a wordmark, and the mark-only tile has none.
Covers, banners, link previews
relay-social-og.png, ready in the pack. PNG, not SVG — most platforms will not read an SVG.Banner sizes are the one thing here that rots. Platforms change them without notice and this page cannot know when. Treat the numbers as a starting point, upload generously, and check the live page. The crop-shape and size-threshold logic above is the durable part — it holds regardless of what any platform does to its layout.