# Relay² brand and product style guide

Version 1 · October 2026 · Based on the approved marketing page and local application.

## 1. Positioning

**One place to manage the links you share and understand what gets clicked.**

Relay² gives emerging creators practical referral infrastructure before they have professional representation: link management, source-aware sharing, traffic visibility, and a record of their commercial activity. A recommendation can be a book, podcast, outfit, article, business, or shop—not only a product for sale.

Lead with present-day creator behavior. Keep agentic routing, APIs, and brand intelligence as supporting product strategy, not the first consumer-facing promise.

- Primary brand line: **Paste it. Track it. Share it.**
- Category expression: **Read it. Heard it. Wore it. Share it.**
- Value expression: **See what gets clicked.**
- Main CTA: **Start tracking ↗**
- Free-plan copy: **3 tracked links free**. Never “3 products free.”

Voice: direct, useful, energetic, specific. Say “Share the episode you sent to a friend,” not “Your proof moves with your products.” Avoid guaranteed earnings, inflated conversion claims, and generic transformation language.

“Tracked value” is not automatically paid revenue. Distinguish estimates, partner-confirmed conversions, and settled earnings. Do not advertise live billing, all-time retention, or integrations until operationally supported. The local Premium checkout is not connected.

## 2. Identity

Write **Relay²** in prose; use lowercase **relay** in the visual wordmark. Plain-text fallback is **relay2**. The enlarged raised 2 in a lime circle is the signature header treatment.

The marketing wordmark currently uses Arial/Helvetica, weight 800, tracking -0.11em. At its 2.3rem word size, the circular 2 badge is 2rem with a 1.25rem numeral. Preserve these proportions when scaling. The orbit-block wordmark is a separate compact treatment; do not substitute it for the header mark.

Production rule: use a vector export of the implemented wordmark. Generated social images are concept artwork, not new master logos. Never redraw the mark from an AI image. Suggested clear space: at least the diameter of the 2 badge around standalone lockups. Do not stretch, add outlines, or add extrusion to the production logo.

## 3. Exact color system

The marketing palette and application semantic colors are related but intentionally not identical. Use the role-specific values below rather than sampling screenshots.

### Marketing / social master palette

| Role | Hex | Use |
| --- | --- | --- |
| Electric blue | `#143CFF` | Hero fields, campaign backgrounds, headline emphasis |
| Acid lime | `#C4FF00` | Raised 2 badge, relay bands, selected accents, hard shadows |
| Marketing coral | `#FF5B35` | CTA surfaces, category blocks |
| Marketing pink | `#FFB4D0` | Recommendation section, supporting category blocks |
| Ink | `#090B0F` | Text, outlines, hard shadows |
| Paper | `#F4F4F2` | Marketing page and entry surfaces |
| White | `#FFFFFF` | Text on electric blue, neutral cards |

### Light application foundation

| Token/role | Value |
| --- | --- |
| Y2K page | `#F4F7FF` |
| Panel | `#FFFFFF` |
| Soft surface | `#EDF1FF` |
| Base ink | `#101722` |
| Base muted text | `#65738A` |
| Y2K divider | `rgba(8,18,48,.16)` |
| Y2K blue | `#143CFF` |
| Y2K mint | `#39DCA5` |
| Y2K coral | `#FF5B35` |
| Y2K purple | `#845CFF` |

The original base theme contains other defaults; the final cascade is authoritative. Light glass panels use white/translucent near-white surfaces, not a translucent text layer.

### Carbon application foundation

| Token | Hex |
| --- | --- |
| `--relay-page` | `#080909` |
| `--relay-panel` | `#121414` |
| `--relay-soft` | `#1B1E1D` |
| `--relay-ink` | `#F4F6F4` |
| `--relay-muted` | `#B0B8B2` |
| `--relay-line` | `#343A36` |
| `--relay-blue` | `#79A5FF` |
| `--relay-mint` | `#69DFB5` |
| `--relay-coral` | `#FF947A` |
| `--relay-purple` | `#BC9AFF` |
| Secondary pink | `#F3A8CD` |
| Lime accent | `#C4FF00` |

Carbon must remain nearly black and neutral. Do not reintroduce navy/blue panel backgrounds.

### Semantic scorecards: consistent in light and dark

| Meaning | Border / sparkline | Icon fill |
| --- | --- | --- |
| Clicks | `#487EE8` | `#79A5FF` |
| Tracked value | `#278064` | `#69DFB5` |
| Returning | `#BD6048` | `#FF947A` |

Scorecard icons use dark ink `#111111` on these pastel fills. Emphasize source and asset cards with borders, not large saturated backgrounds.

### Link-modal colors

