Brand Style Guide

The definitive guide to HOCATT’s visual identity, typography, color system, and component patterns. Use this reference to maintain brand consistency across all touchpoints.

Last updated: March 2026

Typography

HOCATT uses the system font stack for maximum performance and a clean, modern feel inspired by Apple’s SF Pro.

Font Family

-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif

Display / Hero

The Future of Wellness

text-4xl to text-6xl · font-extrabold (800) · tracking-tight

Section Heading

Why Practitioners Choose HOCATT

text-3xl to text-4xl · font-bold (700) · often UPPERCASE

Sub-heading

10 Technologies. One System.

text-xl to text-2xl · font-semibold (600)

Navigation Items

HOCATT HUGO Why Us Client Stories

text-[15px] · font-semibold (600) · tracking-wide · centered between logo & CTA

Body Copy (Minimum Size)

HOCATT delivers 145+ physiological responses across 100+ biological pathways with 10 integrated wellness technologies in a single 30-minute session. No other wellness system achieves this multi-pathway impact.

text-lg (18px) minimum, preferred text-[19px] · font-normal (400) · leading-relaxed

Kicker / Label

Trusted By Industry Leaders

text-xs · font-semibold · tracking-[0.25em] · uppercase · HOCATT blue

Weight Reference

400

Regular

Body copy

500

Medium

Nav items, subtle emphasis

600

Semibold

Nav items, sub-headings, labels

700

Bold

Section headings, card titles

800

Extrabold

Hero headlines, display text

Color System

The HOCATT palette combines deep navy backgrounds with electric blue accents. Alternating dark and light sections create visual rhythm across the site.

Dark Backgrounds

All backgrounds have blue undertones — never charcoal, gray, or black.

Navy Deep

#0a1628

--color-navy-deep

Primary background

Navy Section

#0d1f3c

--color-navy-section

Alternate dark sections

Navy Card

#0f2440

--color-navy-card

Card backgrounds

Navy Footer

#071225

--color-navy-footer

Footer (deepest)

Blue Accents

Blue family only — no greens, aqua, or teal tones in gradients.

HOCATT Blue

#0279FE

--color-hocatt-blue

Primary brand color, CTAs

Blue Glow

#00a8ff

--color-blue-glow

Electric glow effects, stat highlights

Blue Light

#5BA8FF

--color-blue-light

Light accent highlights

Blue Border

#052d5a

--color-blue-border

Card borders, subtle dividers

Text on Dark Backgrounds

White

#ffffff

text-white

Headlines, primary text on dark

Text Steel

#b0c4de

--color-text-steel

Body text on dark backgrounds

Text Muted Blue

#6b8db5

--color-text-muted-blue

Labels, descriptions on dark

Accent Colors

Gold

#FEBF42

--color-hocatt-gold

Special highlights (use sparingly)

Light Section Palette

White and light gray sections alternate with dark navy to create visual rhythm. Use these tokens for text and backgrounds on light sections.

Light BG

#ffffff

--color-light-bg

White section backgrounds

Light BG Alt

#f7f9fc

--color-light-bg-alt

Alternate light sections

Light Text

#1a202c

--color-light-text

Headings on light backgrounds

Light Text Muted

#4a5568

--color-light-text-muted

Body text on light backgrounds

Light Text Subtle

#718096

--color-light-text-subtle

Captions, labels on light

Gradients & Backgrounds

Use gradients of blue to deep navy or blue to near-black. Alternate dark sections with white/light sections for visual variety.

Gradient Text

The Ultimate Wellness System

