What font does Function Health use?

Function Health’s website uses three typefaces: FT Base (headings and body text), self-hosted; Financier Display, self-hosted; Fragment Mono, self-hosted.

What are Function Health’s brand colours?

The main colours on functionhealth.com are Sienna (#B05A36), Red (#DB0000), Dark Green (#13411F), Dark Sea Green (#79BD8B), Sea Green (#4C9A62) and Dodger Blue (#488AD5).

What colour is Function Health’s text and background?

Body text is #2A2B2F on a #FEF9EF background.

Where is Function Health’s logo from?

The logo shown in this guide was found on functionhealth.com’s homepage. For official logo files and usage rules, check Function Health’s own brand or press page.

Is this Function Health’s official style guide?

No. SiteStyleGuide made it from functionhealth.com’s public web pages on 26 October 2026, and isn’t affiliated with Function Health. Members can refresh a guide after 90 days to pick up changes.

Function Health Style Guide: Colours, Fonts & Logo

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Function Health — check your health; ● 35 / 60 characters
Meta description: It’s time you own your health. Function includes 160+ lab tests and personalized protocols for instant action. Tracked over time in one secure place.; ● 149 / 160 characters
Site name: Function Health
og:title: Function Health — check your health
og:description: It’s time you own your health. Function includes 160+ lab tests and personalized protocols for instant action. Tracked over time in one secure place.
Language: en

In search results

Function Healthhttps://www.functionhealth.com/

Function Health — check your health

It’s time you own your health. Function includes 160+ lab tests and personalized protocols for instant action. Tracked over time in one secure place.

When shared

The image Function Health shares with links

functionhealth.com

Function Health — check your health

It’s time you own your health. Function includes 160+ lab tests and personalized protocols for instant action…

Back to top ↑

Logo & favicons

Found as: schema.org logo. PNG, 256 × 256.

Logo

On white

On black

On Sienna

Favicons

2 found

256 px · PNG shortcut icon
32 px · PNG icon

Function Health — check your health

Light browser tab

Function Health — check your health

Dark browser tab

Back to top ↑

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#2A2B2F) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

Cool Charcoal 46.6%
Warm Off White 23.7%
Sienna 13%
Warm Light Grey 7.8%
Dark Grey 7.2%
Red 0.8%
Dark Green 0.3%
Dark Sea Green 0.3%
Sea Green 0.2%
Dodger Blue 0.1%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

Cool Charcoal

HEX

RGB

HSL

OKLCH

CMYK
11 9 0 82

On text
—

On white
14.14:1 AAA

Text, background, border · .hero_bg[data-astro-cid-2ehw4ebi]:after, .what-we-test_item-title.svelte-1bp56l
Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 2 6 0

On text
13.47:1 AAA

On white
1.05:1 Fail

Background, text, border · .hero-partners__media[data-astro-cid-brs2mzlm], .fh-scroll-rail__viewport::after
Warm Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 4 9 18

On text
8.63:1 AAA

On white
1.64:1 Fail

Border, background, text · .what-we-test_meta-divider.svelte-1r4xzht, .biomarkers_grid[data-astro-cid-3sikc7yv]:before
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 68

On text
1.78:1 Fail

On white
7.94:1 AAA

Text, background · .biomarker-assistant__transcript-email-heading.svelte-w6y7au button:where(.svelt, .hero--dark[data-astro-cid-2ehw4ebi] .hero_bg[data-astro-cid-2ehw4ebi]

Colours

Brand colours and accents, most used first

Sienna

HEX

RGB

HSL

OKLCH

CMYK
0 49 69 31

On text
2.94:1 Fail

On white
4.81:1 AA

Text, background, border · .biomarker-assistant__footer-actions.svelte-w6y7au button:where(.svelte-w6y7au), .biomarker-assistant__conversion-title.svelte-w6y7au em:where(.svelte-w6y7au)
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 14

On text
2.70:1 Fail

On white
5.23:1 AA

Text, border · .biomarker-assistant__transcript-email-error.svelte-w6y7au, .biomarker-assistant__email-error.svelte-w6y7au
Dark Green

HEX

RGB

HSL

OKLCH

CMYK
71 0 52 75

On text
1.21:1 Fail

On white
11.64:1 AAA

Text · .lab-options-summary__badge--included.svelte-qcid2z, .lab-options-summary__received.svelte-qcid2z
Dark Sea Green

HEX

RGB

HSL

OKLCH

CMYK
36 0 26 26

On text
6.37:1 AA

On white
2.22:1 Fail

Background, border · .test-landing-outcomes__card--early[data-astro-cid-ff4c6hsj] .test-landing-outco, .ai-connector-graphic__marker--in.svelte-1ss83fv
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
51 0 36 40

On text
4.11:1 AA large

On white
3.44:1 AA large

Border · .notification-banner--function-day[data-astro-cid-pjdxgovv], --medium-green
Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
66 35 0 16

On text
3.95:1 AA large

On white
3.58:1 AA large

Text · .ai-connector-graphic__sync-check.svelte-1ss83fv, --blue

Gradients

linear-gradient(202deg,#fef9ef00 52.18%,#fef9ef66 135.96%)
linear-gradient(201.98deg,#fef9ef1f 28%,#fef9efad 135.96%)
radial-gradient(circle at 50% 50%,rgba(254,249,239,.96) 0 16%,transparent 17%),linear-gradient(180deg,#f5eee1b3,#fef9eff2)

Back to top ↑

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

FT Base

Aa 300 Aa 600

FT Base

Self-hosted · weights 300, 400, 600 · headings, buttons, body · shown in a stand-in if you don’t have it

Aa 300 Aa 400

Financier Display

Self-hosted · weights 300, 400 · headings · shown in a stand-in if you don’t have it

Aa 400

Fragment Mono

Self-hosted · weights 400 · headings · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 clamp(2.125rem, 1.0338vw + 1.882rem, 2.8125rem) · 45 px / 1.2 weight 300 · Financier Display

Function Health

Heading 2 clamp(1.6875rem, .6579vw + 1.5329rem, 2.125rem) · 34 px / 1.25 weight 300 · Financier Display

Function Health — check your health

Heading 3 clamp(1.375rem, .188vw + 1.3308rem, 1.5rem) · 24 px / 1.25 weight 300 · Financier Display

Function Health — check your health

Heading 4 clamp(1.125rem, .5639vw + .9925rem, 1.5rem) · 24 px / 1.15 weight 600 · FT Base

Function Health — check your health

Heading 5 clamp(1.125rem, .5639vw + .9925rem, 1.5rem) · 24 px / 1.15 weight 600 · FT Base

Function Health — check your health

Body 1rem · 16 px / 1.5 weight 300 · FT Base

It’s time you own your health. Function includes 160+ lab tests and personalized protocols for instant action. Tracked over time in one sec…

Paragraph clamp(1rem, .188vw + .9558rem, 1.125rem) · 18 px / 1.5 weight 400 · FT Base

It’s time you own your health. Function includes 160+ lab tests and personalized protocols for instant action. Tracked over time in one sec…

Sizes in use

Most common across the site

45pxline 1 · 27 rules
24pxline 1.25 · 28 rules
20pxline 1.5 · 40 rules
18pxline 1.5 · 56 rules
16pxline 1.5 · 123 rules
14pxline 1.5 · 169 rules
12pxline 1.5 · 69 rules
11pxline 1.2 · 23 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.editorial-entries__filters[data-astro-cid-6n4q5mrv] button[data-astro-cid-6n4q5 · #2A2B2F

Corner radius

999px · 80×
.75rem · 76×
.375rem · 44×
.25rem · 28×
clamp(1rem, .7519vw + .8233rem, 1.5rem) · 15×
clamp(1.5rem, 1.5038vw + 1.1466rem, 2.5rem) · 11×

Shadows

0 0 20px #00000026
0 2px 12px #0000001a
0 16px 48px #1018283d
1.6px 1.6px 8px #00000029

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

380

600

767

768

800

1099

1100

1199

On a scale of 0 to 1440 px.

Content widths (max-width)

888 px

672 px

656 px

640 px

600 px

576 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 35 characters, short enough to show in full in search results.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Function Health use?: Function Health’s website uses three typefaces: FT Base (headings and body text), self-hosted; Financier Display, self-hosted; Fragment Mono, self-hosted.
What are Function Health’s brand colours?: The main colours on functionhealth.com are Sienna (#B05A36), Red (#DB0000), Dark Green (#13411F), Dark Sea Green (#79BD8B), Sea Green (#4C9A62) and Dodger Blue (#488AD5).
What colour is Function Health’s text and background?: Body text is #2A2B2F on a #FEF9EF background.
Where is Function Health’s logo from?: The logo shown in this guide was found on functionhealth.com’s homepage. For official logo files and usage rules, check Function Health’s own brand or press page.
Is this Function Health’s official style guide?: No. SiteStyleGuide made it from functionhealth.com’s public web pages on 26 October 2026, and isn’t affiliated with Function Health. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

functionhealth-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* functionhealth.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/functionhealth.com) */
:root {
  /* Colours */
  --text: #2A2B2F;
  --background: #FEF9EF;
  --colour-cool-charcoal: #2A2B2F;
  --colour-warm-off-white: #FEF9EF;
  --colour-warm-light-grey: #D1C9BF;
  --colour-dark-grey: #515151;
  --colour-sienna: #B05A36;
  --colour-red: #DB0000;
  --colour-dark-green: #13411F;
  --colour-dark-sea-green: #79BD8B;
  --colour-sea-green: #4C9A62;
  --colour-dodger-blue: #488AD5;
  --gradient-1: linear-gradient(202deg,#fef9ef00 52.18%,#fef9ef66 135.96%);
  --gradient-2: linear-gradient(201.98deg,#fef9ef1f 28%,#fef9efad 135.96%);
  --gradient-3: radial-gradient(circle at 50% 50%,rgba(254,249,239,.96) 0 16%,transparent 17%),linear-gradient(180deg,#f5eee1b3,#fef9eff2);

  /* Typefaces */
  --font-headings: 'FT Base', system-ui, sans-serif;
  --font-buttons: 'FT Base', system-ui, sans-serif;
  --font-body: 'FT Base', system-ui, sans-serif;

  /* Type scale */
  --text-h1: clamp(2.125rem, 1.0338vw + 1.882rem, 2.8125rem);
  --leading-h1: 1.2;
  --text-h2: clamp(1.6875rem, .6579vw + 1.5329rem, 2.125rem);
  --leading-h2: 1.25;
  --text-h3: clamp(1.375rem, .188vw + 1.3308rem, 1.5rem);
  --leading-h3: 1.25;
  --text-h4: clamp(1.125rem, .5639vw + .9925rem, 1.5rem);
  --leading-h4: 1.15;
  --text-h5: clamp(1.125rem, .5639vw + .9925rem, 1.5rem);
  --leading-h5: 1.15;
  --text-body: 1rem;
  --leading-body: 1.5;
  --text-p: clamp(1rem, .188vw + .9558rem, 1.125rem);
  --leading-p: 1.5;

  /* Shape */
  --radius-1: 999px;
  --radius-2: .75rem;
  --radius-3: .375rem;
  --radius-4: .25rem;
  --radius-5: clamp(1rem, .7519vw + .8233rem, 1.5rem);
  --radius-6: clamp(1.5rem, 1.5038vw + 1.1466rem, 2.5rem);

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 380px;
  --breakpoint-2: 600px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 800px;
  --breakpoint-6: 1099px;
  --breakpoint-7: 1100px;
  --breakpoint-8: 1199px;
  --max-width-1: 888px;
  --max-width-2: 672px;
  --max-width-3: 656px;
  --max-width-4: 640px;
  --max-width-5: 600px;
  --max-width-6: 576px;
}

{
    "site": "functionhealth.com",
    "source": "https://sitestyleguide.com/functionhealth.com",
    "text": "#2A2B2F",
    "background": "#FEF9EF",
    "colours": [
        {
            "name": "Cool Charcoal",
            "hex": "#2A2B2F",
            "rgb": [
                42,
                43,
                47
            ]
        },
        {
            "name": "Warm Off White",
            "hex": "#FEF9EF",
            "rgb": [
                254,
                249,
                239
            ]
        },
        {
            "name": "Warm Light Grey",
            "hex": "#D1C9BF",
            "rgb": [
                209,
                201,
                191
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#515151",
            "rgb": [
                81,
                81,
                81
            ]
        },
        {
            "name": "Sienna",
            "hex": "#B05A36",
            "rgb": [
                176,
                90,
                54
            ]
        },
        {
            "name": "Red",
            "hex": "#DB0000",
            "rgb": [
                219,
                0,
                0
            ]
        },
        {
            "name": "Dark Green",
            "hex": "#13411F",
            "rgb": [
                19,
                65,
                31
            ]
        },
        {
            "name": "Dark Sea Green",
            "hex": "#79BD8B",
            "rgb": [
                121,
                189,
                139
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#4C9A62",
            "rgb": [
                76,
                154,
                98
            ]
        },
        {
            "name": "Dodger Blue",
            "hex": "#488AD5",
            "rgb": [
                72,
                138,
                213
            ]
        }
    ],
    "fonts": [
        {
            "name": "FT Base",
            "stack": "\"FT Base\", system-ui, sans-serif",
            "weights": [
                300,
                400,
                600
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Financier Display",
            "stack": "\"Financier Display\", Georgia, serif",
            "weights": [
                300,
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Fragment Mono",
            "stack": "\"Fragment Mono\", monospace",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run functionhealth.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/functionhealth.com" title="Function Health style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Function Healthstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

Cool Charcoal

Warm Off White

Warm Light Grey

Dark Grey

Colours

Sienna

Red

Dark Green

Dark Sea Green

Sea Green

Dodger Blue

Gradients

FT Base

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Amazon.in

Zia Tile

Lutărie

BBC

Function Healthstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Cool Charcoal

Warm Off White

Warm Light Grey

Dark Grey

Colours

Sienna

Red

Dark Green

Dark Sea Green

Sea Green

Dodger Blue

Gradients

FT Base

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run functionhealth.com?

Similar colours

Amazon.in

Zia Tile

Lutărie

BBC

Title &
description