RELAY² BRAND GUIDE
Paste it. Track it. Share it.
How to show Relay² the right way: the logo, colour, type, icons, imagery, motion and voice, plus everything you need to download.
02 · LOGO
One master, outlined.
Always use the vector masters below. Never retype the wordmark, redraw the badge or move the 2.
OUTLINED VECTOR
NO LIVE TEXT
Variants
Ink on white
Default. Use wherever the background is white.
UInk on paper
Marketing pages and paper surfaces.
White on Electric Blue
Hero fields and campaign backgrounds.
White on ink
Dark UI, video end frames.
Electric Blue on white
Single-colour use only.
Badge mark
Avatars, favicons, tight spaces.
App icon · ink (dark / mono)
Dark-mode alternate icon and one-colour / mono placements.
App icon · Electric Blue (primary)
Primary: app stores, home screens, PWA and favicons.
Construction
WORD 130
BADGE Ø 70
2 = 43
SHADOW +6, +12
RATIO 130 : 70 : 43
Use the supplied vector wordmark. Keep the raised lime badge, proportions and shadow intact. Never retype or rebuild the logo.
Clear space
Keep at least one badge diameter (x) of space on every side. x = 25% of the wordmark width.
Minimum size
Wordmark ≥ 80 px wide · 20 mm print
Badge ≥ 24 px
App icon ≥ 29 px
Below these sizes, use the badge mark on its own.
Don't
Don't place it on lime
Don't stretch or squash
Don't rotate it
2
Don't recolour the badge
Don't add rings, glows or extrusion
NEW DROP
Don't crowd it or overlap type
03 · COLOUR
Ink, Electric Blue, a spark of Lime.
Four core colours on paper and white. Gold and red are reserved: Premium only and danger only.
Ratio
60%
25%
10%
5%
Paper / white 60%
Ink 25%
Electric Blue 10%
Lime 5%
Neutral first. One dominant field per layout, then Electric Blue for emphasis and Lime only as a spark: buttons, the badge, selected accents.
Grays & borders
Borders are 1px light gray. No 2px black outlines on cards, swatches or the wordmark.
Reserved colours
Gold · Premium only
#FFB800
Premium
Ink on gold 11.4:1. Never gold text on white (1.7:1).
Red · Danger only
#B42318
Delete link
6.6:1 on white. Errors and destructive actions only.
Contrast (WCAG 2.2)
Aa
Ink on Paper
17.9:1
AAA
Aa
Ink on White
19.7:1
AAA
Aa
White on Electric Blue
6.7:1
AA
Aa
Electric Blue on White
6.7:1
AA
Aa
Ink on Lime
16.6:1
AAA
Aa
Lime on Electric Blue
5.7:1
AA
Aa
Muted text on White
7.0:1
AAA
Aa
Gray 400 on White
3.3:1
Large only
Aa
White on Lime
1.2:1
Fail
Aa
Gold on White
1.7:1
Fail
AA = 4.5:1 for body text, 3:1 for large text (24 px+, or 18.7 px bold) and icons. Check the real foreground and background pair every time.
04 · TYPOGRAPHY
Inter, set with intent.
One family across product and marketing. Big and tight for short heads, calm and level for everything people need to read.
PRODUCT & MARKETING TYPEFACE
Aa
Inter
Inter is our typeface across product and marketing. Use its clear, familiar letterforms for readable interfaces and confident headlines.
Regular
Medium
Semi Bold
Bold
Extra Bold
The wordmark is a supplied vector asset. Never recreate it with a font.
Display
88/86 · Extra Bold · -3.5%
Share it.
H1
64/64 · Extra Bold · -3%
Track it.
H2
48/52 · Extra Bold · -2%
Paste it. Track it.
H3
28/34 · Bold · -1%
See where every click came from
Body L
18/28 · Medium
Paste a link, then share it anywhere your audience is.
Body
16/24 · Regular
Paste a link, then share it anywhere your audience is.
Small
14/20 · Medium
Paste a link, then share it anywhere your audience is.
Label
12/16 · Bold · +10%
SAMPLE DATA
Display weights (Extra Bold, tight tracking) are for short heads only: three to six words.
Body copy, URLs, prices and CTAs stay readable: Regular to Semi Bold, normal tracking, sentence case.
Uppercase is for small labels (12 px, +10%), never for sentences.
Use tabular numbers in metrics so values do not jump as they update.
05 · ICONOGRAPHY
Clear icons, real objects.
Line icons for the product UI, official marks for platforms, and real photographed cutouts for categories.
Product icons
24 px grid, 2 px stroke, round caps. Ink by default.
Link types
Same grid. Electric Blue when selected or active.
Status
Always paired with a text label.
Review pending
Enriching
Blocked
Adult content
Platform marks
Official marks in native colours. Never recolour, outline or redraw.
Tiktok
Youtube
X
Threads
Bluesky
Category thumbnails
Real product cutouts for the categories people share.
Category artwork examples
Shoes
Books
Fragrance
Kitchen tools
Gaming
Food & drink
Jewelry
Electronics
Line icons: 24 px grid, 2 px stroke, round caps and joins, no fills. Ink by default, Electric Blue for selected, red only for danger.
Status icons never stand alone. Pair them with a short label.
Platform marks stay in their official colours on white or paper. Do not put them on Electric Blue or lime.
Category thumbnails sit centred on a white tile with a 1 px light gray border. No discs, no outlines, no emoji.
06 · IMAGERY
Real things people actually share.
Photographed, licensed objects, cut out clean. The product speaks; we never fake it.
Shoes · real cutout
Bags · real cutout
Electronics · real cutout
Home decor · real cutout
Drinks · real cutout
Skincare · real cutout
07 · MOTION & SOUND
Three blips and a bloop.
One sound and one sting tie every video back to Relay². Paste it, track it, share it, then the badge lands.
End sting · B4 Click ripple
Closes every ad, post and promo video. Frame-locked to the sonic logo.
2.5 s · 60 fps
9:16 · 4:5 · 1:1 · 16:9
ALPHA FOR OVERLAYS
Paste it.
0.40 s · blip 1
Paste it. Track it.
0.50 s · blip 2
Paste it. Track it. Share it.
0.60 s · blip 3
Paste it. Track it. Share it.
0.70 s · bloop
Paste it. Track it. Share it.
1.75–2.5 s · hold
Play the sting at the end of every video. Append it; overlay only with the alpha files.
Never re-time, re-pitch or replace the audio. Keep other clicks and SFX out of the 150 ms before the first blip.
Keep the sting full-frame. Do not crop or zoom past its 8% safe margin.
Respect reduced motion: show the final logo frame instead of the animation.
08 · VOICE & TONE
Say it like a friend who gets it.
Direct, useful, energetic and specific. We show what people share; we never promise what they will earn.
PRIMARY BRAND LINE
Paste it. Track it. Share it.
CALL TO ACTION
Track your first link here.
CAMPAIGN LINE
Read it. Heard it. Wore it. Share it.
Direct
Say the thing. Short sentences, active verbs.
Useful
Every line helps someone do something.
Energetic
Upbeat, never shouty. One exclamation, max.
Specific
Real objects and real actions, not abstractions.
Say
Not
Share the episode you sent to a friend.
Your proof moves with your products.
Track your first link here.
Unlock your full creator potential today!
See what gets clicked, with recorded source context.
Turn attention into income.
1,248 clicks · Sample data
Creators earn $5k a month with Relay².
Claims & numbers
No income, earnings or conversion claims. Talk about what people share, not what they will make.
Mock numbers always carry a visible "Sample data" label.
Free vs Premium: describe only what each plan actually includes today.
Domains
relay2.app
Site and app
rly2.link
Short links
Only these two. Never any other short domain.
09 · UI COMPONENTS
Links set A, in brief.
White cards, light gray borders, generous corners and one clear lime action.
Buttons
Track a link
Copy link
View details
Delete link
Unavailable
Lime is the one primary action per view, with ink text. 44 px minimum touch height. Radius 12.
Chips & tags
All
TikTok
YouTube
Live
Review pending
Premium
SAMPLE DATA
Everyday trainers
rly2.link/a7Kp2
1,248 clicks
SAMPLE DATA
Clicks · last 7 days
SAMPLE DATA
1,248
Paste a link
https://
Track it
10 · DOWNLOADS & PRESS KIT
Everything, ready to use.
Official files only. If you need something that is not here, ask, and please do not recreate it.
App icon
Electric Blue (primary) + ink (dark/mono) · SVG + PNG 1024 · favicons 16/32/48 + SVG, apple-touch 180, PWA 192/512
Request
Press & partnerships
For interviews, assets in other formats or co-marketing, get in touch. Please do not edit the logo, sting or sonic logo.
support@relay2.app
Get in touch
Paste it. Track it. Share it.