Styleguide

Brand Colors

slate - #636262
deep-sea - #294F4B
sea-foam - #538E88
sage - #294F4B
thyme - #9CC6C1
suede - #D8E8E7

Typography

Headings

H1

H2

H3

H4

H5
H6

Display headings

Display 1

Display 2

Display 3

Display 4

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Type styles

Blockquotes

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The author of the quote

Buttons

Primary Button

Shop Now

Learn More

Secondary Button

Success Button

Info Button

Warning Button

Danger Button

Light Button

Dark Button

Primary Outline

Secondary Outline

Success Outline

Info Outline

Warning Outline

Danger Outline

Dark Outline

Background Colors

Theme Colors

bg-primary
bg-secondary
bg-success
bg-info
bg-warning
bg-danger
bg-light
bg-dark
bg-blue-643

Text & Link Colors

Theme Colors

text-primary

text-secondary

text-success

text-info

text-warning

text-danger

text-light

text-dark

Brand Colors

text-blue-7453

text-blue

text-pink-2085

text-pink-521

text-purple-2351

text-purple-2356

text-purple-2351

text-warm-gray


Testimonials

Testimonial 1: Dr. Adi J.

Content: "I’m so glad that a company finally put together exactly the right formula to help with immunity. I can’t thank these guys enough!"
Star Count: 5

Testimonial 2: Francine M.

Content: "Anyone who needs a boost to their immune system like me should be taking this religiously!"
Star Count: 5

Testimonial 3: Jennifer S.

Content: "As an athlete I can be slowed down by bad ingredients. Immuntoype uses only the best."
Star Count: 5

Testimonial 4: Jordan K.

Content: "Immunotype has made taking my vitamins quick and easy."
Star Count: 5

Testimonial 5: Sophie J.

Content: "I’ve felt a boost and I don’t feel like I’m lacking the things I need anymore. Now I’ve bought some for the whole family"
Star Count: 5

Testimonial 6:

Content:
Star Count:

Scientists

Scientist 1: Dr. Steve Henig, PhD

Title: Chief Science Officer
Content: “Of all the medical modalities that exist, I believe that DNA has the greatest potential to unlock optimal health and wellness.”

Scientist 2: Dr. Colleen Draper, MS,RD, PhD

Title: Nutrition Scientst
Content: "Supplementation has long missed the key piece of diagnostic follow-up to determine efficacy. At Caligenix, we have made that a cornerstone of our mission."

Scientist 3: Dr. Lee Schmidt, PhD

Title: Molecular Biologist
Content: "We are in an age of slick marketing and big promises when it comes to supplements and health. I’m proud to be with a company that backs up what they say with hard science."

Scientist 4: Diana Noland, RD, MPH, CCN

Title: Integrative Medical Nutrition
Content: "I’m so honored to be part of a team that puts science and functional nutrition first."

Ingredients

Ingredient 1: Vitamin D3

Description: (as cholecalciferol)
Page: vitamin-d3
Dose: 2000 IU
Type: Vitamin
Immunity Benefit:

Plays a critical role in promoting immune response by enhancing the function of our immune cells.

It has both anti-inflammatory and immunoregulatory properties and is crucial for the activation of immune system defenses.

Low levels have been associated with an increased susceptibility to infection, disease, and immune-related disorders.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title:
Synergy Content:
Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: The immunological implication of the new vitamin D metabolism
Source Title 2: Vitamin D3: a helpful immuno-modulator
Source Title 3: Vitamin D and the immune system
Source Content 4:
Source Title 4:
Source Content 5:
Source Title 5:

Ingredient 2: Vitamin C

Description: (as ascorbic acid)
Page: vitamin-c
Dose: 750 mg.
Type: Vitamin
Immunity Benefit:

An essential micronutrient and potent antioxidant.

It supports epithelial barrier function against pathogens and promotes the oxidant scavenging activity of the skin, thereby potentially protecting against environmental oxidative stress. 

Supplementation with vitamin C appears to be able to both prevent and treat respiratory infections.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title: Vitamin C + Iron
Synergy Content:

