Primary logo
SVG For light backgrounds and primary brand moments
RelayX Brand guidelines · Version 1.0
Make every appearance unmistakably RelayX
A practical brand manual for design, marketing, engineering and partners — review the rules, copy design tokens and download production-ready assets
01
Identity system
Brand mark
The mark is RelayX’s most consistent recognition asset — always use official files, never redraw, screenshot or recolor itBrand casing
RelayXThe only approved casing
Official logo files
Choose the correct version for the background and production method
Reversed logo
SVG For dark backgrounds, end cards and dark themes
Monochrome logo
SVG For one-color print and constrained production
Clear space
Keep at least 1X on all sides, where X equals the mark height
1X1X1X1X
Minimum size
Switch to the symbol when space falls below the recommendation
Digital120 px
Print35 mm
Symbol24 px
Incorrect usage
Preserve the proportions, color and composition of the mark
DON’TDo not stretch or compress
DON’TDo not recolor the mark
DON’TDo not rotate or skew
DON’TDo not add outlines or shadows
DON’TDo not place on busy imagery
DON’TDo not rearrange elements
02
Reading system
Typography
This chapter defines hierarchy and reading rhythm—not font families; keep the same information priority across languages and mediaSize, weight and whitespace establish reading order together
Use 16px body copy with at least 1.5× line height
Keep long-form lines between 65–75 characters
StyleDesktop / lineMobile / lineWeightTracking
DisplayCampaign-level headline
56 / 6438 / 44700-0.035emConnect every possibility
Heading 1Page title
44 / 5232 / 40700-0.025emSoftware access, simplified
Heading 2Primary section heading
32 / 4026 / 34650-0.018emBuild a clear hierarchy
Heading 3Content group heading
22 / 3020 / 28600-0.01emKeep a readable rhythm
BodyBody copy and product descriptions
16 / 2616 / 264000Keep one idea per sentence and body copy between 65–75 characters
CaptionLabels, dates and supporting metadata
13 / 2013 / 205000.01emSupporting information only
BILINGUAL SAMPLE / 2026
Complex tools, clearly connected
RelayX brings professional software and AI tools into one clear entry point — keep prices and units readable, for example, $ 18 / month
Headlines use no more than two lines
Left-align body copy; never justify
Use tabular figures for prices and data
Avoid long all-caps text and excessive bolding
03
Color system
Color system
Relay blue carries recognition and action, deep navy provides structure, and signal cyan is reserved for small highlightsBrand primitives
Select a swatch to copy its HEX value
#315FF4
Relay blue
--brand-blue-600oklch(55% 0.22 263)Primary actions, links and key emphasis
#101A34
Deep navy
--brand-navy-950oklch(23% 0.04 263)Headlines, dark surfaces and high-contrast text
#27C2EA
Signal cyan
--brand-cyan-400oklch(77% 0.13 215)Data highlights and restrained secondary accents
Neutrals
Use one cool-neutral family and avoid mixing in warm grays
#F6F8FC
Canvas
--brand-canvasoklch(97.5% 0.008 255)Page background
#FFFFFF
Surface
--brand-surfaceoklch(100% 0 0)Cards and elevated surfaces
#64718A
Muted ink
--brand-ink-mutedoklch(54% 0.035 258)Descriptions and metadata
#E4EAF5
Rule
--brand-ruleoklch(92.5% 0.015 258)Borders and dividers
Semantic colors
Always pair color with an icon or text label
70%Neutral25%Blue5%
Recommended color ratio
Use neutrals to shape the information space, reserve Relay blue for primary actions and recognition, and use signal cyan sparingly; text contrast must meet WCAG AA
04
Spatial system
Grid system
A consistent column grid and 8pt spacing system keep websites, presentations and campaigns alignedDesktop
≥ 1200 px · 12 columns · 24 px gutter
max-width: 1200 pxTablet
768–1199 px · 8 columns · 20 px gutter
margin: 24 pxMobile
< 768 px · 4 columns · 16 px gutter
margin: 16 px12-column content grid
1200 / 12 / 24123456789101112
Primary content · 7 cols
Supporting · 5 cols
Card · 4 cols
Card · 4 cols
Card · 4 cols
8pt spacing tokens
Reserve 4px for optical corrections; build layouts primarily with multiples of 8px
4pxIcon micro-spacing
8pxTight element spacing
12pxLabels and control padding
16pxDefault component spacing
24pxCard padding and grid gaps
32pxContent group spacing
48pxSection interior spacing
72pxLarge section spacing
8 px
Controls
14 px
Cards
24 px
Large surfaces
1 px
Default rule
05
Production assets
Templates
Start from an approved composition; replace content without changing safe areas, brand colors or hierarchyThree fixed layers
Identity, information and action; replace content without breaking the hierarchy
Protect the safe area
Margins are part of readability—keep headlines and CTAs away from edges
Control brand signals
Use one primary action color and one connection node per composition
Open previewSocial media
DownloadSocial announcement
1080 × 1080 · SVG
Single focus · relay path
Open previewWeb
DownloadWebsite campaign banner
1600 × 600 · SVG
Copy left · conversion banner
Open previewPresentation
DownloadPresentation cover
1920 × 1080 · SVG
Dark cover · chapter marker
Open previewEmail
DownloadEmail header
1200 × 480 · SVG
Open title · light signal
Open previewPartners
DownloadPartner co-branding
1600 × 900 · SVG
Dual mark · equal weightHow to use the templates
Edit the downloaded SVG in Figma, Illustrator or any vector-capable tool; preserve margins, connection paths and color balance, replace the headline and update supporting numbers as needed