Design system
Hydrogen Machines — Unified Brand Style Guide
The master reference for colour, typography, iconography, components, region-gated rules, brand voice, and compliance. Every new PDP, homepage block, trust element, comparison table, and testimonial must consume the tokens defined here.
01 — Colour
Brand colour system
Hydrogen Blue
#00AEEF
Primary actions, primary icon accent
Deep Hydrogen Navy
#003B5C
Headings, badge text
Trust Green
#2ECC71
Guarantee & secure states
Gold Star
#F5C542
Ratings and reviews
Soft Grey
#E5E5E5
Borders and dividers (1px)
White
#FFFFFF
Primary background surface
Hydrogen Grey-Blue
#F9FBFC
Section backgrounds (trust blocks)
- Primary actions → Hydrogen Blue
- Trust elements → Trust Green + Gold Star
- Backgrounds → White + Hydrogen Grey-Blue
- Borders → Soft Grey (1px)
- Headings → Deep Hydrogen Navy
Tokens: src/lib/brand-tokens.ts → BRAND_COLORS, BRAND_COLOR_USAGE.
02 — Typography
Typography system
H1 — Inter SemiBold 32
H2 — Inter SemiBold 24
Body 16 / Inter Regular — the default running paragraph size on wide surfaces. Line height 1.6 keeps long-form technical copy readable.
Body 14 / Inter Regular — supporting copy inside cards and trust strips.
BADGE 12 / Inter SemiBold
Rules
- Family: Inter (Inter)
- H1 24–32px · H2 20–24px · Body 14–16px · Badge 12–14px
- Line height 1.4–1.6
- Section spacing 40–60px
- Headings tracked at -0.01em; body at -0.005em
03 — Iconography
Approved icon set
Star
Flask
Shield
Calendar
Australia
US Headset
Padlock
Gear
Style: flat outline · stroke 1.5px · no gradients · no shadows · minimalist, clinical, premium.
04 — Layout
Layout & spacing
Section padding
40–60px vertical on major sections.
Trust strip padding
24px top/bottom.
Badge spacing
20px gap between badges.
Responsive grid
Desktop 3-column · Tablet 2-column · Mobile 1-column.
05 — Components
Component library
Trust strip (product pages)
- Verified Customer Reviews
- Lab-Verified 99.991% H₂ Purity — QTT Report LH2025050017
- Zero Ozone · Zero CO — Independently Tested
- 99.99% H₂ Purity — PEM/SPE
- 90-Day Money-Back Guarantee
- 24-Month Warranty Included
- US Customer Support
- Secure Checkout — SSL Encrypted
import { TrustStrip } from "@/components/TrustBadges"Homepage trust block
Trusted Hydrogen Wellness Technology
Industrial-grade hydrogen wellness devices engineered for purity, safety, and 10,000-hour service life.
- Verified Customer Reviews
- Lab-Verified 99.991% H₂ Purity — QTT Report LH2025050017
- Zero Ozone · Zero CO — Independently Tested
- 99.99% H₂ Purity — PEM/SPE
- 90-Day Money-Back Guarantee
- 24-Month Warranty Included
- US Customer Support
- Secure Checkout — SSL Encrypted
import { HomepageTrustBlock } from "@/components/TrustBadges"Trust badges (SVG)
src/components/TrustBadges.tsx
Why-trust-us pillar block
src/components/WhyTrustUs.tsx
PDP hero + gallery
src/routes/products.$slug.tsx
Sticky CTA + footer CTA
src/components/pdp/PdpFooterCta.tsx
Testimonials
src/components/TestimonialSection.tsx
FAQ accordion
src/components/pdp/ProductFaq.tsx
Key benefits / spec block
src/components/pdp/KeyBenefitsBlock.tsx
Comparison table
src/components/pdp/CompetitorComparisonTable.tsx
Warranty & returns
src/components/pdp/WarrantyReturnsBlock.tsx
Certificate download
src/components/WhyTrustUs.tsx → PurityCertificateBlock
06 — Region gating
Region-gated elements
hydrogenmachines.com.au
Renders Australian Owned & Operated badge, AU entity in JSON-LD, AU support hours in warranty block, WhatsApp CTA on support page.
hydrogenmachinesusa.com
Renders US Customer Support badge, US brand/email in footer & JSON-LD, email-only support (no WhatsApp), US ebook PDF variant.
Source of truth: getSiteHost() in src/lib/site-host.iso.ts · copy helper: getRegionalTrustCopy(region).
07 — Compliance
Global compliance rules
Never use
- medical-grade
- medical grade
- medical device
- clinically proven
- FDA approved
- TGA approved
- cure
- treat
- therapy
- therapeutic
Allowed framing
- industrial-grade
- engineering-grade
- general wellness device
- 99.99% H₂ purity (PEM/SPE)
- 10,000-hour service life
Required disclaimer context. Engineering/certification claims describe hardware and manufacturing — not medical or therapeutic status. Every purity, output, and service-life claim must match published product data in
src/lib/products.ts.08 — Voice
Brand voice & UX copy tone
We are
- · Transparent
- · Engineering-focused
- · Premium
- · Calm
- · Factual
We avoid
- · Hype
- · Superlatives without data
- · Medical claims
- · Pseudoscience
- · Urgency manipulation
09 — Application
How this guide is applied
- Import colour, spacing, and typography from
@/lib/brand-tokens— never hardcode hex values in components. - Use the shared components listed in section 5 rather than re-implementing trust strips, FAQs, or comparison tables per page.
- Wrap any region-specific copy behind
getSiteHost(). - Run new copy through the compliance list in section 7 before shipping.
- New sections default to White background with Grey-Blue for trust bands; borders are always Soft Grey 1px.