# Relay² Marketing Brand Guide

This guide defines how Relay² presents itself to creators on the marketing site and in acquisition campaigns. Designers, writers, and developers should use it to preserve the approved Y2K direction while explaining the product plainly: manage the links you share and understand what gets clicked.

It complements [the product style guide](styleguide.md). Marketing can be loud and expressive; the application stays calm and useful. This document does not change the website or declare proposed copy approved.

## Brand position

**Relay² is the place to manage your recommendation links and see what gets clicked.**

The audience includes people growing a following, independent publishers, small businesses, and established creators. The initial story should be recognizable to someone sharing a book, podcast, outfit, article, or favorite shop. Affiliate commerce is an important use case, not the definition of every link.

The brand promises a simple first action and useful visibility. It does not promise guaranteed income. Explain commercial outcomes only where the product has evidence to support them.

The marketing hierarchy is:

1. Paste a recommendation link.
2. Get a relay to share.
3. See clicks and available traffic signals.
4. Add commercial terms and explore deeper reporting as needed.

Do not lead the consumer homepage with APIs, agentic traffic, embeddings, or an attribution graph. Those belong in technical and partner material.

## Personality and language

Relay² is bold, approachable, and capable. Express confidence through specific actions rather than abstract promises. Headlines can be playful; explanatory copy should remove uncertainty.

| Use | Avoid |
| --- | --- |
| See what gets clicked. | Unlock the power of your influence. |
| Share the episode you sent to a friend. | Products move. Your proof moves with them. |
| 3 tracked links free. | 3 products free. |
| Keep your links in one place. | The ultimate creator ecosystem. |
| Track the value of your referrals. | Turn every click into cash. |

Use “link,” “recommendation,” and “creator” as everyday words. Prefer “tracked value” to “revenue” unless money is confirmed. Do not describe estimated earnings as purchases or paid commissions.

## Wordmark

The visual identity is lowercase **relay** with a prominent raised **2**, usually held in an acid-lime circle. In written copy use **Relay²**; use **relay2** only where plain text is necessary.

The marketing header currently renders the word at 2.3rem, weight 800, tracking -0.11em. The circular badge is 2rem across with a 1.25rem numeral, raised by .35rem. Preserve the relationship when scaling; the 2 must remain a recognizable part of the brand rather than a footnote.

Use ink on light backgrounds and white on dark or blue backgrounds, retaining the lime badge. Keep clear space approximately equal to the badge diameter. This clear-space rule is a production recommendation.

Never stretch the mark, replace it with a generic chain-link logo, outline the letters, or adopt the extruded logo from a generated concept as the master. Export final wordmarks from the approved implementation or a faithful vector reconstruction.

## Marketing palette

These values come from the approved `.mk-*` website styles. Do not sample approximate colors from screenshots or generated artwork.

| Color | Hex | Primary role |
| --- | --- | --- |
| Electric blue | `#143CFF` | Hero and closing sections; strong type emphasis |
| Acid lime | `#C4FF00` | Brand badge, relay signal, selected accents, hard shadows |
| Coral | `#FF5B35` | Primary entry action; recommendation tile |
| Pink | `#FFB4D0` | Recommendation section; softer category accent |
| Ink | `#090B0F` | Main type, outlines, solid shadows, dark proof section |
| Paper | `#F4F4F2` | Navigation, page breathing room, entry block |
| White | `#FFFFFF` | Text on blue; clean card surfaces |

### Pairings

- Electric blue with white headlines and lime emphasis is the main acquisition expression.
- Paper with ink type is the explanatory expression.
- Pink with ink type and lime/coral/white tiles is the recommendation expression.
- Ink with white type and limited colorful objects is the proof expression.
- Lime and coral controls use dark text, not white text.

Do not use all accent colors at equal strength in one composition. Establish one dominant field, one neutral, and one or two accents. Gradients belong to contained glass artwork, not every background.

### Carbon campaign variation

