№ functionhealth-com--about

Part of Functionhealth - 5 pages captured →

Functionhealth — About

Warm ochre and muted terracotta, clean sans-serif geometry, spacious, airy depth.

Feature Stackminimalism editorial swiss healthlight

The page uses a full-bleed image and a clean layout with ample white space. Typography is straightforward and legible, prioritizing clarity and a sense of calm authority. The color palette is muted and earthy, reinforcing a feeling of trustworthiness. · health tech, wellness platform, genetic testing, functional medicine, health scans, data privacy, personalized health

Functionhealth — About - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Functionhealth — About - full page scroll

Functionhealth — About - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: earthy · muted · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#b45c34
OKLCHoklch(57.3% 0.126 44)
RoleDominant
find sites →
Hex#5c3c0c
OKLCHoklch(38.5% 0.075 72)
RoleSurface
find sites →
Hex#cc9a81
OKLCHoklch(72.7% 0.070 48)
RoleInk
find sites →
Hex#886f5a
OKLCHoklch(56.0% 0.044 62)
RoleAccent
find sites →
Hex#c4bdb4
OKLCHoklch(80.2% 0.015 74)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Financier Display	80px	300	0.9	0	Aa Bb Cc
h2	Financier Display	64px	300	1	0	Aa Bb Cc
h3	FT Base	18px	600	1.39	-0.18px	Aa Bb Cc
body	FT Base	16px	300	1.5	0	Aa Bb Cc
button	FT Base	14px	600	1	-0.05px	Aa Bb Cc

Spacing scale

8px

10px

12px

16px

20px

24px

32px

40px

44px

48px

56px

64px

80px

88px

96px

99px

116px

120px

Radius scale

0px

12px

24px

36px

40px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #b45c34;
  --color-surface: #5c3c0c;
  --color-ink: #cc9a81;
  --color-accent: #886f5a;
  --color-detail: #c4bdb4;
}

