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. Ratified for AA-large (7HZQAX).3.7:1 · AA large
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.