Function Health

Overview

Function Health is a preventive wellness platform that democratizes access to comprehensive lab testing and personalized health protocols. The brand embodies 'Precision Minimalism'—a design philosophy that strips away medical complexity to reveal clarity, actionability, and human agency. The aesthetic combines warm, earthy tones (terracotta primary, cream surfaces) with refined typography (Financier Display for editorial warmth, FT Base for functional clarity) to create an interface that feels both authoritative and approachable. Users experience the UI as a trusted advisor: calm, data-driven, and never alarmist.

The brand voice is direct, empowering, and grounded in scientific rigor without jargon. Function speaks to users as partners in their own health journey, using concrete language and avoiding hyperbole. Example: 'Monitor early indicators of 1000s of diseases' (not 'Detect everything before it happens'). The tone balances precision with accessibility—every interaction should feel like a conversation with a knowledgeable clinician, not a corporate wellness app.

Colors

Function's color system is rooted in warmth and trust, anchored by a terracotta primary (#b05a36) that appears on all critical actions and interactive elements. This earthy accent signals 'human care' against the cream-white surface (#fef9ef), creating visual hierarchy without coldness. The secondary accent (#9c63ff, a soft purple) provides supporting emphasis for secondary actions and highlights, while the tertiary dark navy (#071a24) grounds the system for text and structural elements.

Surface stack follows a subtle gradient from cream-white (#fef9ef) through warm grays (#e0dcd3 for containers) to near-black (#1a1a1d for inverse contexts), enabling depth without harsh contrast. On-surface text (#2a2b2f) maintains 4.5:1 contrast for accessibility. Primary (#b05a36) is reserved exclusivel

Typography

The type system pairs Financier Display (a high-contrast serif) for editorial moments (display, headlines) with FT Base (a humanist sans-serif) for functional content (body, labels). This pairing creates visual rhythm: serifs signal authority and editorial weight, while sans-serif ensures legibility in dense data contexts. Display (76px, 300 weight, -0.02em tracking) is reserved for hero statements like 'Check your health.' Headline-lg (48px, 300 weight) and headline-md (32px, 600 weight) scale secondary messaging. Body-md (16px, 300 weight, 24px line-height) is the default for paragraphs and descriptions, while label-md (14px, 600 weight) marks buttons and interactive labels. On small labels over busy backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility. Lett

Layout

Function uses a 12-column fluid grid with a max-width of 1280px, enabling responsive scaling from mobile (single column) through tablet (6 columns) to desktop (12 columns). The page rhythm is built on a semantic spacing scale: lg (40px) separates major sections, md (24px) divides subsections and card groups, and sm (12px) provides breathing room within components. Container max-widths vary by context (1099px, 1199px, 960px) to accommodate different content types—hero sections use full-width, while feature cards and forms constrain to narrower widths for focus. Gutters are consistently 24px on desktop, reducing to 16px on tablet and 12px on mobile. White-space is generous: sections are separated by 40–64px vertical padding, and cards maintain 24–32px internal padding. This rhythm creates a

Elevation & Depth

Depth is achieved through subtle layering rather than dramatic shadows. The system defines three elevation levels: Level 1 (base surface, no shadow) for the page background (#fef9ef); Level 2 (cards, modals) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft, spread shadow that suggests gentle lift; Level 3 (floating elements, tooltips) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), a slightly larger blur for maximum separation. Surface containers use background-color transitions (from #fef9ef to #e0dcd3) to indicate hierarchy without shadows. Hover states elevate cards by shifting backg

Shapes

Function employs 'Warm Geometry'—a shape philosophy that balances technical precision with human approachability. Buttons and inputs use full-radius (999px / border-radius: 999px) to signal friendliness and reduce visual harshness; this is the most-used radius, appearing on all primary CTAs, secondary buttons, and input fields. Cards and containers use lg (1rem / 16px) for a subtle roundness that feels refined without appearing playful. Smaller UI elements (badges, pills, list items) use md (0.75rem / 12px) or sm (0.25rem / 4px) for proportional hierarchy. This radius strategy avoids sharp cor

Components

Action Elements Buttons are the primary interaction surface. The button-primary component uses background: {colors.primary} (#b05a36), text-color: {colors.on-primary} (#fef9ef), rounded: 999px, padding: 12px 24px, and height: 48px. On hover, the background shifts to {colors.primary-container} (#d4835f) with a 0.2s ease transition. Focus states add a 2px outline in rgba(176, 90, 54, 0.35) with 2px offset. Button-secondary uses a white background (#ffffff) with primary text (#b05a36) and a 1px border in primary, creating a clear secondary hierarchy. Outline buttons (button-outline) use transparent backgrounds with a 1px border in {colors.outline} (#a5998e) and on-surface-variant text; on hover, they shift to surface-container-high with a 0.15s transition. All buttons use font-weight: 600

Do's and Don'ts

**Do**

• Do use primary (#b05a36) exclusively for CTAs, focus states, and brand-critical interactions—never for body text or backgrounds.
• Do maintain 40–64px vertical spacing between major sections to create calm, uncluttered page rhythm.
• Do apply full-radius (999px) to buttons and inputs; use lg (1rem) for cards and md (0.75rem) for smaller elements.
• Do pair Financier Display (serifs) for headlines with FT Base (sans-serif) for body to balance authority with legibility.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for card elevation; avoid harsh, dark shadows.
• Do include 2px outline in rgba(176, 90, 54, 0.35) with 2px offset on focus states for accessible, soft visual feedback.

**Don't**

• Don't use primary color for body text, backgrounds, or non-interactive elements—it dilutes the CTA signal.
• Don't apply sharp corners (0px radius) or extreme rounding (>1.5rem) to cards; stick to lg (1rem) for refined warmth.
• Don't use high-contrast shadows (0 10px 30px rgba(0, 0, 0, 0.3)) that create visual harshness; Function's shadows are soft and subtle.
• Don't mix serif and sans-serif weights arbitrarily; use Financier Display (300 weight) for editorial, FT Base (600 weight) for functional emphasis.
• Don't compress spacing below md (24px) for section separation; cramped layouts undermine the calm, trustworthy aesthetic.
• Don't use secondary (#9c63ff) or tertiary (#071a24) for primary CTAs; reserve primary (#b05a36) for all main actions.