Brand guidelines · v2 · September 2026
Everything you need
to build like Hyros.
to build like Hyros.
The logo, the colours, the type, the zebra print, Sven and the motion rules — one page for people, one file for AI.
01 · Logo
Sven’s face plus the serif logotype. One unit.
The full logo leads. The standalone face is the mark for avatars, favicons and tight spaces. Never retype “Hyros” in a live font — always place these files.
The markSven’s face standalone — avatars, favicons, small placements.
- Clear space: keep about 25% of the mark’s height free on all sides.
- Scale in whole steps so the pixels stay crisp. SVG preferred, PNG for tools that need it.
- Never stretch, outline, add shadows or recolour outside these variants.
- Never place the white versions on light grounds. In the site nav the logo is 24px tall, Hyros Blue on cream.
02 · Colour
Cream ground, ink type, one purple.
Flat fields, hairline borders, no gradients. Purple marks the point — once per element. Terracotta lives only inside data. Tap any swatch to copy its value.
Grounds
Ink & text
Accent
Data only
03 · Type
A Book serif, a quiet sans, a mono for labels.
P22 Mackinac carries every headline and figure — Book for the hero, Medium everywhere else. Inter does the reading. Geist Mono does the labels, kickers and window URLs.
P22 Mackinac · Book 400 · hero
Same ad spend.
15% more sales.
15% more sales.
P22 Mackinac · Medium 500 · sections
Your ads grow. Or you don’t pay.
The explanation continues in the grey serif lede, Medium at 24px, ghost grey.
Inter · 400 · ledes and body
Catch sales Meta and Google miss. Optimize Ad AIs. Get customers cheaper.
Body copy is Inter at 15px with a 1.6 line-height, colour #5E5D59, max-width 470. Emphasis is ink on a grey line, or purple — never bold. Buttons are Inter 15px at weight 400.
Geist Mono · 10.5px · uppercase · .1em
Business modelApplied — 2 ad sets updatedhyros.com/reports
Hero H1P22 Mackinac Book 40050–64px · lh 1.06–1.12 · ls −0.012em
Section H2P22 Mackinac Medium 50044–56px · lh 1.1 · purple second sentence
Card titlesP22 Mackinac Medium 50019–20px · lh 1.3
Big figuresP22 Mackinac Medium 50036–96px · ls −0.015 to −0.03em
Grey serif ledeP22 Mackinac Medium 50022–26px · lh 1.28 · #9A9891
LedeInter 40016.5–18.5px · lh 1.55 · #55534E
BodyInter 40015px · lh 1.6 · #5E5D59 · max 470
ButtonsInter 40015px · lh 1 — never Medium
NavInter 40012px · rgba(31,30,29,.78)
Mono labelsGeist Mono 40010.5px · uppercase · ls .1em · #8B8984
P22 MackinacBook 400 + Medium 500 · licensed for hyros.com / go.hyros.com
go.hyros.com/assets/fonts/mackinac-book.woff2 · /mackinac/mackinac-medium.woff2Inter400 + 500 · Google Fonts
fonts.googleapis.com/css2?family=Inter:wght@400;500Geist Mono400 + 500 · Google Fonts
fonts.googleapis.com/css2?family=Geist+Mono:wght@400;50004 · The zebra print
The site’s one texture, in five colourways.
Seventeen organic stripes, rotated −18°, at 5–11% opacity. Always clipped by the band or box it fills. Text that must sit on it goes in a white card. Download the backgrounds ready-made, or the transparent print and set your own ground.
LavenderHero panel · MCP band · results heroes
#EEEEFB ground · #5150F6 at 0.09Lavender strongThe picker band · swarm “you get” band
#EEEEFB ground · #5150F6 at 0.11GreyDelayed-sales band · extension · review walls
#FAF9F5 ground · #1F1E1D at 0.05Grey bandA bolder grey band, masked off the text column
#F3F2ED ground · #1F1E1D at 0.05DarkThe dark hero container only — white type on it
#161514 ground · #FFFFFF at 0.07The print aloneTransparent stripes for your own ground — set the fill and opacity yourself
viewBox 0 0 800 600 · slice · rotate(−18°)- Sizes: wide 2400×1500, tall 1200×2400 (phones), square 1600×1600. The SVGs scale to any box.
- In code: the parent gets
position: relative; overflow: hidden, the print is absoluteinset: 0, content sits atz-index: 1. - Never two zebra bands of the same colour in a row; a white band always separates a lavender band from a grey one. Never above .11.
- The full SVG path data is in the LLM file (Appendix A) — paste it, do not redraw it.
05 · Sven
The mascot is a fixed 13×15 pixel grid.
The same face as the logo mark. Lavender body, white eyes. He is rendered from the grid, never redrawn — crisp edges, no smoothing, no badges, no shadows.
- Grid: 13 columns × 15 rows; the eyes are two 1.8×2 cells at columns 4 and 7.2, row 8, in the contrast colour.
- Sizes 56–120px on pages. Per-model props (bag, laptop, phone, mortarboard) are small purple shapes beside the head — the single accent — in the business-model picker only.
- Motion: a 1.8s “thinking” bob with a glance and a blink and three purple thought dots; one 360° spin after a form step. Nothing under reduced motion.
- The drawn Sven for the line-icon family: the silhouette as one ink outline, staircase kept, 1.6 stroke. Never a “new” Sven.
06 · Components
Windows, pills, cards. Used as-is.
Every element below is a named class in the site’s code, with its CSS in the LLM file. Buttons are ink or soft. Product lives in white windows. Text on a print lives in a white card.
Buttons
Book Setup CallSee How It Works ↓Learn more
Button card · the hero
Book Setup CallSee How It Works↓
Chips
Tony RobbinsAlex HormoziWhop+ 5,000 more
Window
Ad setMetaHYROS
Hook V3 — founder story96137
Free trial — lookalike 5%73104
Totals322460
HYROS caught 30% more sales than the ad platform reported.
Black pill
›Hyros MCP lets you prompt any feature you want…In seconds.
01
Dark card — the process steps
INK ground, lavender mono number, white serif title, 14.5px sub at 62% white. Three in a row.
“
Hyros allowed us to scale our ad spend by 43%
Tony Robbins Ad Team07 · Dashboards & consoles
Product lives in windows. AI lives in the console.
Every dashboard, report and console graphic on the site is one kit: a white window with the three-dot bar and a mono address, mono labels, serif figures, lavender data, one purple mark for what HYROS changed — and an ink terminal that types the prompt, works the steps and pushes the result into the window. This is the /enterprise stage, standing still; the console below it runs.
OverviewCampaignsAttributionModel · LTV-weighted
LTV · 90d
$1,612+31% · 4,812 subsROAS
4.9×+29%CPA
$74−26%Attributed revenue by dayRevenueROASSubs
CampaignPlatformSpendRevenueROAS
Hook V3 — UGC videoMeta$18,400$104,6005.7×
Brand — exactGoogle$9,100$41,8004.6×
Prospecting — Lookalike 5%Meta$22,600$97,3004.3×
Spark ads — creatorsTikTok$7,800$38,9005.0×
OverviewCampaignsAttributionFunnel ReportLTV-weighted · all clicks
Ad click
48,210−14%
Landing
41,300−28%
Lead
29,900−50%
Purchase
14,950−42%
Repeat
8,680First click by channelMeta46%Google31%TikTok14%Email9%LTV by first click Meta $412 · Google $377 · TikTok $291
OverviewCampaignsAttributionFunnel ReportClient dashboard12 clients · live
ClientCPAROASLTV:CACStatus
Acme Skincare$383.1×4.2● on target
Northwind SaaS$1121.8×2.9▲ CPA over target
Lumen Coaching$642.6×3.7● on target
Harbor Supply$512.9×3.4● on target
KPIsCPA target $60 · ROAS floor 2.5× · LTV:CAC 3+
ABCEFD
1CampaignSpendPlatform salesHYROS salesTrue ROASROAS
2Hook V3 — UGC video$18,400961373.4×2.4×
3Prospecting — Lookalike 5%$22,600731043.6×2.5×
4Advantage+ — Broad$15,90067963.8×2.6×
5Retargeting — 30d$6,20045655.2×3.6×
6Hook V1 — Discount offer$9,80041584.1×2.9×
›
Custom reportAttribution appClient dashboardReporting integration
Window bar.c1-winbarThree 9px cream dots, the address centered in Geist Mono 11.5px — hyros.com/reports, app.hyros.com · dashboard.
App nav.mcp-dnav11.5px items; the active one a lavender pill in purple; a mono “Model · LTV-weighted” label with a dot on the right.
KPI tile.eo-kpi#FCFBF8 card: mono label, 22px serif figure, purple mono delta, a 56px sparkline. The highlight tile spans two columns on lavender.
Chart.eo-dash-chart30 lavender bars, an ink ROAS line, a coral line for the metric HYROS just added — it draws itself in over 1.4s.
Table.eo-dr12.5px rows on .06 hairlines, a mono uppercase header on #FCFBF8, the ROAS column purple.
Console.bx-termInk, Geist Mono 12px: › prompt, spinner → lavender dot per step, ✓ result lines, output panels. A fixed 340px screen that scrolls — it never grows.
Step strip.bx-tabsA segmented pill under the console: white track, the active step lavender + purple, mono 01–05 numbers.
TypeThe prompt types at 22ms per character (24 in the enterprise console), then settles.0.3s
WorkEach step lands as a spinner and becomes a lavender dot 650ms later; the next step every 850ms.0.85s
OutputA report grid, an app panel with bars growing in, or a sheet whose HYROS columns slide open.0.15–0.3s
Push“Pushing to your Hyros app” — the window above reacts 600ms later: a tile pops, figures count over 750ms, a pane slides .75s.1.7s
DoneThe ✓ line in lavender, a 2.6–3.6s hold, then the next tab. A click pins one.0.9s
RulesPurple marks what HYROS changed — never “good”. Green and terracotta only inside status cells. Labels mono, figures serif, the rest Inter. Windows never grow while they animate. Reduced motion gets the finished frame.LLM file · section 9
08 · Motion
Motion lives in windows. Sections only fade once.
Timed class flips and one requestAnimationFrame loop per scene. Every hold, crossfade and typing speed is in the LLM file. This is the home hero loop, live.
Ad setMetaHYROS
Hook V3 — founder story96137
Free trial — lookalike 5%73104
Demo bookings — video #36796
Retargeting — 30d4565
Totals322460
HYROS caught 30% more sales than the ad platform reported.
SendReceiveOptimize
HYROS
138 sales attributed
$340$120$2,400
Meta
Receiving conversions ✓
Optimizing deliveryGoogle
Receiving conversions ✓
Optimizing bidsSend sales ad platforms missed. Improve their AI targeting.
$100
Cost to acquire a customer
LineEffect
1 new customer$100
Media buyers make better decisions−10%
AI targeting optimized−10%
Cost to acquire$100
Ads waste less. AI targeting improves. You get customers cheaper.
Connecting to Claude MCP
Authenticating · Reading account · Loading tools
Claude MCP connected
Claude, based on Hyros swarm data, which ads should we cut and which should we scale based on LTV?
ScaleHook V3 — founder storyROAS 3.1× · LTV $412
CutRetargeting — 30dROAS 0.9× · LTV $88
Best LTVFree trial — lookalike 5%LTV $540
Would you like me to apply this to your ads?
ApplyNot now
Applying to Meta + Google
Applied — 2 ad sets updated
Ask about your ads…
Unify your attribution. Connect it to Claude. Analyze and act on it.
Claude MCP connected
Make me a custom attribution model and an LTV dashboard based on our data. Add it to my Hyros app as a new feature.
Building your feature
Reading attribution data · Designing model · Generating dashboard
Ask about your ads…
LTV Dashboard
Custom attribution model v1 · built with Claude
90-day LTV
$412
Payback
34 days
Best channel
Meta
LTV by channel
Meta$412
Google$377
TikTok$291
Email$208
Attribution weights
First touch 20% Assists 30% Last touch 50%
Build any feature, app, report. Add it to your Hyros app in a prompt.
Scene 1Report window — Meta vs HYROS rows, ✕ / ✓ marks, “30% more sales”7.3s
Scene 2Sync window — sales travel back to Meta + Google8.6s
Scene 3CPA ledger — $100 → $90 → $819.3s
Scene 4MCP chat — connect, ask, answer, apply14.8s
Scene 5The request is typed (27ms per character) + a 1s hold, then “Building your feature”9.5s
Scene 6The LTV dashboard — tiles, channel bars and the attribution stack animate in, then the long hold5.46s
LoopCrossfades .5s · beats cascade 120ms · marks pop with overshoot · rotator 2.4s · reduced motion gets the finished frame55.0s
09 · For AI
The brand LLM file.
One markdown file with every token, font, the full zebra SVG, Sven’s grid, the component CSS verbatim from the site, the animation timings and the band order of every page — precise enough for an AI to rebuild a HYROS page or animation on the fly.
https://go.hyros.com/brand/hyros-brand.md© 2026 Hyros INC. All rights reserved.