The approved Y2K modal uses more vivid action accents: click badge `#2463FF` with white icon; value badge `#28DFA3` with dark icon; returning badge / copy CTA `#FF6847` with dark icon; relay band and hard shadow `#C4FF00`. Selected border `#96B626`; referral-loop accent `#829C00`. These are component-specific colors, not replacements for the marketing palette.

### Rotating tracked-link identities

| Sequence | Border | Arrow badge |
| --- | --- | --- |
| Blue | `#527ED6` | `#9BBCFF` |
| Mint | `#328265` | `#83DFBB` |
| Coral | `#BC6954` | `#FFAC96` |
| Lilac | `#9469C7` | `#D1B2FF` |

Repeat this four-color sequence. Keep product art centered and surfaces neutral; do not recolor third-party logos to match a row.

## 4. Typography

- Marketing: `Arial, "Helvetica Neue", sans-serif`.
- Application: `-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif`.
- Eyebrows, technical labels: Geist Mono via `--font-geist-mono`, monospace fallback.
- Marketing hero: `clamp(4.7rem,9.2vw,10rem)`, weight 900, line-height .73, tracking -.085em. Large section headings: weight 900, line-height .79, tracking -.08em.
- Use extreme tracking only on short display headings; never on forms, URLs, or body copy. Check for collisions at every breakpoint.
- Marketing supporting copy: 1–1.35rem, line-height 1.35–1.5. Product interface: legible sentence case, strong numbers, restrained labels.
- Social production recommendation at 1080px square: 100–160px headlines, 32–44px supporting text, 26px minimum essential footer. This is a campaign layout recommendation, not an existing app token.

No decorative techno font is needed. The identity comes from scale, tight composition, angle, and color. Generated condensed lettering is an exploration; typeset final assets with the approved family.

## 5. Geometry, glass, and depth

- Y2K expression: oversized type, visible ink outlines, hard offset shadows, slight rotation, orbit geometry, emoji-like objects.
- Marketing: 2px outlines; cards commonly 1.4rem corners; orbital core 2rem. Typical tile rotations -2° to +2°, with smaller orbit objects allowed larger angles.
- Product UI: square-forward blocks, generous whitespace. Modal 12px corners, interior cards/buttons 6px, link band 4px. Modal lime shadow 5px 5px, link band hard shadow 3px 3px.
- Keep controls and form text level. Tilt marketing display elements, not interactive form fields.
- Constrain lavalamp/orbital artwork inside one dedicated block with clipping. Never put moving geometry behind body text, metric values, or outside the mobile application bounds.
- Glass is a material accent, not an opacity effect applied to the entire interface. Foreground text remains opaque.
- Reserve major saturation for marketing heroes and small functional accents. Do not fill every product card with a bright color.

## 6. Iconography and taxonomy

Functional icons use Lucide SVG, consistent stroke weight, normally 20–24px inside 38–44px badges.

| Meaning | Icon | Color identity |
| --- | --- | --- |
| Clicks | `MousePointerClick` + small `Plus` | Blue |
| Tracked value / direct sale | `DollarSign` | Mint |
| Returning traffic | `RotateCcw` | Coral |
| Referral terms / referral loop | `Repeat2` | Lime |
| General relay | `Link2` | Neutral |
| Copy / success | `Copy` / `Check` | Contextual |
| History | `History` | Neutral |
| Edit / archive | `Pencil` / `Archive` | Neutral |

The plus must not collide with the click glyph. Referral loops and returning loops have different labels and colors; never rely on shape alone.

Category icons are centered, large, emoji-like objects: books, headphones, clothing, travel packs, food, beauty, etc. No extra white disk behind the object. Existing taxonomy determines category assignment. Native emoji appearance varies by operating system; campaign art may use a curated 3D rendering, but product taxonomy needs stable licensed assets for identical cross-platform output.

### Supplied social logos

Use the real files in `public/brands/`:

- `Instagram_logo_2022.svg`
- `TIKTOK_NOTE_BLACK.svg` for light surfaces
- `TIKTOK_NOTE_WHITE.svg` for dark surfaces
- `X_logo_2023.svg` with responsive viewBox; monochrome inverse on dark
- `Facebook_Logo_Primary.png`

Do not replace these with letters, generic music notes, approximations, or AI-generated marks. Preserve aspect ratio and native brand colors. The component is `components/platform-logo.tsx`.

## 7. Product component rules

### Entry and onboarding

The pasted link is the primary input. One clear import/forward arrow. No artificial “Reading link” screen. Preserve referral parameters. Present the generated relay before account completion. Keep onboarding steps out of the signed-in workspace after adoption.

### Live links

Show specific links with per-link stats. A single arrow opens the detail modal; do not clutter the row with duplicate copy/settings actions. Archived links remain discoverable. Free limits apply to tracked links, not product categories.

