What font does BOOST use?

BOOST’s website uses three typefaces: Peak Rounded (headings and body text), self-hosted; GT Flexa Ext, self-hosted; GT Flexa Medium, self-hosted.

What are BOOST’s brand colours?

The main colours on takeboost.com are Coral (#FF710D), Light Orange (#FFB800), Deep Orange (#FFA800), Light Steel Blue (#A0AEC0), Light White (#FFFFFF) and Black (#000000).

What colour is BOOST’s text and background?

Body text is #FFFFFF on a #FFB800 background.

Where is BOOST’s logo from?

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

Is this BOOST’s official style guide?

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

BOOST 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: BOOST: The No.1 Immunity Gummy Vitamin; ● 38 / 60 characters
Meta description: Loaded with Elderberry, Vitamin C, and Zinc, BOOST is the first gummy vitamin dedicated to your immune system. BOOST helps you get sick less.; ● 141 / 160 characters
Site name: BOOST: The No.1 Immunity Gummy Vitamin
og:title: BOOST: The No.1 Immunity Gummy Vitamin
Language: en
Theme colour: #ffffff

In search results

BOOST: The No.1 Immunity Gummy Vitaminhttps://takeboost.com/

BOOST: The No.1 Immunity Gummy Vitamin

Loaded with Elderberry, Vitamin C, and Zinc, BOOST is the first gummy vitamin dedicated to your immune system. BOOST helps you get sick less.

When shared

takeboost.com

BOOST: The No.1 Immunity Gummy Vitamin

Loaded with Elderberry, Vitamin C, and Zinc, BOOST is the first gummy vitamin dedicated to your immune system…

Back to top ↑

Logo & favicons

Found as: SVG in the header. SVG, 139 × 59.

Logo

On white

On black

On Coral

Favicons

8 found

700 px · SVG mask-icon
512 px · PNG manifest
192 px · PNG manifest
180 px · PNG apple-touch-icon
48 px · ICO alternate icon
32 px · PNG icon
16 px · SVG icon
16 px · PNG icon

BOOST: The No.1 Immunity Gummy Vitamin

Light browser tab

BOOST: The No.1 Immunity Gummy Vitamin

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 (#FFFFFF) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

Light White 32.6%
Black 24%
Coral 15.7%
Light Orange 13.2%
Deep Orange 8.6%
Deep White 3.6%
Light Steel Blue 2%
Cool Off White 0.3%

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

Light White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
—

On white
—

Text, background, border · .button_button__281tu, body
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
21.00:1 AAA

On white
21.00:1 AAA

Text, border, background · .button_button__281tu.button_button__tertiary__3VJ4Z, .button_button__281tu.button_button__secondary__2-BYB
Deep White

HEX

RGB

HSL

OKLCH

CMYK
0 1 4 0

On text
1.03:1 Fail

On white
1.03:1 Fail

Background, graphic · .cart_cart__njcKv, .card_card__1lzBd.card_card__reverse__2BYvr
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
6 3 0 6

On text
1.23:1 Fail

On white
1.23:1 Fail

Border · *

Colours

Brand colours and accents, most used first

Coral

HEX

RGB

HSL

OKLCH

CMYK
0 56 95 0

On text
2.76:1 Fail

On white
2.76:1 Fail

Background · .button_button__281tu.button_button__secondary__2-BYB, body
Light Orange

HEX

RGB

HSL

OKLCH

CMYK
0 28 100 0

On text
1.73:1 Fail

On white
1.73:1 Fail

Background, border · body, .mobile_menu__2yPvj
Deep Orange

HEX

RGB

HSL

OKLCH

CMYK
0 34 100 0

On text
1.93:1 Fail

On white
1.93:1 Fail

Background · .button_button__281tu.button_button__secondary__2-BYB
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
17 9 0 25

On text
2.26:1 Fail

On white
2.26:1 Fail

Text · input::-webkit-input-placeholder, input:-ms-input-placeholder

Gradients

linear-gradient(315.01deg,#ff710d 8.31%,#ffb800 88.22%)
linear-gradient(134.99deg,#ff710d 8.31%,#ffa800 88.22%)
linear-gradient(315.01deg,#ff710d 8.31%,#ffa800 88.22%)

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.

Peak Rounded

Aa 400

Peak Rounded

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

Aa 700

GT Flexa Ext

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

Aa 500

GT Flexa Medium

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

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

Type scale

From the site’s CSS

Heading 1 max(54px,11.806vw) · 54 px / 80% weight 700 · uppercase

BOOST

Heading 2 max(45px,6.806vw) · 45 px / 90% weight 500 · uppercase

BOOST: The No.1 Immunity Gummy Vitamin

Heading 3 max(37px,4.514vw) · 37 px / 90% weight 500 · uppercase

BOOST: The No.1 Immunity Gummy Vitamin

Heading 4 max(31px,3.056vw) · 31 px / 1 weight 500 · uppercase · GT Flexa Medium

BOOST: The No.1 Immunity Gummy Vitamin

Heading 5 max(18px,1.528vw) · 18 px / 110% uppercase · Peak Rounded

BOOST: The No.1 Immunity Gummy Vitamin

Heading 6 max(12px,.903vw) · 12 px / 140% uppercase · Peak Rounded

BOOST: The No.1 Immunity Gummy Vitamin

Body — GT Flexa Ext

Loaded with Elderberry, Vitamin C, and Zinc, BOOST is the first gummy vitamin dedicated to your immune system. BOOST helps you get sick les…

Paragraph max(15px,1.111vw) · 15 px / 1.2 weight 400 · Peak Rounded

Loaded with Elderberry, Vitamin C, and Zinc, BOOST is the first gummy vitamin dedicated to your immune system. BOOST helps you get sick les…

Small 80%

Loaded with Elderberry, Vitamin C, and Zinc, BOOST is the first gummy vitamin dedicated to your immune system. BOOST helps you get sick les…

Button 100% / 1.15 none

Get started

Link max(11px,.903vw) · 11 px / 140% weight 400 · Peak Rounded

Sizes in use

Most common across the site

54pxline 80% · 2 rules
45pxline 90% · 3 rules
32px1 rules
18pxline 1 · 4 rules
16pxline 1 · 7 rules
15pxline 1.2 · 2 rules
12pxline 140% · 4 rules
10pxline 1 · 4 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

Corner radius

50% · 3×
26px · 2×
12.267vw · 2×
20px · 2×
3px · 1×
9px · 1×

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

414

600

767

800

1309

1310

1441

On a scale of 0 to 1441 px.

Back to top ↑

Notes

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

Notes

● FineThe title is 38 characters, short enough to show in full in search results.
▲ CheckBody text (#FFFFFF on #FFB800) has a contrast of 1.73:1, under the 4.5:1 WCAG asks for.

Back to top ↑

Questions

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

Questions

What font does BOOST use?: BOOST’s website uses three typefaces: Peak Rounded (headings and body text), self-hosted; GT Flexa Ext, self-hosted; GT Flexa Medium, self-hosted.
What are BOOST’s brand colours?: The main colours on takeboost.com are Coral (#FF710D), Light Orange (#FFB800), Deep Orange (#FFA800), Light Steel Blue (#A0AEC0), Light White (#FFFFFF) and Black (#000000).
What colour is BOOST’s text and background?: Body text is #FFFFFF on a #FFB800 background.
Where is BOOST’s logo from?: The logo shown in this guide was found on takeboost.com’s homepage. For official logo files and usage rules, check BOOST’s own brand or press page.
Is this BOOST’s official style guide?: No. SiteStyleGuide made it from takeboost.com’s public web pages on 23 October 2026, and isn’t affiliated with BOOST. 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

takeboost-com-tokens.css

Download

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

/* takeboost.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/takeboost.com) */
:root {
  /* Colours */
  --text: #FFFFFF;
  --background: #FFB800;
  --colour-light-white: #FFFFFF;
  --colour-black: #000000;
  --colour-deep-white: #FFFCF4;
  --colour-cool-off-white: #E2E8F0;
  --colour-coral: #FF710D;
  --colour-light-orange: #FFB800;
  --colour-deep-orange: #FFA800;
  --colour-light-steel-blue: #A0AEC0;
  --gradient-1: linear-gradient(315.01deg,#ff710d 8.31%,#ffb800 88.22%);
  --gradient-2: linear-gradient(134.99deg,#ff710d 8.31%,#ffa800 88.22%);
  --gradient-3: linear-gradient(315.01deg,#ff710d 8.31%,#ffa800 88.22%);

  /* Typefaces */
  --font-headings: 'Peak Rounded';
  --font-buttons: 'Peak Rounded';
  --font-body: 'Peak Rounded';

  /* Type scale */
  --text-h1: max(54px,11.806vw);
  --leading-h1: 80%;
  --text-h2: max(45px,6.806vw);
  --leading-h2: 90%;
  --text-h3: max(37px,4.514vw);
  --leading-h3: 90%;
  --text-h4: max(31px,3.056vw);
  --leading-h4: 1;
  --text-h5: max(18px,1.528vw);
  --leading-h5: 110%;
  --text-h6: max(12px,.903vw);
  --leading-h6: 140%;
  --text-p: max(15px,1.111vw);
  --leading-p: 1.2;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;
  --text-a: max(11px,.903vw);
  --leading-a: 140%;

  /* Shape */
  --radius-1: 50%;
  --radius-2: 26px;
  --radius-3: 12.267vw;
  --radius-4: 20px;
  --radius-5: 3px;
  --radius-6: 9px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 414px;
  --breakpoint-2: 600px;
  --breakpoint-3: 767px;
  --breakpoint-4: 800px;
  --breakpoint-5: 1309px;
  --breakpoint-6: 1310px;
  --breakpoint-7: 1441px;
}

{
    "site": "takeboost.com",
    "source": "https://sitestyleguide.com/takeboost.com",
    "text": "#FFFFFF",
    "background": "#FFB800",
    "colours": [
        {
            "name": "Light White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Deep White",
            "hex": "#FFFCF4",
            "rgb": [
                255,
                252,
                244
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#E2E8F0",
            "rgb": [
                226,
                232,
                240
            ]
        },
        {
            "name": "Coral",
            "hex": "#FF710D",
            "rgb": [
                255,
                113,
                13
            ]
        },
        {
            "name": "Light Orange",
            "hex": "#FFB800",
            "rgb": [
                255,
                184,
                0
            ]
        },
        {
            "name": "Deep Orange",
            "hex": "#FFA800",
            "rgb": [
                255,
                168,
                0
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#A0AEC0",
            "rgb": [
                160,
                174,
                192
            ]
        }
    ],
    "fonts": [
        {
            "name": "Peak Rounded",
            "stack": "\"Peak Rounded\"",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "GT Flexa Ext",
            "stack": "\"GT Flexa Ext\", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
            "weights": [
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "GT Flexa Medium",
            "stack": "\"GT Flexa Medium\"",
            "weights": [
                500
            ],
            "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 takeboost.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/takeboost.com" title="BOOST 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 ↑

BOOSTstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

Light White

Black

Deep White

Cool Off White

Colours

Coral

Light Orange

Deep Orange

Light Steel Blue

Gradients

Peak Rounded

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Resurf

ADSCHEMIST

ICICI Bank

overcast.fm

BOOSTstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Light White

Black

Deep White

Cool Off White

Colours

Coral

Light Orange

Deep Orange

Light Steel Blue

Gradients

Peak Rounded

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run takeboost.com?

Similar colours

Resurf

ADSCHEMIST

ICICI Bank

overcast.fm

Title &
description