Health Optimisation Summit

Overview

The Health Optimisation Summit brand embodies 'Aspirational Credibility'—a design philosophy that merges scientific authority with premium wellness culture. The visual language combines a deep navy foundation (#0b1120, #213a8f) representing trust and expertise, with energetic gold accents (#f5a300) signaling opportunity and transformation. The brand serves health practitioners, biohackers, and longevity enthusiasts seeking a curated, evidence-based community. Every interface element communicates precision and sophistication: the typography hierarchy uses Inter Display for commanding headlines and Inter for body clarity, while the color palette avoids trendy pastels in favor of refined, professional tones that feel both contemporary and timeless.

The brand voice is direct, optimistic, and scientifically grounded. Sentences are active and outcome-focused, avoiding jargon while respecting the audience's intelligence. The tone never feels salesy or breathless—instead, it conveys quiet confidence in the event's value. Example: 'Connect with 500+ practitioners advancing the science of human performance' rather than 'Join an amazing community!' The visual rhythm reinforces this: generous white space, deliberate color placement, and restrained animations create an environment where information feels discoverable rather than overwhelming.

Colors

The color system is built on a three-tier hierarchy: Navy (#213a8f, #0b1120) as the foundational trust color, Gold (#f5a300) as the primary call-to-action accent, and supporting neutrals (cream #faf9f7, slate #94a3b8) for balance. Primary blue (#3182ce) is reserved for secondary interactive elements and links, creating visual distinction from the gold CTAs. The surface stack progresses from #fcfaf6 (container-lowest, used for subtle backgrounds) through #faf9f7 (default surface) to #ffffff (bright, for elevated cards). On-surface text is pure black (#050505) for maximum legibility, with on-surface-variant (#6b7280) for secondary copy. The secondary color (gold #f5a300) is applied exclusively to primary CTAs ('Get Your Ticket', 'Apply to Exhibit') and receives a 0.25 shadow (rgba(245, 163,

Typography

The type system establishes hierarchy through weight and size rather than color variation. Display (60px, 700 weight, Inter Display) is used only for hero headlines and major section breaks, commanding attention through scale and negative space. Headline-lg (40px, 700 weight) anchors secondary sections; headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight) is the default for long-form content and speaker bios, with 28px line-height ensuring comfortable reading at arm's length. Body-md (16px, 400 weight) is used for card descriptions and form labels. Label-md (14px, 600 weight, 0.02em letter-spacing) is applied to button text and navigation items, with the increased letter-spacing creating visual separation and emphasis. All headlines use Inter Display (a geometr

Layout

The layout system uses a 12-column grid with a maximum container width of 1440px, maintaining readability on ultra-wide displays while preventing text lines from exceeding 75 characters. The gutter is fixed at 24px, creating a consistent rhythm across all breakpoints. Section spacing follows the lg token (40px) for major vertical separation, md (24px) for subsection breaks, and sm (12px) for component-level spacing. The hero section spans full width with a dark overlay (rgba(7, 23, 56, 0.4)) and subtle blur to ensure text legibility over background imagery. Cards are arranged in a 3-column grid on desktop, collapsing to 2 columns at tablet and 1 column on mobile. The container-max-width of 1440px is applied to all content sections except the hero, which bleeds to viewport edges. White spac

Elevation & Depth

Depth is conveyed through a three-level shadow system that reinforces the visual hierarchy without introducing darkness. Level 1 (sm elevation: 0 3px 8px rgba(0, 0, 0, 0.15)) is applied to standard cards and form inputs, creating subtle separation from the surface. Level 2 (md elevation: 0 6px 16px rgba(7, 23, 56, 0.15)) is used for hover states on cards and modals, signaling interactivity through increased shadow spread. Level 3 (lg elevation: 0 16px 38px rgba(7, 23, 56, 0.1)) is reserved for floating elements (sticky headers, floating CTAs) and full-screen modals. The shadow color uses navy

Shapes

The shape philosophy is 'Refined Geometry'—rounded corners are used strategically to soften the formal navy palette without sacrificing professionalism. Buttons and primary CTAs use lg radius (1rem / 16px), creating a friendly, approachable feel while remaining distinctly modern. Cards and containers use lg radius (16px) for consistency with buttons, establishing a cohesive component language. Form inputs use DEFAULT radius (0.5rem / 8px), a tighter radius that signals precision and data entry. Badges and small UI elements use full radius (9999px) to create pill-shaped containers that feel pla

Components

Action Elements Buttons are the primary interaction mechanism and follow a strict color-to-intent mapping. The primary CTA button uses gold (#f5a300) with 12px 24px padding and 48px height, ensuring thumb-friendly touch targets on mobile. Gold buttons receive a 0.25 shadow on hover (0 4px 12px rgba(245, 163, 0, 0.25)) and transition to #f59f00 (slightly darker) with a 200ms ease-out timing. Secondary buttons use a transparent background with a 2px primary blue border (#3182ce), maintaining visual hierarchy while offering an alternative action. Tertiary buttons (e.g., 'View in Maps') use body-md typography with no background, relying on underline on hover. All buttons include a 200ms transition for state changes, providing tactile feedback without animation fatigue.

Containers & Su

Do's and Don'ts

**Do**

• Do use gold (#f5a300) exclusively for primary CTAs ('Get Your Ticket', 'Apply to Exhibit') to create visual urgency and brand recognition.
• Do maintain 24px gutters and 40px section spacing to create breathing room and guide the eye through content hierarchy.
• Do apply Inter Display for all headlines (display, headline-lg, headline-md) to convey premium positioning and scientific authority.
• Do use the three-level shadow system (sm/md/lg elevation) consistently to reinforce visual hierarchy without introducing darkness.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) for smooth, predictable feedback.
• Do use navy (#213a8f, #0b1120) as the foundational trust color for headers, footers, and structural elements.
• Do ensure all text over images uses the hero-overlay (rgba(7, 23, 56, 0.4) with 2px blur) to maintain legibility.

**Don't**

• Don't use primary blue (#3182ce) for CTAs; reserve it for secondary links and hover states only.
• Don't apply border-radius to full-width hero sections or structural containers; maintain sharp edges for architectural clarity.
• Don't mix Inter and Inter Display within a single headline; use Inter Display exclusively for all heading levels.
• Don't use pure black (#000000) for text; use on-surface (#050505) to maintain warmth and reduce eye strain.
• Don't apply glassmorphism, blur effects, or transparency to content containers; favor solid surfaces to reinforce scientific credibility.
• Don't exceed 200ms transition timing on interactive elements; faster feels snappy, slower feels sluggish.
• Don't use secondary colors (green, red) for primary CTAs; reserve them for status indicators and validation feedback only.