For campaigns that reference the product's dark mode, use Carbon page `#080909`, panel `#121414`, soft surface `#1B1E1D`, text `#F4F6F4`, secondary text `#B0B8B2`, and borders `#343A36`. Carbon is neutral near-black, not navy. This campaign variation does not replace the marketing site's ink proof section.

## Typography

The marketing family is **Arial, Helvetica Neue, sans-serif**. Geist Mono is reserved for section numbers, small technical labels, and eyebrows. Avoid adding a futuristic font: the Y2K feeling comes from scale, composition, color, and depth.

| Element | Current website treatment |
| --- | --- |
| Hero | `clamp(4.7rem, 9.2vw, 10rem)`; weight 900; line-height .73; tracking -.085em |
| Section headline | `clamp(3.6rem, 8vw, 8.4rem)`; weight 900; line-height .79; tracking -.08em |
| Hero support | `clamp(1rem, 1.5vw, 1.35rem)`; line-height 1.35 |
| Section body | Typically 1.05rem; line-height 1.5 |
| Navigation | .78rem; weight 700; uppercase |
| Eyebrow | .72rem; Geist Mono; tracking .08em |
| Recommendation title | `clamp(1.25rem, 2vw, 1.65rem)`; line-height 1.15 |
| Recommendation body | 1rem; line-height 1.5 |

Use uppercase for short display statements, not paragraphs. Slight rotation can emphasize one line. Keep supporting copy, URLs, and controls unrotated where readability requires it. Tight display settings must be checked for collisions; never squeeze long copy to preserve a desktop line break.

## Shapes and materials

The vocabulary consists of square-forward blocks, softened corners, orbital rings, centered category objects, and visible hard shadows.

- Marketing cards: 2px ink outlines and approximately 1.4rem corners.
- Orbit core: 2rem corners, a hard 1.2rem offset shadow, and a small rotation.
- Category tiles: mild -2° to +2° rotation. The center tile may sit slightly lower on desktop.
- Entry block: paper surface, dark outline, lime offset shadow, and coral action.
- Buttons: strong solid fills, clear directional arrow, generous touch area.
- Glass: one bounded visual feature, such as an orbital object or liquid form within a card. Keep it away from copy and controls.

Create depth with layered surfaces and shadows before adding blur. Do not let lavalamp geometry leak outside a section or cover text. Avoid soft gradient haze across the whole page.

## Images and icons

Recommendation objects communicate breadth immediately: a book stack, headphones, clothing, travel gear, beauty, or food. Use one recognizable object per tile, centered at generous scale. Do not place every object on an additional white circular background.

Campaign objects may be polished emoji-like 3D renders. Keep lighting, viewing angle, and material quality consistent across a set. Native operating-system emoji remain a prototype convenience, not a reliable cross-platform production asset system.

Functional marks should come from the app's SVG family:

| Meaning | Icon |
| --- | --- |
| Link input | Link2 |
| Traffic signal | Radio |
| Click | MousePointerClick with small Plus |
| Direct sales or tracked value | DollarSign |
| Referral | Repeat2 loop |
| Returning visitor | RotateCcw |
| Next action | ArrowRight or ArrowUpRight |

Use real supplied Instagram, TikTok, Facebook, and X artwork whenever naming those platforms visually. Do not regenerate social logos. Use the appropriate light/dark variant and preserve their own brand colors. Their presence must not imply an unconfirmed partnership.

## Marketing page structure

### Navigation

Keep the Relay² wordmark prominent, explanatory anchors secondary, and Sign in separate from acquisition. The current site uses How it works, For creators, and Premium anchors. On narrow screens, remove the crowded link row while keeping a clear way into the app.

### Hero and link entry

The current headline is **TURN ATTENTION INTO INCOME↗**. Keep this as the recorded approved page copy, not a guarantee that every link earns money.

Current support copy:

> Share what you recommend. Keep your links in one place, see what gets clicked, and track the value of your referrals.

The link field is the main conversion action, not a secondary feature below a generic sign-up button. Use **START WITH THE LINK** above it and **START TRACKING ↗** on the action. Keep the free allowance and lack of credit-card requirement close to the action where accurate.

