HF Concepts

Overview

HF Concepts is a premium B2B consulting firm specializing in biohacking and longevity technology integration for luxury wellness facilities, resorts, and health-conscious enterprises. The brand embodies 'Technical Minimalism'—a design philosophy that strips away ornament to reveal functional elegance, combining deep ocean blues (#003a57, #0378b2) with warm, earthy neutrals (#a79563, #f6f3ea) to convey both scientific precision and human warmth. The visual language evokes the aesthetic of high-end medical technology and architectural restraint: clean typography (neue-haas-grotesk), generous whitespace, and purposeful color accents that guide users toward consultation and discovery. The emotional response is one of quiet confidence—the interface communicates expertise without aggression, inviting decision-makers to explore sophisticated solutions.

The brand voice is consultative, data-informed, and respectfully authoritative. Vocabulary emphasizes integration, optimization, and strategic partnership rather than hype or disruption. Tone is calm, precise, and solution-focused. Example sentence in brand voice: 'We assess your facility's operational capacity and guest demographics to recommend technologies that enhance both experience and revenue.'

Colors

The color system is anchored in a deep, sophisticated primary blue (#003a57) that commands attention on CTAs and interactive elements without aggression. This primary is paired with a lighter, more energetic secondary blue (#0378b2) for hover states and elevated emphasis, creating a two-tier hierarchy of engagement. The secondary accent color is a warm, muted gold (#a79563) used sparingly for highlights, badges, and tertiary CTAs—it signals premium positioning and complements the cool primary palette. The surface stack is built from clean whites (#ffffff) and warm off-whites (#f6f3ea, #f6f6f6) that provide visual breathing room and reduce cognitive load. Neutral grays (#202224 for text, #5e6469 for secondary text, #9e9e9e for borders) ensure legibility across all contexts. Error states use

Typography

The type system employs a two-family strategy: neue-haas-grotesk (both display and text weights) for headlines, navigation, and labels—conveying technical sophistication and modern professionalism—paired with system fonts (-apple-system, Segoe UI, Roboto) for body copy, ensuring maximum legibility and performance across devices. Display (60px, 500 weight, -0.02em tracking) is reserved for hero statements and major section headers; headline-lg (40px, 500 weight) anchors page sections; headline-md (28px, 500 weight) introduces subsections. Body text uses 16px at 400 weight with 24px line-height (1.5x) for comfortable reading; smaller body-lg (18px) is used for introductory paragraphs. Labels and CTAs use neue-haas-grotesk-text at 15px (400 weight) or 14px (500 weight) with 0.01–0.02em letter

Layout

The layout system uses a 12-column grid with a 1280px container max-width, providing flexibility for both desktop and tablet layouts. The grid is fluid below 1024px, collapsing to single-column on mobile. Horizontal gutter is 24px (md spacing) on desktop, reducing to 12px (sm spacing) on tablets and mobile. Vertical rhythm is governed by the 24px block-gap default, with section separations using lg spacing (40px) to create clear visual pauses between content zones. Hero sections and full-width imagery use the full viewport width, while content containers maintain the 1280px max-width with centered alignment. Whitespace is treated as a first-class design element: minimum 40px vertical separation between major sections, 24px between subsections, and 12px between list items. The spacing scale

Elevation & Depth

Depth in this system is achieved through subtle layering rather than dramatic shadows. The elevation scale uses three tiers: sm (0 1px 2px rgba(0,0,0,0.06)) for minor interactive elements like hover states on list items; md (0 3px 8px rgba(0,0,0,0.15)) for cards, modals, and primary containers; lg (0 8px 24px rgba(0,0,0,0.12)) for floating elements, dropdowns, and modal overlays. Cards and containers use a 1px border in surface-container-high (#ddd9d0) to define edges without relying on shadow alone, maintaining the clean, architectural aesthetic. Modal overlays employ a semi-transparent dark

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used strategically to soften technical interfaces without compromising clarity. Buttons and CTAs use full-radius (999px / border-radius: 50%) to signal interactivity and create visual warmth; this contrasts with the geometric precision of the rest of the interface. Cards and containers use lg radius (16px) to balance approachability with formality. Input fields and smaller interactive elements use DEFAULT radius (8px), providing subtle rounding that feels refined without being playful. Modal dialogs and floating panels use x

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#003a57) background with white text, full-radius (999px), 44px height, and 12px 24px padding. On hover, the background shifts to {colors.primary-container} (#0378b2) with a 200ms ease-out transition. Secondary buttons are transparent with a 2px {colors.primary} border, same dimensions, and shift to {colors.surface-container-low} background on hover. All buttons use {typography.label-md} (neue-haas-grotesk-text, 15px, 400 weight) for consistent labeling. Focus state adds a 3px outline in rgba(0, 58, 87, 0.3) at 3px offset.

Containers & Surfaces Cards are the primary content container. They use {colors.surface} background, {rounded.lg} (16px), {spacing.md} (24px) padding, and {elevat

Do's and Don'ts

**Do**

• Do use the primary blue (#003a57) exclusively for CTAs, links, and focus states—it is the visual anchor that guides user attention.
• Do maintain minimum 40px vertical spacing between major content sections to create visual breathing room and reduce cognitive load.
• Do apply neue-haas-grotesk for all headlines and labels to maintain the technical, premium aesthetic; reserve system fonts for body copy only.
• Do use the full-radius (999px) button style for all primary CTAs to create a clear visual distinction from secondary and tertiary actions.
• Do employ the surface-container stack (#ebebeb to #ddd9d0) for layered surfaces instead of relying on shadows alone—this maintains the clean, architectural aesthetic.

**Don't**

• Don't use the secondary gold (#a79563) as a primary accent or on CTAs—it is reserved for badges, highlights, and tertiary elements only.
• Don't apply shadows larger than {elevation.lg} (0 8px 24px rgba(0,0,0,0.12)) or use drop shadows on text, labels, or small UI elements.
• Don't mix neue-haas-grotesk and system fonts within a single headline or label—maintain clear family separation between display/labels and body copy.
• Don't use border-radius smaller than 4px (sm) or larger than 24px (xl) except for buttons, which use full-radius (999px).
• Don't reduce padding below {spacing.sm} (12px) on interactive elements or below {spacing.md} (24px) on cards and containers—this compromises both usability and the minimalist aesthetic.