Brand & design system¶
One system. Every surface. v3.4. Light-primary, teal-tinted, flat. There is no warm/deck variant — earlier docs that describe "two visual systems" are superseded; the v3.4 brief locks a single system across app, web, marketing, and decks.
Canon source
relay-creative/briefs/BRIEF.design-v34.md is the authoritative spec.
brand/BRAND-BRIEF.md is the condensed brief. When a token file (e.g.
relay-tokens.css) disagrees with the brief, the brief wins — some token
files still carry stale v3.2 neutral greys.
Colour — light (primary)¶
| Token | Value | Use |
|---|---|---|
| bg | #ffffff |
Page background |
| surface | #f5faf9 |
Cards, sidebars — teal-tinted |
| panel | #edf7f5 |
Nested panels, inputs |
| deep | #e2f0ec |
Hover / pressed |
| border | #daeee9 |
Dividers, card edges |
| border-hi | #b8dbd5 |
Focus / active emphasis |
| text | #0f1f1e |
Body — teal-tinted near-black |
| text-2 | #446160 |
Labels, metadata |
| text-muted | #8caaaa |
Placeholders, disabled |
| text-bright | #060f0f |
Headings, emphasis |
| teal | #0d9488 |
PRIMARY — CTAs, Codes, active states |
| indigo | #6366f1 |
SECONDARY — org/team/pro tier only |
| success / warning / error | #16a34a / #d97706 / #dc2626 |
Received / pending / failed |
Colour — dark (terminal contrast, opt-in)¶
Pure neutral ground, no warm undertone: bg #0d0d0d, surface #181818, text
#e0e0e0, teal #2dd4bf, indigo #818cf8. Applied via [data-theme="dark"] —
never the default.
Typography¶
| Role | Font | Use |
|---|---|---|
| Display / headlines | Cormorant Garamond 300 italic | Hero moments, editorial headings |
| Body / UI | Outfit 300–600 | All product text, nav, labels, subheads |
| Wordmark | Outfit 600 | RelayCTX mark only |
| Codes / metadata | JetBrains Mono 400–600 | Codes, IDs, timestamps, eyebrows |
Retired: Syne, DM Mono. IBM Plex Sans is the marketing site (relayctx.com) font only — never in app or decks.
Key patterns¶
- Wordmark: always RelayCTX, Outfit 600, letter-spacing −0.02em. Never split, reorder, or recolour.
- Code: uppercase, JetBrains Mono 600, 0.15em tracking, teal
#0d9488. Call it a Code (see Vocabulary). - Logo mark: broadcast symbol — dark rounded square, teal centre + 8 radiating
strokes. Source
brand/relay-mark.svg. The mark uses legacy teal#00D9C8intentionally — mark-only, not product teal. Always inline SVG, never<img>. - Cards: surface bg, 0.5px border, 8px radius, 16px padding, no shadow.
- Primary button: teal bg, white text, Outfit 600, 6px radius.
Rules¶
- Light mode is primary; dark is terminal contrast, not default.
- Flat surfaces — no drop shadows, gradients, or glow in product UI.
- Teal/indigo on touch points only — not prose or decoration (surface tint excepted).
- Indigo is strictly secondary — never a primary action.
- No orange (conflicts with teal). No warm tones in dark mode.
- Transitions ≤ 0.18s, always respect
prefers-reduced-motion. - Focus ring: 3px teal box-shadow — never
outline: nonewithout a visible replacement.
Where the assets are¶
relay-creative/brand/ — BRAND-BRIEF.md, relay-design-system.md,
relay-tokens.css, relay-design-tokens.json (Token Studio → Figma),
relay-mark.svg, favicon.svg. This KB's theme
(docs-src/assets/stylesheets/relay-v34.css) is itself a v3.4 reference build.