Recommended future headline test, not yet applied: **PASTE IT. TRACK IT. SHARE IT.** This makes the behavior and broader audience clearer.

### How it works

Use the three-part sequence **PASTE IT / RELAY IT / PROVE IT** with large icon blocks and short explanations. A person should understand the flow without reading a paragraph about link infrastructure.

Recommended explanation for routing: “Get one short link to share.” Avoid “the best route” unless destination selection is actually implemented and validated for the claim being made.

### Performance proof

The existing visual headline is **YOUR LINKS, DOING NUMBERS.** Show the interface's visual language: large values, clear labels, bold icon badges, and a restrained activity example.

Any illustrative totals, percentages, or performance windows must be labeled **Sample data** near the data. Do not present the current demo's 12,480 clicks, $8,290 value, or 2.4× lift as customer results. Replace examples with substantiated outcomes before using them as proof.

### Every recommendation

Use the approved headline **READ IT. HEARD IT. WORE IT. SHARE IT.**

Keep three human moments visible:

- Book: “You need to read this.”
- Podcast: “Listen to this one.”
- Clothing: “Here’s where I got it.”

The supporting idea is that a creator can share a favorite or earn a referral. Do not force every tile into shopping language.

### Premium explanation

The existing `#premium` anchor currently lands on Every Recommendation. It is not a dedicated pricing section. Before a public paid launch, either rename that navigation destination or add a genuine Premium section.

A future Premium section should separate the free offer from paid features, show actual pricing and billing terms only when decided, and explain unavailable features honestly. Do not imply the local build's unconnected checkout can process a subscription.

### Closing action

Return to one clear link-entry action. The current **START WITH A LINK** button focuses the hero input. Preserve the user's entry if they have already typed a destination.

## Responsive design

The current marketing page stacks major grids below 900px and adds smaller-screen adjustments below 560px. These are implementation breakpoints, not device assumptions.

On mobile, keep headline impact but prioritize a usable field and full-width action. Stack category cards; remove unnecessary stagger; wrap benefit labels; keep arrows and controls inside the screen. Do not shrink the entire desktop composition into a miniature poster.

Preserve whitespace between the headline, support copy, input, and product imagery. Product objects can become smaller; essential text must not become microscopic.

## Motion and accessibility

Motion is punctuation. The marketing ticker currently uses a 22-second loop. Provide a pause mechanism for ongoing motion and respect reduced-motion preferences before public release. Never rely on a moving ticker to carry the only explanation of a benefit.

Use visible keyboard focus, labeled inputs, readable contrast, at least 44px touch targets, and meaningful alt text for informative images. Decorative geometry should be hidden from assistive technology. Check real color combinations; a palette alone does not establish accessible contrast.

## Social campaign adaptation

Use the same three expressions as the page: blue acquisition, paper recommendation breadth, and Carbon performance. Each post should have one headline, one focal object or product element, and one action.

The generated mockups in `design/brand/social/` explore those directions. They are not canonical logos or exact typography references. Rebuild final typography and marks using these rules. Remove the first concept's overflowing glass ring and extruded logo before treating it as a production execution.

Suggested caption:

> The book you keep recommending. The episode you sent to a friend. The outfit everyone asks about. Keep the links you share in one place—and see what gets clicked. Start with 3 tracked links free.

## Source and implementation

The approved local marketing route is `/creators`.

- Layout and copy: `app/creators/page.tsx`
- Marketing styles: `.mk-*` rules in `app/globals.css`
- Recommendation refinements: `app/creators/recommendations.css`
- Supplied platform assets: `public/brands/`
- Product token reference: `styleguide.md`

Production checks: correct wordmark, exact palette, legible mobile headings, functioning link entry, accurate Free allowance, labeled sample metrics, no unsupported income claims, real platform logos, accessible focus and motion behavior, and a clear transition into the application.

This guide records the current design and names the remaining marketing cleanup explicitly. It does not certify billing, attribution, retention, accessibility compliance, or production readiness.