.gradient-text · linear-gradient(135deg, #0279FE → #4da3ff → #0279FE)

Energy Background

Layered radial gradients creating subtle blue luminance on dark navy.

.energy-bg

Section Line Divider

.section-line · Blue gradient line, transparent edges

Buttons

All button copy must be at least 20px. Primary CTA uses the energy button style with blue glow and beam sweep animation.

Primary CTA (Dark BG)

Get Your Info Kit →

.btn-energy · text-[20px] min · Blue glow + beam-sweep animation

Primary CTA (Light BG)

Explore HOCATT →

.btn-energy-light · Gradient blue with beam-sweep

Secondary / Outline

Learn More →

border-2 border-hocatt-blue/40 · hover → solid border + bg tint

Navigation CTA

Get Your Info Kit

Smaller scale for nav context · hover: scale + glow

Cards

Navy Card

Card Title

Navy card with blue border, hover glow effect. Used on dark backgrounds.

.navy-card

Glass Card

Glass Card Title

Semi-transparent glass effect with backdrop blur. For overlays on dark backgrounds.

.glass-card-navy

Light Card

Card Title

White card with subtle border, hover blue glow. Used on light backgrounds.

.light-card

Animations

Subtle, purposeful animations create energy without distraction. All scroll-triggered animations use progressive enhancement.

Fade In Up

Scroll-triggered reveal from below

.animate-on-scroll · 0.8s ease-out

Fade In

Simple opacity fade

.animate-fade-in · 0.6s ease-out

Pulse Glow

Blue glow breathing on cards

.animate-pulse-glow · 3s infinite

Float

Subtle vertical float motion

.animate-float · 6s infinite

Stat Glow

Text shadow glow on stat numbers

.stat-glow · 3s infinite

Beam Sweep

Light beam sweeping across CTAs

.btn-energy · 3s infinite

Navigation

Desktop Main Nav

Logo on the left, menu items centered, CTA button on the right. Items use font-weight 500–600 at 15px with tracking-wide.

HOCATT

HOCATTHUGOWhy UsClient Stories

Get Your Info Kit

Mobile Navigation

Top bar: centered logo only (no hamburger on top). Bottom sticky nav with 4 items: Home, Products, Info Kit, Menu (hamburger). Menu opens full-screen overlay with accordions.

Landing Pages

Minimal StickyNav with logo + single CTA only. No full navigation links to prevent traffic leakage from paid campaigns. Mobile gets StickyCTA bottom bar.

Section Rhythm

Alternate between dark navy and white/light sections to create visual breathing room. Use section-line dividers between dark sections.

Dark Section (navy-deep)

Hero, product showcases, CTA sections

Alternate Dark (navy-section)

Stats bars, secondary dark sections

Light Section (white)

Celebrity endorsements, benefits, content-heavy sections

Light Alt (#f7f9fc)

Alternate light sections for subtle contrast

Energy Background

Feature sections, CTA areas with radial blue glows

Sizing Rules

Body copy

18–19px minimum

text-lg or text-[19px]

All paragraph text on the site

Button copy

20px minimum

text-[20px]

All CTA and action buttons

Nav items

15px

text-[15px] font-semibold

Main navigation menu items

Labels / kickers

12px

text-xs uppercase tracking-wide

Section pre-headings, badges

Image product glow

N/A

drop-shadow-[0_30px_80px_rgba(2,121,254,0.3)]

Blue glow behind product images

Cards border radius

16px

rounded-xl (1rem)

Consistent rounding on all cards

Key Brand Rules

Use blue family only in gradients (blue → navy → near-black)
Alternate dark and light sections for visual rhythm
Keep body copy at 18–19px minimum
Keep button copy at 20px minimum
Use system-ui font stack (no custom font downloads)
Center nav items between logo and CTA
Use wellness language: session, client, support, optimization
Product images get blue glow drop-shadow

Don’t

Use green, aqua, or teal in gradients or accents
Use charcoal, pure gray, or pure black backgrounds
Use serif fonts anywhere
Use body text smaller than 18px
Use medical language: therapy, treatment, patient, cure, diagnose
Put hamburger menu on mobile top bar (bottom nav only)
Add full navigation to landing pages (use minimal StickyNav)
Use generic stock photos (real product & session photos only)