We don't absorb 100 percent of the iron in food, especially non-heme iron from plant foods. Vitamin C (ascorbic acid) acts as a catalyst to help our bodies absorb iron better from food and from supplements. This is important because iron is an essential component of hemoglobin, the substance in red blood cells that delivers oxygen to every cell in your body. Without enough iron and oxygen, you're likely to feel tired, your immune system's ability to fight off infections will take a hit and your brain function may not be as sharp as it could or should be.

Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: Vitamin C and Immune Function
Source Title 2: A Review of Micronutrients and the Immune System-Working in Harmony to Reduce the Risk of Infection
Source Title 3: A new clinical trial to test high-dose vitamin C in patients with COVID-19.
Source Content 4:
Source Title 4:
Source Content 5:
Source Title 5:

Ingredient 3: Vitamin A

Description: (as retinyl acetate and 50% beta carotene)
Page: vitamin-a
Dose: 5000 IU
Type: Vitamin
Immunity Benefit:

Best known as an anti-inflammation vitamin because of its critical role in enhancing immune function.

Influence the immune response in a highly specific way as its bioactive metabolites strengthen intestinal immune response.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title:
Synergy Content:
Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: Role of Vitamin A in the Immune System
Source Title 2: Vitamin A as an anti-infective agent.
Source Title 3: Modulation of Intestinal Immune and Barrier Functions by Vitamin A: Implications for Current Understanding of Malnutrition and Enteric Infections in Children
Source Title 4: Effects of carotenoids on human immune function.
Source Content 5:
Source Title 5:

Ingredient 4: Vitamin B6

Description: (as pyridoxine hydrochloride)
Page: vitamin-b6
Dose: 5 mg.
Type: Vitamin
Immunity Benefit:

Is vital to supporting biochemical reactions in the immune system so that it responds appropriately. B6 helps your body make a protein called interleukin-2, which helps direct the actions of white blood cells.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title: Vitamin B6 + B12, Folate
Synergy Content:

They act like buddies, working synergistically to reduce levels of homocysteine, an amino acid, in the body. Lower homocysteine may reduce the risk of heart disease and stroke. The trio of B vitamins also helps maintain brain health and proper neurological function.

Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: Vitamin B6 supplementation increases immune responses in critically ill patients.
Source Title 2: Vitamin B6 and immune competence
Source Title 3: Inflammation, vitamin B6 and related pathways.
Source Content 4:
Source Title 4:
Source Content 5:
Source Title 5:

Ingredient 5: Vitamin B12

Description: (as methlycobalamin)
Page: vitamin-b12
Dose: 20 mcg.
Type: Vitamin
Immunity Benefit:

Plays an important role in white blood cell production which are essential for proper immune system functioning.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title: Vitamin B12 + B6, Folate
Synergy Content:

They act like buddies, working synergistically to reduce levels of homocysteine, an amino acid, in the body. Lower homocysteine may reduce the risk of heart disease and stroke. The trio of B vitamins also helps maintain brain health and proper neurological function.

Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: The role of folic acid and Vitamin B12 in genomic stability of human cells
Source Title 2: The Role of the Status of Selected Micronutrients in Shaping the Immune Function
Source Title 3: Optimal Nutritional Status for a Well-Functioning Immune System Is an Important Factor to Protect against Viral Infections.
Source Content 4:
Source Title 4:
Source Content 5:
Source Title 5:

Ingredient 6: Folate

Description: (as I-methlyltetrahy drofolate)
Page: folate
Dose: 400 mcg. DFE
Type: Vitamin
Immunity Benefit:

Needed to make DNA and RNA, the genetic material that dictates cell functions. Deficiency of the vitamin could hamper immunity.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title: Folate + B6, B12
Synergy Content:

They act like buddies, working synergistically to reduce levels of homocysteine, an amino acid, in the body. Lower homocysteine may reduce the risk of heart disease and stroke. The trio of B vitamins also helps maintain brain health and proper neurological function.

Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: Folate status and the immune system
Source Title 2: Blood folate status and expression of proteins involved in immune function, inflammation, and coagulation: biochemical and proteomic changes in the plasma of humans in response to long-term synthetic folic acid supplementation.
Source Content 3:
Source Title 3:
Source Content 4:
Source Title 4:
Source Content 5:
Source Title 5:

