Function Health Design System

Overview

Function Health presents a striking visual identity rooted in editorial luxury applied to clinical wellness. The system unfolds across a carefully graduated palette of warm neutrals — from the foundational {colors.canvas} taupe that anchors the entire experience, through {colors.surface-soft} cream cards, to the near-white {colors.surface-light} of input surfaces and elevated components. The brand's electrical charge lives in {colors.primary}, a sophisticated terracotta that feels simultaneously organic and authoritative — appearing on CTAs, interactive accents, and structural elements without ever overwhelming the restrained canvas.

The defining typographic move is the deployment of Financier Display — a high-contrast serif usually reserved for financial editorial — at heroic scales ({typography.display-xl} at 80px) with deliberately lightweight strokes (font-weight 300). This creates an immediate impression of institutional credibility softened by human warmth. Body copy continues in the same face but at {typography.body-md} (34.4px), maintaining the serif voice while UI chrome (buttons, navigation, captions) pivots to Ftbase, a clean sans-serif that handles smaller sizes with clarity.

Shape language is dominated by the pill form: {rounded.lg} (40px radius) on all primary actions creates a friendly, approachable contour that softens the medical context. Cards use the more conservative {rounded.DEFAULT} (12px), while special containers can stretch to {rounded.full} (1440px) for dramatically curved band treatments. The overall mood is one of accessible premium — the aesthetic of a boutique concierge practice rather than a mass-market HSA platform.

Key Characteristics

