Website system
Hyros Website Style Guide
A working reference for the website’s colour tokens, type hierarchy, spacing rhythm, and interface conventions. Use this page as the source for handoff notes or print it to PDF when a portable guide is needed.
Updated 7 July 2026
Based on the current Hyros website
01. Colour system
The website uses a mostly monochrome palette. White and near-white surfaces carry most pages, black drives contrast and CTAs, while grey tokens create hierarchy without introducing extra brand colours.
Black / black
Primary text, dark sections, filled buttons.
Black / 800
Deep surfaces and high-emphasis copy.
Black / 700
Secondary text and quieter hierarchy.
Black / 400
Metadata, captions, muted details.
Black / 200
Borders, dividers, light card edges.
White / 100%
Primary surface and inverse text.
02. Typography
The site combines editorial serif display type with clean Inter body copy. Mackinac-Book carries major headlines, while Inter handles product clarity across descriptions, labels, and interface text.
Know which ads are winning.
H2 · Mackinac-Book · 42px
Section headline
H3 · Mackinac-Book · 36px
Card headline
Body · Inter · 18px / 150%
Use body copy for explanations, product context, and supporting proof. Keep line height generous and avoid dense paragraphs in conversion sections.
Labels · Inter Medium · 14–16px
USE FOR PILLS, NAVIGATION, METADATA
Inverse sections use white display text with softer white support copy.
Use White / 80% for paragraphs and White / 60% for fine print or metadata so contrast feels deliberate rather than flat.
03. Spacing and layout
The site relies on generous section breathing room, centered content widths, and simple stack or grid systems. Most pages use a 10px desktop root scale, which makes rem-based display styles predictable.
Common spacing scale
8px — micro gaps, inline icon spacing
16px — card internals, compact rows, swatch gaps
24px — section subgroups and medium card rhythm
40px — documentation card padding and larger content groups
64px — distance between major page sections
Content width
Anchor main sections to a centered max width around 1120px. Let select visual sections break wider only when needed.
Radii
Use pill radii for buttons and 18–32px radii for documentation cards, surfaces, and larger containers.
Breakpoints
Desktop, laptop, tablet, and phone views scale root size from 10px down to 8px. Convert dense grids into vertical stacks on small screens.
04. Design conventions
Reusable elements should feel direct, monochrome, and product-led. Use contrast, spacing, and typography to create emphasis before adding decoration.
Buttons
Primary buttons are black pills with compact Inter labels. Outline or white buttons are used when the surrounding surface is dark or already high contrast.
Get started
Learn more
Cards and surfaces
Use white cards on near-white pages with subtle borders. Dark cards should be reserved for contrast moments and need softened white copy.
Card title
A simple bordered surface with restrained hierarchy.
Navigation and links
Navigation should stay immediately recognizable: compact labels, clear current state, and restrained hover transitions. Footer links can be denser but should keep the same Inter rhythm.
Interaction
Prefer subtle fades, opacity shifts, and smooth variant changes. Avoid loud motion unless it supports a product demo or campaign-specific storytelling moment.
Exporting to PDF
Open this page in preview, use the browser print dialog, and save as PDF. The page is structured as stacked documentation cards so it prints cleanly.