/* CSS variables exposed by source */
:root {
  --font-mono: "Fragment Mono", monospace;
  --text-02: #515151;
  --text-01: #FEF9EF;
  --radius-base: .75rem;
  --text-xl: clamp(1.125rem, .5639vw + .9925rem, 1.5rem);
  --text-md: clamp(1rem, .188vw + .9558rem, 1.125rem);
  --text-sm: .875rem;
  --text-regular: 1rem;
  --text-03: #2A2B2F;
  --radius-large: clamp(1rem, .7519vw + .8233rem, 1.5rem);
  --text-04: #B05A36;
  --text-05: hsla(0, 0%, 45%, 1);
  --text-lg: clamp(1.125rem, .188vw + 1.0808rem, 1.25rem);
  --text-xxl: clamp(1.8125rem, .4699vw + 1.7021rem, 2.125rem);
  --font-sans: "FT Base", system-ui, sans-serif;
  --radius-small: .375rem;
  --text-xs: .75rem;
  --radius-xs: .25rem;
  --font-serif: "Financier Display", Georgia, serif;
  --radius-xl: clamp(1.5rem, 1.5038vw + 1.1466rem, 2.5rem);
  --k-preference-tabs-purposes-header-link-color: rgba(0, 0, 0, 1);
  --k-consentGate-header-background: rgba(255, 255, 255, 1);
  --beige: #FEF9EF;
  --k-banner-buttons-primary-background-color: rgba(176, 90, 54, 1);
  --k-modal-gpcBanner-outline-color: rgba(255, 255, 255, 1);
  --fill-04: #B05A36;
  --k-modal-footer-actionButton-text-color: rgba(255, 255, 255, 1);
  --k-banner-container-background-color: rgba(245, 238, 225, 1);
  --k-consentGate-container-background-color: rgba(255, 255, 255, 1);
  --k-preference-header-title-color: rgba(0, 0, 0, 1);
  --k-preference-tabs-requests-home-header-description-color: rgba(0, 0, 0, 1);
  --safe-area-inset-bottom: 0px;
  --k-preference-tabs-requests-rightForm-actionButton-text-color: rgba(255, 255, 255, 1);
  --h4: clamp(1.6875rem, .6579vw + 1.5329rem, 2.125rem);
  --stroke-05: #B05A36;
  --k-preference-navigation-layout-item-arrowIcon-color: rgba(255, 255, 255, 1);
  --k-preference-tabs-purposes-purposeList-switchButtons-off-background-color: rgba(193, 198, 200, 1);
  --k-preference-tabs-purposes-purposeList-actionButton-cornerRadius: 0px;
  --k-modal-gpcBanner-fill-color: rgba(254, 249, 239, 1);
  --k-banner-gpcBanner-fill-color: rgba(254, 249, 239, 1);
  --k-preference-exitButton-text-color: rgba(254, 249, 239, 1);
  --k-consentGate-consentBlock-purposes-list-bulkActionButtons-rejectAllButton-text-color: rgba(255, 255, 255, 1);
  --s11: clamp(3.5rem, 2.2556vw + 2.9699rem, 5rem);
  --k-preference-tabs-welcome-welcomeMsg-link-color: rgba(0, 0, 0, 1);
  --k-preference-tabs-purposes-purposeList-purposeListItems-purposeFill-color: rgba(243, 243, 243, 1);
  --k-preference-tabs-requests-rightForm-header-returnButton-background-color: rgba(255, 255, 255, 1);
  --k-preference-tabs-subscriptions-list-switchButton-on-thumb-color: rgba(255, 255, 255, 1);
  --k-consentGate-consentBlock-purposes-list-items-purposeOutline-color: rgba(193, 198, 200, 1);
  --h1: clamp(3.5625rem, 2.1617vw + 3.0545rem, 5rem);
  --k-banner-buttons-tertiary-text-color: rgba(42, 43, 47, 1);
  --k-modal-gpcBanner-link-text-color: rgba(0, 0, 0, 1);
  --k-preference-tabs-purposes-gpcBanner-outline-color: rgba(255, 255, 255, 1);
  --k-consentGate-consentBlock-purposes-list-bulkActionButtons-rejectAllButton-background-color: rgba(0, 0, 0, 1);
  --sidebar-quote: clamp(1.375rem, .3759vw + 1.2867rem, 1.625rem);
  --error: #DB0000;
  --k-consentGate-consentBlock-button-text-color: rgba(255, 255, 255, 1);
  --k-consentGate-consentBlock-purposes-list-items-purposeLinks-color: rgba(0, 0, 0, 1);
  --k-preference-tabs-purposes-purposeList-switchButtons-on-icon-color: rgba(255, 255, 255, 1);
  --k-consentGate-container-cornerRadius: 0;
  --k-preference-tabs-subscriptions-unsubscribeAll-switchButton-off-text-color: rgba(0, 0, 0, 1);
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Functionhealth — About.
Reference design system (extracted from the live site):
- Palette: #b45c34, #5c3c0c, #cc9a81, #886f5a, #c4bdb4
- Typefaces: Financier Display, FT Base
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/functionhealth-com--about

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Financier Display

80px

300

0.9

Aa Bb Cc

Financier Display

64px

300

Aa Bb Cc

FT Base

18px

600

1.39

-0.18px

Aa Bb Cc

body

FT Base

16px

300

1.5

Aa Bb Cc

button

FT Base

14px

600

-0.05px

Aa Bb Cc

:root { --color-dominant: #b45c34; --color-surface: #5c3c0c; --color-ink: #cc9a81; --color-accent: #886f5a; --color-detail: #c4bdb4; } /* CSS variables exposed by source */ :root { --font-mono: "Fragment Mono", monospace; --text-02: #515151; --text-01: #FEF9EF; --radius-base: .75rem; --text-xl: clamp(1.125rem, .5639vw + .9925rem, 1.5rem); --text-md: clamp(1rem, .188vw + .9558rem, 1.125rem); --text-sm: .875rem; --text-regular: 1rem; --text-03: #2A2B2F; --radius-large: clamp(1rem, .7519vw + .8233rem, 1.5rem); --text-04: #B05A36; --text-05: hsla(0, 0%, 45%, 1); --text-lg: clamp(1.125rem, .188vw + 1.0808rem, 1.25rem); --text-xxl: clamp(1.8125rem, .4699vw + 1.7021rem, 2.125rem); --font-sans: "FT Base", system-ui, sans-serif; --radius-small: .375rem; --text-xs: .75rem; --radius-xs: .25rem; --font-serif: "Financier Display", Georgia, serif; --radius-xl: clamp(1.5rem, 1.5038vw + 1.1466rem, 2.5rem); --k-preference-tabs-purposes-header-link-color: rgba(0, 0, 0, 1); --k-consentGate-header-background: rgba(255, 255, 255, 1); --beige: #FEF9EF; --k-banner-buttons-primary-background-color: rgba(176, 90, 54, 1); --k-modal-gpcBanner-outline-color: rgba(255, 255, 255, 1); --fill-04: #B05A36; --k-modal-footer-actionButton-text-color: rgba(255, 255, 255, 1); --k-banner-container-background-color: rgba(245, 238, 225, 1); --k-consentGate-container-background-color: rgba(255, 255, 255, 1); --k-preference-header-title-color: rgba(0, 0, 0, 1); --k-preference-tabs-requests-home-header-description-color: rgba(0, 0, 0, 1); --safe-area-inset-bottom: 0px; --k-preference-tabs-requests-rightForm-actionButton-text-color: rgba(255, 255, 255, 1); --h4: clamp(1.6875rem, .6579vw + 1.5329rem, 2.125rem); --stroke-05: #B05A36; --k-preference-navigation-layout-item-arrowIcon-color: rgba(255, 255, 255, 1); --k-preference-tabs-purposes-purposeList-switchButtons-off-background-color: rgba(193, 198, 200, 1); --k-preference-tabs-purposes-purposeList-actionButton-cornerRadius: 0px; --k-modal-gpcBanner-fill-color: rgba(254, 249, 239, 1); --k-banner-gpcBanner-fill-color: rgba(254, 249, 239, 1); --k-preference-exitButton-text-color: rgba(254, 249, 239, 1); --k-consentGate-consentBlock-purposes-list-bulkActionButtons-rejectAllButton-text-color: rgba(255, 255, 255, 1); --s11: clamp(3.5rem, 2.2556vw + 2.9699rem, 5rem); --k-preference-tabs-welcome-welcomeMsg-link-color: rgba(0, 0, 0, 1); --k-preference-tabs-purposes-purposeList-purposeListItems-purposeFill-color: rgba(243, 243, 243, 1); --k-preference-tabs-requests-rightForm-header-returnButton-background-color: rgba(255, 255, 255, 1); --k-preference-tabs-subscriptions-list-switchButton-on-thumb-color: rgba(255, 255, 255, 1); --k-consentGate-consentBlock-purposes-list-items-purposeOutline-color: rgba(193, 198, 200, 1); --h1: clamp(3.5625rem, 2.1617vw + 3.0545rem, 5rem); --k-banner-buttons-tertiary-text-color: rgba(42, 43, 47, 1); --k-modal-gpcBanner-link-text-color: rgba(0, 0, 0, 1); --k-preference-tabs-purposes-gpcBanner-outline-color: rgba(255, 255, 255, 1); --k-consentGate-consentBlock-purposes-list-bulkActionButtons-rejectAllButton-background-color: rgba(0, 0, 0, 1); --sidebar-quote: clamp(1.375rem, .3759vw + 1.2867rem, 1.625rem); --error: #DB0000; --k-consentGate-consentBlock-button-text-color: rgba(255, 255, 255, 1); --k-consentGate-consentBlock-purposes-list-items-purposeLinks-color: rgba(0, 0, 0, 1); --k-preference-tabs-purposes-purposeList-switchButtons-on-icon-color: rgba(255, 255, 255, 1); --k-consentGate-container-cornerRadius: 0; --k-preference-tabs-subscriptions-unsubscribeAll-switchButton-off-text-color: rgba(0, 0, 0, 1); }

Build a landing page in the visual style of Functionhealth — About. Reference design system (extracted from the live site): - Palette: #b45c34, #5c3c0c, #cc9a81, #886f5a, #c4bdb4 - Typefaces: Financier Display, FT Base - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/functionhealth-com--about