• Canvas grounded in {colors.canvas} (#d1c9bf) warm taupe, never stark white or cool gray
• Brand voltage delivered via {colors.primary} (#b05a36) terracotta on all conversion surfaces
• Headline typeface Financier Display at 80px weight 300 — never bolded, always elegantly thin
• Pill-shaped {component.button-primary} with 40px border-radius as the signature CTA treatment
• Layered surface depth: {colors.surface-soft} for cards, {colors.surface-light} for inputs and elevated panels
• Generous vertical rhythm driven by {spacing.section} (99px) between major sections
• Maximum content width of 1440px with 64px gutters for breathing room
• Monospaced {typography.mono} using Fragment Mono for any technical or data displays
• Top announcement bar in {colors.banner-dark} (#b8613a) for promotional messaging

Colors

Brand & Accent

• Primary ({colors.primary} — #b05a36): The core brand terracotta used on {component.button-primary} fill states, link text, focus rings, and accent borders throughout the interface.
• Primary Hover ({colors.primary-hover} — #9e5130): Slightly deepened variant for hover states on primary-colored interactive elements.
• Primary Active ({colors.primary-active} — #8c482b): Pressed/depressed state for buttons, providing tactile feedback when clicked.
• Banner Dark ({colors.banner-dark} — #b8613a): A warmer, slightly lighter terracotta variant reserved exclusively for the {component.top-band} announcement strip at page top.

Surface

• Canvas ({colors.canvas} — #d1c9bf): The dominant page background color — a warm, desaturated taupe that defines the overall atmosphere. Used on body, {component.top-nav}, {component.hero-section}, and {component.footer}.
• Surface Soft ({colors.surface-soft} — #f5eee1): Lighter cream tone for card backgrounds ({component.card}) and subtle raised surfaces within sections.
• Surface Light ({colors.surface-light} — #fef9ef): Near-off-white used for {component.button-secondary} backgrounds, {component.input-text} fields, and {component.card-elevated} elevated panels.
• Surface White ({colors.surface-white} — #ffffff): Pure white reserved for focused input states ({component.input-text-focus}) and potential modal overlays.

Text & Ink

• Ink ({colors.ink} — #333333): The darkest text color, used for primary navigation links, icon buttons, and maximum-emphasis body text.
• Body ({colors.body} — #2a2b2f): Slightly cooler near-black, used for {component.hero-headline}, {component.hero-subheadline}, {component.stat-value}, and most display typography.
• Muted ({colors.muted} — #515151): Medium gray for secondary information — {component.stat-label} descriptions, {component.hero-label} badges, {component.footer} text, and caption-level content.
• On Primary ({colors.on-primary} — #ffffff): Pure white text atop {colors.primary} backgrounds, ensuring WCAG AA contrast compliance on all CTA buttons.
• On Banner ({colors.on-banner} — #fef9ef): Off-white text for the top announcement banner, providing slight warmth against the dark terracotta.
• On Canvas ({colors.on-canvas} — #2a2b2f): Text color specifically tuned for legibility against the {colors.canvas} background.

Hairlines & Borders

• Hairline ({colors.hairline} — #e8dfd2): Subtle divider color for {component.divider-vertical} separators between stats, very light internal borders, and decorative rules.
• Border Strong ({colors.border-strong} — #d4c9b9): More visible border tone for outlined inputs, card edges when borders are shown, and structural containment lines.
• Border Primary ({colors.border-primary} — #b05a36): Terracotta-bordered variant for {component.button-outline} secondary actions and focus indication rings.

Semantic

• Link ({colors.link} — #b05a36): Inline link color matching the primary brand, used in body text and {component.top-band} anchor styling.
• Link Active ({colors.link-active} — #8c482b): Darkened link state for visited or active navigation items.
• Success ({colors.success} — #2d6a4f): Deep forest green for confirmation states, positive indicators, and success messaging.
• Error ({colors.error} — #9d4437): Warm red-brown for validation errors, alert banners, and failure states — chosen to harmonize with the terracotta palette.
• Info ({colors.info} — #457b9d): Muted blue for informational tooltips, help text, and neutral guidance content.

Typography

Font Family

Function Health employs a three-typeface system with clear role separation:

Financier Display serves as the brand's editorial voice — a proprietary high-contrast serif (served via custom WOFF2 from Webflow CDN) used exclusively for all display and headline typography. It appears at dramatic scales (up to 80px) with lightweight strokes (300–400), creating immediate visual authority while maintaining elegance. Fallback stack routes to Times New Roman then generic serif for environments where the custom font fails to load.

Ftbase handles all UI chrome — navigation links, button labels, form captions, metadata, and body text below the editorial threshold. It's a clean sans-serif (likely a customized or subset font) with Book (400) and Semibold (600) weights, falling back to Arial. This creates a functional counterpoint to the display face's drama.

Fragment Mono provides the technical voice — a monospace typeface for code snippets, data values, lab test identifiers, or any content requiring tabular alignment. Falls back to Trebuchet MS (an unusual choice suggesting specific design intent).

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 80px | 300 | 0.9 | -0.01em | Hero headline ("Check your health.") | | {typography.display-lg} | 80px | 300 | 0.9 | -0.01em | Large display contexts, logo lockups | | {typography.title-md} | 64px | 400 | 0.9 | 0 | Section headings, feature titles | | {typography.title-sm} | 34.4px | 300 | 1.15 | 0 | Stat values, sub-section headers | | {typography.body-md} | 34.4px | 300 | 0.9 | 0 | Hero subheadline, editorial body | | {typography.body-lg} | 34.4px | 300 | 1.15 | 0 | Extended reading body copy | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Card content, paragraphs, descriptions | | {typography.caption} | 14px | 400 | 1.43 | 0 | Footer text, metadata, fine print | | {typography.button} | 16px | 600 | 1.25 | 0 | All button and CTA labels | | {typography.label} | 13px | 600 | 1.38 | 0.02em | Badges, tags, overline labels ("HSA/FSA Eligible") | | {typography.nav-link} | 16px | 400 | 1.5 | 0 | Navigation menu items | | {typography.mono} | 13px | 400 | 1.38 | 0 | Technical data, code, lab IDs |

Principles

The typography system's central discipline is scale over weight: the jump from 34.4px body text to 80px headlines carries almost all the hierarchical signal, while weight stays within the 300–400 range for display faces (never exceeding 500). This creates a distinctly European editorial feel — think Financial Times or Phaidon book design rather than American tech-bold conventions. The only semibold usage (weight 600) is locked to {typography.button} and {typography.label}, creating a narrow band of emphasis for actionable elements.

Letter-spacing is nearly absent across the board (set to normal or 0) except for {typography.label}'s slight expansion (+0.02em) which helps small uppercase-style badges remain legible, and the display tokens' tiny negative tracking (-0.01em) tightening the massive letterforms at 80px. Line heights are intentionally tight (0.9) on display type to create compact, impactful blocks, then open up to 1.15–1.5 for reading text.

The Financier Display face carries significant personality — its bracketed serifs and modulated stroke width communicate heritage and trustworthiness, critical attributes for a medical testing brand asking users to entrust their biological data. By keeping it at light weights, the design avoids the heavy, bureaucratic feel of typical healthcare typography.

Note on Font Substitutes

Financier Display is proprietary and not available via Google Fonts. For implementation without licensed access, substitute with Playfair Display (Google Fonts) which shares similar contrast, serif architecture, and elegant thin-to-medium weights. Define CSS variables:

--font-display: 'Playfair Display', 'Financier Display', 'Times New Roman', Georgia, serif;
--font-body: 'Inter', Ftbase, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'Fragment mono', 'Fira Code', monospace;

Ftbase can be substituted with Inter or System UI fonts at matching weights. Fragment Mono substitutes well with JetBrains Mono or Fira Code for technical content.

Layout

Spacing System

• Base unit: 4px (with 8px as the practical working increment).

• Tokens:

  • {spacing.xxs} (4px) — Micro-adjustments, tight icon padding
  • {spacing.xs} (8px) — Internal element gaps, small margins
  • {spacing.sm} (12px) — Nav link padding, compact spacing
  • {spacing.md} (16px) — Standard gutter between adjacent elements, card internal padding baseline
  • {spacing.lg} (24px) — Card padding, comfortable gaps between related groups
  • {spacing.xl} (32px) — Section-internal major gaps, elevated card padding
  • {spacing.xxl} (40px) — Large inter-block spacing
  • {spacing.section} (99px) — Vertical padding between distinct page sections
  • {spacing.container-gutter} (64px) — Horizontal padding inside the max-width container

• Section padding (vertical): {spacing.section} (99px) — Applied to {component.hero-section} and all subsequent major content bands.

• Card internal padding: {component.card} uses {spacing.lg} (24px); {component.card-elevated} uses {spacing.xl} (32px).

• Gutters: Horizontal container padding is {spacing.container-gutter} (64px), creating substantial margin between content edges and viewport boundary at desktop widths.

Grid & Container

• Max content width: 1440px (hard constraint on main, section, and header elements).
• Density choice: Editorial-sparse — the 1440px container with 64px gutters means content occupies roughly 1312px of readable width with enormous margins on wide screens. This is a luxury-positioning choice, not an information-density play.
• Grid behavior: Single-column editorial flow for hero; likely multi-column grid for feature/stat sections (inferred from three-column stat arrangement visible in screenshot). No evidence of sticky rails or complex dashboard grids on this landing page.
• Hero column split: Asymmetric — headline and CTA occupy left ~60% with stats or supporting content in right rail (implied by layout structure).

Whitespace Philosophy

Function embraces generous negative space as a signifier of premium positioning. The 99px vertical section rhythm and 64px horizontal gutters create a breathable, uncluttered canvas where each component (especially the 80px headlines) has room to command attention. This is not marketplace-dense nor app-dashboard-tight; it's brochure-editorial with medical-grade clarity.

Header Architecture

┌─────────────────────────────────────────────────────────────┐ ← Full viewport width, bg: {colors.banner-dark}
│          Use your HSA/FSA funds to join Function.           │ ← {component.top-band}
├─────────────────────────────────────────────────────────────┤
│  [Logo]   How it works  What we test  Science  FAQ  About  │ ← bg: {colors.canvas}
│                    Log In              [Start testing] 🔍 ☰  │ ← h: auto, pad-y: 16px
│  ←←←←←←←←←← 1312px content area within 1440px →→→→→→→→→→→→→│
└─────────────────────────────────────────────────────────────┘

Navigation features flush-left logo mark + wordmark, center-weighted navigation links, and flush-right utility cluster (login link, primary CTA button, search icon, hamburger menu toggle).

Hero Section

┌──────────────────────────────────────────────────────────────┐
│  ┌─ {spacing.container-gutter} (64px) ──────────────────┐   │
│  │                                                        │   │
│  │  HSA/FSA Eligible                          ────        │   │ ← {component.hero-label}
│  │                                                        │   │
│  │  Check your health.                                   │   │ ← {typography.display-xl}, {colors.body}
│  │                                                        │   │
│  │  Every year. Starting with 160+ lab tests detecting   │   │ ← {typography.body-lg}
│  │  1000+ conditions...                                  │   │
│  │                                                        │   │
│  │  [Start testing]         160+ lab tests │ Whole body  │   │ ← CTA + stat row
│  │                         $1 per day     │              │   │
│  │                                                        │   │
│  └────────────────────────────────────────────────────────┘   │
│  ←←←←←←←←←←←← 1440px max-width ──→→→→→→→→→→→→→→→→→→→→→→→→→│
└──────────────────────────────────────────────────────────────┘

Hero features left-aligned editorial block with label badge above, massive serif headline, descriptive paragraph, primary CTA button, and right-aligned or inline stat trio separated by vertical dividers.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, solid {colors.canvas} or transparent background | Base page surface, nav bar, hero band | | 1 — Hairline | 1px {colors.hairline} border or divider rule | Stat card separators, subtle internal boundaries | | 2 — Soft raise | {extensions.shadows.sm} — rgba(0,0,0,0.15) 0 0 20px 0 | Elevated cards, dropdown menus, tooltips | | 3 — Modal/Elevated | {extensions.shadows.lg} — rgba(42,43,47,0.1) 12px 32px 80px 0 | Modal dialogs, mega-menu panels, prominent overlays |

The depth philosophy is layered-subtle-over-color-block — shadows exist but are gentle and warm-toned (the lg shadow uses ink-color tinting rather than pure black opacity). Most visual separation comes from background color shifts ({colors.canvas} → {colors.surface-soft} → {colors.surface-light}) rather than dramatic shadow casting. The system avoids hard-edged drop shadows entirely; even the "lg" elevation diffuses across 80px of blur with 32px Y-offset, creating a floating-paper effect rather than a material-lift.

Focus states are handled via color inversion or border appearance (the {component.button-outline} pattern) rather than glow rings, keeping interaction feedback clean and non-intrusive.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 2px | Subtle rounding on minimal elements, input focus hints | | {rounded.DEFAULT} | 12px | Standard card corners, content panels | | {rounded.md} | 24px | Elevated cards, larger panel containers | | {rounded.lg} | 40px | All primary and secondary buttons — signature pill shape | | {rounded.xl} | 100% | Fully rounded elements (avatars, circular badges) | | {rounded.pill} | 9999px | Input fields, search bars, tag pills | | {rounded.full} | 1440px | Dramatic band curves, hero section edge treatments |

The shape vocabulary is intentionally constrained: pill buttons are mandatory for all CTAs (never square or slightly-rounded), while cards stay in the 12–24px range. The extreme 1440px value suggests full-width band sections may have dramatically curved bottom or top edges, creating organic shapes against the viewport. This combination of pill-interactives with gently-curved containers gives the interface a soft, approachable character without descending into cartoonish roundness.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.input-text-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.button-primary} — The principal conversion action, appearing in the navigation bar ("Start testing") and hero section. Solid {colors.primary} background with {colors.on-primary} white text, set in {typography.button} (Ftbase 16px weight 600). Rounded to {rounded.lg} (40px) creating the signature pill shape. Padding of 12px vertical × 24px horizontal. No box-shadow in default state. Hover transitions to {component.button-primary-hover} (deepened {colors.primary-hover}); active/clicked state becomes {component.button-primary-active} (further darkened {colors.primary-active}). This is the single most important interactive element in the system.

{component.button-secondary} — Tertiary action with {colors.surface-light} background and {colors.primary} text, maintaining the pill shape and button typography. Used for "Log in" style ghost actions. Features a subtle 1px {colors.border-primary} outline in some observed variants. Hover state ({component.button-secondary-hover}) shifts background to {colors.surface-soft} for tactile feedback.

{component.button-outline} — Transparent-background variant with {colors.primary} text and 1px {colors.border-primary} border. Same pill dimensions and typography as primary. Used for lower-emphasis actions where solid fill would compete with surrounding content.

Navigation

{component.top-banner} — Full-width announcement strip at absolute page top. Background {colors.banner-dark} with small {typography.caption} text in {colors.on-banner} off-white. Minimal 8px vertical padding. Contains promotional messaging (HSA/FSA funds callout). Dismissible in production implementations.

{component.top-nav} — Persistent header navigation bar sitting directly below the banner. Background matches {colors.canvas} (warm taupe), creating seamless visual continuity with the page body. Height is auto-determined by content (observed ~64px with 16px vertical padding). Contains logo, navigation links, and utility cluster.

{component.nav-logo} — The "Function" wordmark, rendered in {typography.display-lg} (80px Financier Display weight 300) in {colors.on-canvas}. The oversized logo type creates a distinctive editorial-nav feel — the logo is a headline element. Transparent background.

{component.nav-link} — Individual navigation menu items ("How it works", "What we test", "Science", "FAQ", "About"). Set in {typography.nav-link} (Ftbase 16px weight 400) in {colors.ink}. Padding of 8px vertical × 12px horizontal creates comfortable hit targets. Hover state ({component.nav-link-hover}) shifts text color to {colors.primary} for clear affordance.

{component.search-icon} — 20px icon button for search invocation, colored {colors.ink}, transparent background, positioned in the right-side utility cluster before the menu toggle.

{component.menu-toggle} — Hamburger/menu icon button (24px) for mobile navigation, {colors.ink}, transparent background. Triggers mobile nav overlay.

Hero & Content Sections

{component.hero-section} — The primary landing band occupying full viewport width with {colors.canvas} background. Vertical padding of {spacing.section} (99px) creates dramatic top/bottom margins. Contains the headline, subheadline, CTA, and supporting stats. Typography defaults to {typography.display-xl} for child headlines.

{component.hero-headline} — The "Check your health." display text. Rendered in {typography.display-xl} (80px Financier Display weight 300) with tight 0.9 line-height. Color is {colors.body} (#2a2b2f) against the canvas. No background, no border — pure typographic impact.

{component.hero-subheadline} — Supporting paragraph beginning "Every year. Starting with 160+ lab tests..." Set in {typography.body-lg} (34.4px Financier Display weight 300) with relaxed 1.15 line-height for readability at this size. Color matches {colors.body}.

{component.hero-label} — Small overline badge ("HSA/FSA Eligible") positioned above the headline. Uses {typography.label} (13px Ftbase weight 600, +0.02em letter-spacing) in {colors.muted} gray. May include a subtle {colors.surface-soft} background pill in some implementations.

Data Display

{component.stat-card} — Container for individual statistics (e.g., "160+ lab tests"). Transparent background allowing the parent section color to show through. Uses {typography.title-sm} (34.4px weight 300) for the numeric/value line. Internal padding of {spacing.md} (16px) vertical.

{component.stat-value} — The large number portion of a stat card ("160+ lab tests", "Whole body", "$1 per day"). Set in {typography.title-sm} in {colors.body} color. These sit in a horizontal row separated by {component.divider-vertical} elements.

{component.stat-label} — Secondary descriptive text beneath each stat value ("Total each year", "Tested 25 per visit", "$365 per year"). Rendered in {typography.caption} (14px) in {colors.muted} gray.

{component.divider-vertical} — Thin vertical separator line between adjacent stat cards. 1px width, {colors.hairline} color, spanning the height of the stat row. Provides visual grouping without heavy borders.

Containers & Surfaces

{component.section-container} — Reusable max-width wrapper constraining content to 1440px with {spacing.container-gutter} (64px) horizontal padding. Applied to every major section. Transparent background allows section-level coloring to show.

{component.card} — Standard content card with {colors.surface-soft} background, {rounded.DEFAULT} (12px) corners, and {spacing.lg} (24px) internal padding. Text renders in {typography.body-sm} (Ftbase 16px) in {colors.ink}. No visible shadow in default state; elevation added contextually.

{component.card-elevated} — Prominent card variant using {colors.surface-light} background (brighter, higher perceived position), {rounded.md} (24px) corners for extra softness, and {spacing.xl} (32px) generous padding. May carry {extensions.shadows.lg} in production contexts.

{component.footer} — Page footer band with {colors.canvas} background matching the nav. Text in {typography.caption} (14px) using {colors.muted} color for reduced visual weight. Padding of {spacing.xl} (32px) vertical. Contains legal links, copyright, and utility navigation.

Forms & Inputs

{component.input-text} — Text input field with {colors.surface-light} background, {colors.ink} text, and {rounded.pill} (fully rounded) shape creating a capsule input. Padding of 10px vertical × 20px horizontal. Typography is {typography.body-sm}. Focus state ({component.input-text-focus}) shifts background to {colors.surface-white} for clear activation feedback.

{component.badge} — Small tag/pill element for categorization labels. {colors.surface-soft} background, {colors.muted} text in {typography.label}, {rounded.pill} shape. Padding 6px vertical × 12px horizontal. Used for "HSA/FSA Eligible" and similar annotations.

Links & Interactive Text

{component.link-text} — Inline text link styled in {colors.link} (matching brand primary) with {typography.body-sm} sizing. Underline decoration varies by context. Hover transitions to {component.link-text-hover} ({colors.link-active} darker shade).

{component.icon-button} — Generic 24px square touch target for icon-only actions (play/pause, close, etc.). Transparent background, {colors.ink} icon color. Minimal 1px × 6px internal padding observed on media controls.

Do's and Don'ts

Do

• Do reserve {typography.display-xl} (80px weight 300 Financier Display) exclusively for the hero headline — this scale is the system's signature moment and must not appear elsewhere.
• Do apply {rounded.lg} (40px) to every button component; the pill shape is non-negotiable for all CTAs, primary or secondary.
• Do maintain {colors.canvas} (#d1c9bf) as the true page background — avoid switching to white or gray for body sections, as the warm taupe is fundamental to brand recognition.
• Do use {typography.label} (13px weight 600, expanded tracking) for all overline badges and category tags; this small-but-bold treatment signals metadata vs. content.
• Do separate stat groups with {component.divider-vertical} using {colors.hairline} — the thin vertical rule is cleaner than gap-based separation for three-column data.
• Do apply {spacing.section} (99px) vertical padding between major sections; this generous rhythm creates the editorial, unhurried pacing essential to the luxury-healthcare positioning.
• Do keep {typography.button} at weight 600 (not 700 or bold) — the semibold provides sufficient emphasis without competing with display typography.
• Do use {colors.primary} (#b05a36) for both filled button backgrounds AND link text; unifying the brand color across interaction types strengthens visual cohesion.
• Do layer surfaces progressively: {colors.canvas} → {colors.surface-soft} → {colors.surface-light} → {colors.surface-white} when nesting components; each step up should feel subtly brighter.
• Do render the logo in the headline typeface size (80px) within the navigation — the oversized wordmark is intentional branding, not a sizing error.
• Do pair {component.button-primary} with {component.button-secondary} or {component.button-outline} as the primary/secondary CTA pair; maintain this visual hierarchy across all sections.

Don't

• Don't bold the display typography — Financier Display at weight 300–400 carries all necessary authority; bolding would destroy the elegant, thin-stroke aesthetic.
• Don't introduce cool grays or blues into the surface palette; the entire system is built on warm earth tones (taupe, cream, terracotta), and cool neutrals would clash jarringly.
• Don't reduce {spacing.section} below 80px for "space efficiency" — the 99px vertical breathing room is a deliberate luxury signal, not wasted space.
• Don't substitute {typography.mono} (Fragment Mono) with a proportional font for technical data; the monospace treatment signals precision and differentiates lab/test IDs from prose.
• Don't add gradients, patterns, or photographic textures to the {colors.canvas} background — the flat, warm field is intentionally minimalist to let typography dominate.
• Don't use {colors.error} (#9d4437) for general alerts without confirming accessibility contrast ratios against potential backgrounds; it's tuned for the specific palette.
• Don't mix serif and sans-serif arbitrarily — Financier Display belongs to display/body-copy roles; Ftbase owns all UI chrome (buttons, nav, labels, captions).
• Don't apply box-shadows to {component.button-primary} in its default state; the flat fill against the warm canvas is the intended look — save shadows for elevated cards and modals.
• Don't expand the border-radius vocabulary beyond the defined tokens; especially avoid intermediate values (e.g., 20px) that would break the consistent shape language.
• Don't place {colors.primary} text on {colors.canvas} or {colors.surface-soft} backgrounds without verifying contrast ratios — the terracotta is medium-dark and may fail against mid-tone surfaces.
• Don't implement hover states as color inversions (e.g., white button with terracotta text becoming terracotta with white text); use the defined {colors.primary-hover} darkening instead for subtlety.

Motion & Animation

Transition Tokens

/* Core interactive transition — used on buttons, links, form elements */
--transition-fast: color 0.1s cubic-bezier(0.76, 0, 0.24, 1),
                  background-color 0.1s cubic-bezier(0.76, 0, 0.24, 1),
                  border-color 0.1s cubic-bezier(0.76, 0, 0.24, 1);

/* Opacity fade for reveal effects */
--transition-opacity: opacity 0.2s ease;

/* Positional transition for dropdowns, slides, mobile menu */
--transition-slide: top 0.4s ease;

/* SVG stroke animation for icons, illustrations */
--transition-stroke: stroke-dasharray 0.1s ease;

/* Combined stroke + opacity for complex icon states */
--transition-stroke-complex: stroke-dasharray 0.1s ease, opacity 0.3s ease;

/* Fill color transition for icon fills */
--transition-fill: fill 0.1s cubic-bezier(0.76, 0, 0.24, 1);

/* Catch-all fallback */
--transition-all: all 0.2s ease;

Keyframe Animations

• spin — Continuous 360° rotation, likely used for loading indicators (spinner icons) during async operations (lab result fetching, form submission).

Interaction Patterns

• Color-state transitions: All buttons and links shift color on hover/active using the cubic-bezier(0.76, 0, 0.24, 1) ease — a custom bezier with slight overshoot that feels responsive without bouncy.
• Mobile menu slide-down: The navigation menu (triggered by {component.menu-toggle}) animates vertically via top 0.4s ease, suggesting a dropdown or overlay reveal pattern.
• Icon stroke drawing: SVG icons animate their stroke-dasharray property over 0.1s, indicating line-drawing or path-reveal effects on interactive icons.
• Opacity fades: Content sections or overlay elements fade in/out over 200ms, suitable for scroll-triggered reveals or modal appearances.
• Loading spinners: The spin keyframe provides continuous rotation for any loading state indicator.

The motion system is deliberately restrained — durations cluster tightly around 100–200ms for micro-interactions (button color shifts) with a single longer 400ms transition for structural movements (menu slides). There's no evidence of parallax, scroll-jacking, or complex orchestration. The brand voice suggests motion should feel precise and clinical — fast enough to feel responsive, slow enough to feel considered.

Imagery Style

• Photographic approach: Not prominently featured in the above-fold screenshot; the hero relies purely on typography. Where imagery exists (lower pages implied), it likely follows a clean, warm-toned lifestyle photography direction — natural lighting, skin-positive health imagery, laboratory/scientific visuals with terracotta color grading.
• Illustration style: If present, expected to be minimalist line art or abstract organic shapes in {colors.primary} or {colors.muted} tones, avoiding photorealism or 3D render complexity.
• Color treatment: Any photography should be desaturated slightly toward warm sepia or treated with a subtle terracota tint overlay to harmonize with {colors.canvas}.
• Image-as-depth: No gradient washes or photographic backgrounds detected in the hero — the system trusts flat color fields and type alone for visual interest.
• Aspect ratios: Likely 16:9 for feature imagery, 1:1 for testimonial avatars or provider headshots (if present).
• Corner treatment: Images within cards should adopt the parent's {rounded.DEFAULT} (12px) or {rounded.md} (24px) radius; standalone hero images might be fully unrounded or use {rounded.full} for dramatic curve treatments.
• Role: Imagery supports rather than dominates; the typographic hierarchy (80px headlines) is the true visual protagonist.

Icon System

• Library: Custom SVG icons (no standard library detected — iconLibs empty in framework detection). Icons are likely bespoke-designed to match the brand's warm, organic aesthetic.
• Specific icons observed:
  • Search/magnifying glass (navigation utility)
  • Hamburger/menu (mobile navigation toggle)
  • Play/pause (media control, likely for video content)
  • Close/X (modal dismissal, inferred)
• Treatment: Stroke-based line icons (not filled), colored currentColor inheriting from parent text color (typically {colors.ink} or {colors.on-primary}). Stroke weight appears consistent at 1.5–2px.
• Size spectrum:
  • 16px for inline/text-accompanying icons
  • 20px for navigation utilities (search icon)
  • 24px for standalone icon buttons (menu toggle, media controls)
• Alignment: Vertically centered with adjacent text using flexbox baseline alignment; icons in buttons sit beside text with consistent 8px gap.
• Custom recommendation: For implementation, source or recreate icons in the thin-stroke, geometric-organic style observed — rounded line caps, consistent 2px stroke weight, no decorative embellishment beyond functional geometry.

Recommended Frontend Stack

- Framework:      Next.js 14+ (React) or Astro (for static landing optimization)
- Styling:        Tailwind CSS v3.4+ with custom theme extension (or CSS Modules if staying vanilla)
- Fonts:          Self-host Financier Display (WOFF2 from CDN), Ftbase (TTF), Fragment Mono (TTF)
                  Fallback: Google Fonts (Playfair Display + Inter + JetBrains Mono)
- Animation:      Framer Motion for scroll-triggered reveals; vanilla CSS for hover/focus states
- Icons:          Custom SVG sprite (Lucide icons as temporary stand-in during development)
- Component lib:  Radix UI Primitives for accessible dropdowns/modals (optional)
- Build tool:     Vite or Next.js built-in (matches Webflow export expectations)
- CMS:            Sanity or Contentful if content-managed (Webflow CMS alternative)

Font-loading strategy: Preload Financier Display Light (300) woff2 in <link rel="preload"> for hero headline LCP optimization. Load Ftbase and Fragment Mono asynchronously. Define the CSS custom properties (--font-display, --font-body, --font-mono) in :root for easy swapping.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single column, stacked layout; nav collapses to hamburger menu; hero headline scales down (~40–48px); stat cards stack vertically; CTA buttons full-width | | Tablet | 640px – 1024px | Two-column grid possible; navigation remains collapsed; reduced {spacing.section} (~60px); container padding reduces to 32px | | Desktop | 1024px – 1440px | Full layout as documented; 1440px container active; 64px gutters; multi-column stat display | | Wide | > 1440px | Container centers with increasing side margins; no content stretch beyond 1440px |

Touch Targets

• {component.button-primary}: 40px height × variable width (min 120px recommended) — exceeds 44×44px WCAG AAA minimum ✓
• {component.button-secondary}: Identical dimensions to primary — passes AAA ✓
• {component.nav-link}: Text-only with implicit ~44px height from 16px font + 16px padding — borderline; consider increasing tap area to 48px minimum on mobile
• {component.search-icon}: 20px × 20px visible, wrapped in ~44px touch target (inferred padding) — verify implementation meets 44px minimum
• {component.menu-toggle}: 24px × 24px icon, requires 44px minimum transparent touch-expansion padding
• {component.input-text}: 44–48px height with pill radius — meets AAA ✓

Collapsing Strategy

• Navigation: Desktop shows horizontal link list; tablet/mobile collapses to hamburger trigger → full-screen overlay with stacked vertical links, CTA button prominent at bottom.
• Hero section: Desktop uses asymmetric two-column (text left, stats/support right); mobile stacks vertically: label → headline → paragraph → CTA (full-width) → stat cards (horizontal scroll or stacked).
• Stat row: Three-column horizontal layout with vertical dividers on desktop; mobile converts to stacked cards with horizontal rules between them, or horizontally scrollable snap-point carousel.
• Container gutters: Reduce from 64px → 32px → 16px across breakpoints to maintain usable content area on small screens.
• Typography scaling: {typography.display-xl} (80px) likely reduces to 40–48px on mobile via fluid typography (clamp()); {typography.body-md} (34.4px) scales to ~20–24px for body readability.

Image Behavior

• Hero illustrations (if added): Should scale proportionally, possibly cropping to portrait orientation on mobile or moving below headline text.
• Stat icons/graphics: If stat cards contain icons or mini-illustrations, these should remain visible at reduced size (24–32px) or hide on mobile to preserve text legibility.
• Avatar images (team/provider photos): Maintain circular crop ({rounded.xl} / 100%), size at 64–80px on desktop reducing to 48px on mobile.

Iteration Guide

1. Initialize the project using Next.js or Astro with Tailwind CSS configured. Create a design-tokens.css file (or Tailwind theme extend block) containing every value from the YAML frontmatter — colors, typography, spacing, rounded — as CSS custom properties or Tailwind config tokens. Never hard-code hex codes or pixel values in components.

2. Build the global layout shell first: HTML structure with <header> (nav + banner), <main> (section container), and <footer>. Implement the 1440px max-width container with 64px gutters. Set background-color: var(--color-canvas) on body. Verify the {colors.canvas} warm taupe renders correctly.

3. Implement the navigation system — top banner ({component.top-banner}) in {colors.banner-dark}, then {component.top-nav} with logo (render "Function" in 80px Financier Display weight 300), center nav links in {typography.nav-link}, and right-side utilities (Login link as {component.button-secondary}, Start Testing as {component.button-primary}, search icon, menu toggle). Test mobile collapse behavior early.

4. Construct the hero section ({component.hero-section}) with 99px vertical padding. Build the typographic stack: {component.hero-label} badge (tiny, muted, tracked-out), then {component.hero-headline} at 80px (THE signature element — get this looking perfect), then {component.hero-subheadline} at 34.4px, then CTA button, then stat row with three {component.stat-card} children separated by {component.divider-vertical}.

5. Implement all button variants as a component family: Button component accepting variant="primary|secondary|outline" prop, rendering the appropriate frontmatter entry. Add hover and active state classes using the -hover and -active suffixed component entries. Ensure all buttons use {rounded.lg} (40px) — this is non-negotiable.

6. Create the card component system: Card with variant="default|elevated" prop mapping to {component.card} and {component.card-elevated}. Apply correct background color, border-radius, and padding from frontmatter. Nest content using {typography.body-sm} for card body text.

7. Add motion layer using the extracted transition tokens: apply transition: var(--transition-fast) to all interactive elements (buttons, links, inputs). Implement scroll-triggered opacity fades for sections entering viewport (using Intersection Observer or Framer Motion's whileInView). Add the spin keyframe to any loading indicator components.

8. Typography verification pass: Confirm Financier Display loads correctly (check Network tab for 404s on WOFF2 URLs). Verify fallback chain (Playfair Display → Times New Roman → serif) renders acceptably if custom font fails. Ensure {typography.display-xl} never exceeds 80px on desktop, and scales appropriately on mobile via clamp() or breakpoint overrides.

9. Accessibility audit: Check contrast ratios for {colors.primary} on {colors.on-primary} (should pass AA easily), {colors.ink} on {colors.canvas} (verify), {colors.muted} on {colors.surface-soft} (may be borderline — test). Confirm all interactive elements have visible focus states (recommend 2px {colors.border-primary} outline offset by 2px).

10. Run linting: Execute npx @google/design.md lint DESIGN.md after completion. Address any broken-ref, contrast-ratio, or orphaned-tokens warnings. Every {token.path} reference in this document must resolve to a defined frontmatter key.

Font Setup for Development:

:root {
  /* Custom property definitions matching frontmatter tokens */
  --font-display: 'Financier Display', 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-body: 'Ftbase', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Fragment mono', 'JetBrains Mono', 'Fira Code', 'Trebuchet MS', monospace;

  /* Color tokens (abbreviated — use full set from frontmatter) */
  --color-canvas: #d1c9bf;
  --color-primary: #b05a36;
  /* ... */

  /* Spacing tokens */
  --space-section: 99px;
  --space-container-gutter: 64px;
  /* ... */
}

@font-face {
  font-family: 'Financier Display';
  src: url('https://cdn.prod.website-files.com/68823b2fd9cc28b78fb3ee65/68c05e35dadf67deb8f5f2aa_financier-display-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Add additional @font-face declarations for other weights/styles */

If unable to host the proprietary Financier Display files, replace with Playfair Display from Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500&family=Inter:wght@400;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover visual treatment (background shifts, subtle transforms, underline appearance) is inferred from the existence of -hover suffixed component entries but not directly observable from static screenshot analysis.
• Loading/skeleton states: No skeleton loaders, shimmer effects, or pending-state UI patterns were detectable in the provided DOM. Recommend implementing skeleton cards matching {component.card} dimensions with {colors.hairline} background pulse animation.
• Form validation states: Only {component.input-text} and {component.input-text-focus} were extractable. Error state (red border, error message), disabled state, and success state (green check) require design decisions based on semantic colors {colors.error} and {colors.success}.
• Authenticated/dashboard surfaces: The screenshot captures the public marketing landing page only. Member dashboard, results viewer, appointment scheduling, and account settings interfaces may introduce new component patterns, denser layouts, or data-table-specific typography not represented here.
• Mobile navigation overlay: The hamburger menu trigger ({component.menu-toggle}) implies a mobile nav panel, but its structure (full-screen overlay, slide-out drawer, bottom sheet), contents, and animation behavior are not visible in the desktop screenshot.
• Video/media embeds: The presence of a play/pause button class (flute-play-pause-button) suggests video content somewhere on the page, but the player chrome, poster frame treatment, and lightbox behavior cannot be determined from current data.
• Sub-brand or tier-specific palettes: If Function offers Plus, Premium, or Enterprise tiers with differentiated visual identity, those variations are not captured in this single-page analysis.
• Dark mode definition: While extensions.mode: "light" is confirmed, no dark-mode token mappings (dark canvas, inverted text, adjusted primaries) were detectable. A future dark theme would need systematic color inversion decisions.
• Exact shadow placement: Two shadow tokens are defined ({extensions.shadows.sm} and {extensions.shadows.lg}), but which components receive which shadow (cards? dropdowns? modals?) is partially inferred rather than explicitly mapped from the limited shadow usage count (4 and 2 instances respectively).
• Webflow-specific class naming: Many CSS classes follow Webflow conventions (w-button, w-variant-*, w-embed). When porting to React/Next.js, these class names should be replaced with semantic BEM or component-scoped equivalents; the visual output must remain identical despite naming changes.