### Link detail modal

1. Category art, link label, destination.
2. General / Instagram / TikTok / Facebook / X selection.
3. Persistent lime relay band and copy action. Platform selection changes the displayed/copied source-tagged URL; it does not pretend to create a different backend link.
4. Overview / History / Settings navigation.

Overview: prominent clicks and tracked-value cards; referral terms with model-specific icon. No Happening Now feed here.

History: simple 1 / 7 / 30-day buttons and three icon-led totals: clicks, tracked value, returning visits. The 30-day Free selection may show a dismissible first-use Premium promotion, but must not block the free summary. Do not invent live timestamps, totals, or platform breakdowns. The current backend returns the latest 90 daily rollups; do not equate that with unlimited history.

Settings: percentage model shows % rate and hides currency; flat-per-sale/click shows amount per sale/click and currency; Not agreed yet shows N/A without amount fields. Preserve the shortened URL on edits. Archive explains that redirects stop while the record remains.

### Premium

Keep preview/sample content explicitly labeled. Blurred advanced preview plus a clear offer may explain unavailable features. Never blur real basic metrics that belong to Free. A promotion is not a checkout; local billing remains unconnected.

## 8. Motion, mobile, and accessibility

- Current entrance: 300ms ease-out; cards 420ms with 55ms stagger increments.
- Honor `prefers-reduced-motion`. Avoid animation that suggests data arrived when it did not.
- Marketing ticker may move; essential copy must also be readable without chasing motion. Provide pause where sustained animation is presented.
- Minimum 44px interactive targets. Inputs at least 16px on mobile. Wrap long URLs, stack constrained grids, and keep dismiss controls reachable.
- Focus must be visible. Selected icons also have accessible names and pressed states. Copy feedback uses a status announcement.
- Verify contrast for the actual foreground/background pair. Lime uses dark text, not white. Do not use muted palette samples as body text without checking contrast.

## 9. Social campaign system

Three initial mock posts are in `design/brand/social/`. They are generated concept PNGs, not pixel-exact brand masters. Typography, colors, functional glyphs, logo proportions, and geometry must be rebuilt/checked against this guide before paid distribution. In particular, the first concept's ring spills beyond its block and its extruded wordmark is not the production logo treatment.

| Asset | Message | Role |
| --- | --- | --- |
| `01-paste-track-share.png` | Paste it. Track it. Share it. | Acquisition / simple first action |
| `02-every-recommendation.png` | Read it. Heard it. Wore it. Share it. | Breadth beyond products |
| `03-see-what-clicks.png` | See what gets clicked. | Visibility / product benefit |

Suggested captions:

1. **Your next recommendation starts with a link.** Keep it organized, see what gets clicked, and share it wherever your audience is. Start with 3 tracked links free.
2. **The book. The episode. The outfit.** Not every recommendation is a product for sale. Give what you share a trackable link.
3. **Less guessing about your links.** See clicks, tracked value, and returning traffic in one place. Start with a link.

Suggested alt text:

1. Blue Relay² graphic with oversized “Paste it. Track it. Share it.” lettering and a coral Start tracking action.
2. Paper-colored Relay² graphic with books, headphones, and a folded shirt beside “Read it. Heard it. Wore it. Share it.”
3. Carbon Relay² graphic reading “See what gets clicked,” with click, tracked-value, and returning-traffic icons.

Production layout recommendation: 1080×1080 feed, adapted 1080×1350 portrait, or 1080×1920 vertical. These are design canvases, not claims about current platform upload requirements. Keep essentials within 6% outer margins; validate platform overlays before publishing. One dominant statement, one supporting idea, one CTA. No fake testimonials, performance statistics, partner affiliations, or guaranteed income.

## 10. Source of truth and handoff

Current cascade: `globals.css` → `workspace.css` → `dark-palettes.css` → `finishing.css` → `mobile.css` → `brands.css` → `link-modal.css`, all in `app/`.

Marketing source: `app/creators/page.tsx`, `recommendations.css`, and `.mk-*` rules in `globals.css`.

Functional source: `relay-link-dialog.tsx`, `relay-link-form.tsx`, `platform-logo.tsx`, `live-workspace.tsx` in `components/`.

This guide records existing values and clearly labeled campaign recommendations; it does not silently normalize the app's different coral/blue variants. If tokens are consolidated later, update implementation and guide together. Archived alternate dark palette studies are not approved brand themes.

Release checklist: exact copy; canonical logo; role-correct hex colors; supplied social SVGs; real or labeled sample data; no clipped typography; mobile fit; both themes; keyboard focus; reduced motion; tested destination and CTA; correct Free/Premium claims.