Ingredient 7: Zinc

Description: (from zinc aspartate)
Page: zinc
Dose: 15 mg.
Type: Mineral
Immunity Benefit:

Plays a central role in the immune system, and zinc-deficient persons experience increased susceptibility to a variety of pathogens. Zinc is crucial for normal development and function of immune cells.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title:
Synergy Content:
Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: Zinc in Human Health: Effect of Zinc on Immune Cells
Source Title 2: Zinc and immune function: the biological basis of altered resistance to infection
Source Title 3: Zinc supplementation decreases incidence of infections in the elderly: effect of zinc on generation of cytokines and oxidative stress.
Source Content 4:
Source Title 4:
Source Content 5:
Source Title 5:

Ingredient 8: Selenium

Description: (from sodium selenate)
Page: selenium
Dose: 70 mg.
Type: Mineral
Immunity Benefit:

Plays an important role in the health of our immune system. This potent antioxidant helps lower oxidative stress in your body, which reduces inflammation and enhances immunity. Studies have demonstrated that increased blood levels of selenium are associated with enhanced immune response.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title: Selenium + Vitamin E
Synergy Content:

Vitamin E and Selenium work in synergy to protect cells from free radical damage. Selenium exerts its anti-oxidant effect within the cell itself, while Vitamin E works in the cell membranes which enclose the cell. An excess of one of these nutrients will help to counteract a deficiency of the other.

Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: The influence of selenium on immune responses.
Source Title 2: The role of selenium in inflammation and immunity: from molecular mechanisms to therapeutic opportunities.
Source Content 3:
Source Title 3:
Source Content 4:
Source Title 4:
Source Content 5:
Source Title 5:

Ingredient 9: Copper

Description: (from cupric oxide)
Page: copper
Dose: 1 mg.
Type: Mineral
Immunity Benefit:

An essential trace mineral necessary for survival. It is found in all body tissues and plays a role in making red blood cells and maintaining nerve cells and the immune system.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title: Copper + Vitamin D, B12
Synergy Content:

Both enhance the retention of copper.

Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: Copper and immunity
Source Title 2: The Immune Response in Copper Deficiency
Source Content 3:
Source Title 3:
Source Content 4:
Source Title 4:
Source Content 5:
Source Title 5:

Ingredient 10: Echinacea

Description: (extract)
Page: echinacea
Dose: Proprietary Immunoblend 1,000 mg.
Type: Herb
Immunity Benefit:

Echinacea is an herb from the flowering plant Asteraceae. It contains a complex mix of active substances believed to be antimicrobial and have an effect on the human immune system.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title:
Synergy Content:
Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: Immunomodulators Inspired by Nature: A Review on Curcumin and Echinacea
Source Title 2: Studies on phytochemical, antioxidant, anti-inflammatory, hypoglycaemic and antiproliferative activities of Echinacea purpurea and Echinacea angustifolia extracts.
Source Title 3: Echinacea increases arginase activity and has anti-inflammatory properties in RAW 264.7 macrophage cells, indicative of alternative macrophage activation.
Source Content 4:
Source Title 4:
Source Content 5:
Source Title 5:

Ingredient 11: Quercetin

Description:
Page: quercetin
Dose: Proprietary Immunoblend 1,000 mg.
Type: Herb
Immunity Benefit:

Is a plant flavonol with antioxidant properties. Well known for its activity in radical scavenging and anti-allergic properties characterized by stimulation of the immune system.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title: Quercetin + Vitamin E
Synergy Content:

Vitamin E enhances quercetin penetration through the blood–brain barrier (BBB), which leads to significant improvement in quercetin concentration and thus reduces the prevalence of oxidative damage in the brain.

Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: Quercetin and Its Anti-Allergic Immune Response
Source Title 2: Quercetin, Inflammation and Immunity
Source Content 3:
Source Title 3:
Source Content 4:
Source Title 4:
Source Content 5:
Source Title 5:

Ingredient 12: Turmeric

Description: (extract TurniPure Gold®)
Page: turmeric
Dose: Proprietary Immunoblend 1,000 mg.
Type: Herb
Immunity Benefit:

Research has shown that there is a significant antioxidant effect of curcumin. Both Provide natural ways to help support the immune system by increasing the immunomodulating capacity of the body.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title:
Synergy Content:
Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: "Spicing up" of the immune system by curcumin
Source Title 2: Immunomodulation by curcumin.
Source Content 3:
Source Title 3:
Source Content 4:
Source Title 4:
Source Content 5:
Source Title 5:

Ingredient 13: Elderberry

Description:
Page: elderberry
Dose: Proprietary Immunoblend 1,000 mg.
Type: Herb
Immunity Benefit:

The berries of the elderberry shrub are filled with antioxidants and vitamins that support your immune system and help tame inflammation.

Vitamin Background Image - Mobile:
Vitamin Background Image - Desktop:
Synergy Title:
Synergy Content:
Science Content:

We use nutrients backed by a significant body of research that is growing every day. Of the thousands of unaffiliated studies our in-house scientists sorted through to guide our choices, the titles below are the most relevant.

Source Title 1: Elderberry Supplementation Reduces Cold Duration and Symptoms in Air-Travellers: A Randomized, Double-Blind Placebo-Controlled Clinical Trial.
Source Title 2: Black elderberry (Sambucus nigra) supplementation effectively treats upper respiratory symptoms: A meta-analysis of randomized, controlled clinical trials.
Source Title 3: COVID-19: Is There Evidence for the Use of Herbal Medicines as Adjuvant Symptomatic Therapy?
Source Content 4:
Source Title 4:
Source Content 5:
Source Title 5:

Lists

ul (default)
  • One
  • Two
  • Three
  • Four
Numeric bullet ol (default)
  1. One
  2. Two
  3. Three
  4. Four
Child lists (to match the RTE styles)
  • One
  • Two
  • Three, with child list
    • First sub item
    • Second sub item
    • Third sub item, with child list
      • Third level item
      • Another third level item
  • Four

Responsive tables

Order Date Payment Status Fulfillment Status Total
#1001 December 22, 2021 Authorized Unfulfilled $43.03
#1002 December 23, 2021 Authorized Unfulfilled $44.03
#1003 December 24, 2020 Authorized Unfulfilled $45.03
#1004 December 25, 2020 Authorized Unfulfilled $46.03
#1005 December 26, 2020 Authorized Unfulfilled $47.03
#1006 December 27, 2020 Authorized Unfulfilled $48.03

Forms

We'll never share your email with anyone else.

Default form elements

Invisible labels

Add a class of label-hidden to a label to visually hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.

Note: The placeholder attribute only works in IE10+, so invisible labels are disabled in IE9 and below.


Vertical forms (customer, contact, etc)

No styles for this exist in Slate, but are used in most themes. Style elements inside a form/div with class `form-vertical` to see your styles here.

You cannot add a class directly to most liquid form elements (e.g. {% form 'contact' %}). Instead, wrap the form in a div with the class .form-vertical to achieve the same effect.

Checkboxes

Radios

Notes and form errors

No note styles exist in Slate but are commonly added to handle form errors. Example styles:

    .note {
      padding: 20px;
      border: 1px solid #ccc;
    }

    .note--success {
      border-color: green;
      background-color: lightgreen;
    }

    .note--error {
      border-color: red;
      background-color: lightred;
    }
  

Example usage:

    {% if form.posted_successfully? %}
      <p class="note note--success">Thanks for submitting the form</p>
    {% endif %}

    {% if form.errors %}
      <div class="note note--error">
        {{ form.errors | default_errors }}
      </div>
    {% endif %}
  
This is a standard note
This is a success message

This is an error message.

  • Bullets can offer more insight to the error

Miscellaneous elements

Horizontal Rules

There are no default hr styles in Slate, but these are common ones to add.

Default hr


Invisible hr.hr--clear


Small hr.hr--small



SVG icons

Read more about using, creating, and editing SVG icons in Slate's documentation.

Payment icons

Social icons

General icons