Promo code SPRING2022 will be automatically applied at checkout!

Nutrisense Library Style Guide

Version 1.2
Typography
HTML Headings
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6
Heading Classes
heading-xxlarge

heading-xxlarge

heading-xlarge

heading-xlarge

heading-large

heading-large

heading-medium

heading-medium

heading-small

heading-small

heading-xsmall

heading-xsmall

Other HTML Tags
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
All Links
All Block Quotes
Block Quote
All Unordered Lists
  • No bullet list

  • No bullet list

All Unordered Lists
  • No bullet list

  • No bullet list

All Ordered Lists
  1. No bullet list

  2. No bullet list

  3. No bullet list

Text Sizes
text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Weights
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Text Letter Spacings
text-letterspacing-xwide
A Lorem ipsum dolor sit amet
text-letterspacing-wide
A Lorem ipsum dolor sit amet
text-letterspacing-normal
A Lorem ipsum dolor sit amet
text-letterspacing-tight
A Lorem ipsum dolor sit amet
text-letterspacing-xtight
A Lorem ipsum dolor sit amet
Text Line Heights
text-lineheight-xtall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-tall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-short
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-xshort
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text Styles
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-3lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-muted
text-style-muted
Text Alignment
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich Text
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
Colors
Color Samples
Used to create color swatches
Black
White
Light Grey
Click and paste Color Palette
green100
green900
blue100
Background Color
background-color-black
background-color-white
background-color-lightgrey
Click and paste Color Palette
background-color-graywarm100
Text Colors
text-color-black
text-color-black
text-color-white
text-color-white
Click and paste Color Palette
text-color-green
UI Elements
Buttons
button
button-green
button
is-button-yellow
button
is-button-small
button-secondary
button-secondary
is-button-small
button-link
Button Components
To use on a dark background, simple use the add-on class is-alternate
button
is-alternate
button
is-button-small
is-alternate
button-secondary
is-alternate
button-secondary
is-button-small
is-alternate
button-link
is-alternate
Buttons With Icons
button
with-icon
button
with-icon
is-button-yellow
button
is-button-small
with-icon
button-secondary
with-icon
button-secondary
is-button-small
with-icon
button-link
with-icon
Form Elements
field-label
form-input
field-label
form-input
is-text-area
field-label
form-input
is-select-input
form-checkbox
form-checkbox-icon
form-checkbox-label
form-radio
form-radio-icon
form-radio-label
button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons (Image)

icon-xxsmall

icon-xsmall

icon-small

icon-medium

icon-large

icon-xlarge

icon-custom

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-custom

Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom

Images

image-wrapper-1:1

image-wrapper-4:3

image-wrapper-3:2

image-wrapper-16:9

Components
#joinnutrisense
Find the right Nutrisense program    to help you discover and reach your health potential.
Find out how Nutrisense can help you reach your wellness goals.
Find out how Nutrisense can help you reach your wellness goals.
#joinnutrisense
Explore our member stories.
Nutrisense: A Better Levels Alternative.
Curious about CGMs?
See how probiotics can complement your personalized wellness plan by working one-on-one with a qualified Nutrisense nutritionist.
products available in nutrisense.io
Curious about CGMs?

Discover how CGMs can support your wellness journey by helping you spot patterns and trends in your glucose responses to food, stress, exercise, sleep, and more.

See glucose experiments in action!

Sign up to our newsletter to get food experiments, nutritionist-recommended articles, tips and much more in your inbox every week.

The first self-guided, in-app learning program. It provides additional tools and support to help you learn more about continuous glucose monitoring and how to use it to support your health journey.

In-app course:
In-Range

products available in nutrisense.io
Explore More About CGMs

With a CGM, you can spot patterns and trends by observing real-time glucose responses to food, stress, exercise, sleeping habits, and other daily activities.

products available in nutrisense.io
Start Your Wellness Journey with a CGM

A CGM, or continuous glucose monitor, is a small, minimally-invasive device that sits on your arm and tracks your glucose levels continuously and in real-time.

Related Article
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Break Your
Weight Loss Barrier

Download our FREE guide to find out:

  • Reasons you’re not losing weight
  • The role of blood glucose on weight loss
  • Why you need a personalized approach
  • Helpful tips from expert dietitians
weight loss ebook
FREE Weight Loss Guide!

What’s in this guide:

  • What is a weight loss plateau?
  • Why do I need a personalized approach?
  • + Member success stories and dietitian tips!
weight loss ebook
Grab your FREE Guide!

What is a weight loss plateau? Can anyone hit one? And what can you do about it?

Download this guide to find out!

weight loss ebook
Download Our Nutritionist Approved Happy Habits Tracker!
Nutrisense Monthly Habit tracker
Download our Prediabetes Grocery List Here
Ingredients
  • Store-bought ingredients:
    canola oil, soybean oil, extra virgin olive oil, water, balsamic vinegar, distilled vinegar, sugar, salt, garlic, spice, onion, red bell pepper, xanthan gum, paprika (for color).
  • Homemade ingredients:
    extra virgin olive oil, balsamic vinegar, honey, sea salt, black pepper, garlic, dijon mustard.

Linda Simmons

A lot of people talk about the health and wellness journey but rarely live it.

I’ve been lucky enough to live it with the help of Nutrisense. It’s such an incredible service and I wouldn’t trade it for anything!

Jan 4, 2023

Linda Simmons

A lot of people talk about the health and wellness journey but rarely live it.

I’ve been lucky enough to live it with the help of Nutrisense. It’s such an incredible service and I wouldn’t trade it for anything!

Jan 4, 2023
Containers New
container-new
container-new
2-col
container-new
4-col
container-new
6-col
container-new
8-col
container-new
10-col
container-new
12-col
Wrappers New
max-width-1col
max-width-2col
max-width-3col
max-width-4col
max-width-5col
max-width-6col
max-width-7col
max-width-8col
max-width-9col
max-width-10col
max-width-11col
Spacer Components (8 px grid) Already in REMs
Spacer 4px
Spacer 8px
Spacer 16px/L12px
Spacer 24px/L20px
Spacer 32px/L24px
Spacer 48px/T40px/L32px
Spacer 64px/T56px/L40px
Spacer 80px/T72px/L48px
Spacer 96px/T80px/L56px
Spacer 112px/T96px/L64px
Spacer 160px/T120px/L80px
Section Paddings (Vertical)
padding-section-d32-m24
padding-section-d48-t40-m32
padding-section-d64-t56-m40
padding-section-d80-t72-m48
padding-section-d96-t80-m56
padding-section-d112-t96-m64
padding-section-d160-t120-m80
Sections
Social Proof (some components do not include the entire section)

Success stories with our members

Stuart Tutler

Stuart Tutler

I think the Nutrisense CGM program is a great value for what you're getting. Especially since you can also talk to a dietitian while using the service.

Oct 29, 2022
Linda Simmons

Linda Simmons

A lot of people talk about the health and wellness journey but rarely live it.

I’ve been lucky enough to live it with the help of Nutrisense. It’s such an incredible service and I wouldn’t trade it for anything!

Feb 16, 2023
Meredith Standridge

Meredith Standridge

I knew I wanted to keep using the CGM because when I didn’t have it, I missed it! . . . the 12 months is like a yearly gym membership.

Jan 4, 2023
Jennifer B.

Jennifer B.

Amazing work team Nutrisense. I’ve had so much success in just the past month alone lowering my glucose spikes and generally just feeling better.

Oct 4, 2022
Amanda Seitz

Amanda Seitz

Just knowing that I had real-time access to witness my blood glucose response would give me the willpower to resist . . . It was fun and definitely helped keep me on track with my goals.

Jul 13, 2022
Sara Duffy

Sara Duffy

For me, the best part was having agency again over my health. Being able to visualize and see in real-time what my diet, lifestyle, and exercise habits were doing gave me such a sense of healthy control.

Jan 13, 2022
Additional Classes from latest style guide update (v1.2)
Text Letter Spacings
text-letterspacing-xwide
A Lorem ipsum dolor sit amet
text-letterspacing-wide
A Lorem ipsum dolor sit amet
text-letterspacing-normal
A Lorem ipsum dolor sit amet
text-letterspacing-tight
A Lorem ipsum dolor sit amet
text-letterspacing-xtight
A Lorem ipsum dolor sit amet
Text Line Heights
text-lineheight-xtall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-tall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-short
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-xshort
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-lineheight-none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Color Samples
Used to create color swatches
Click and paste Color Palette
Box Shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom

Weight Loss Guide
Free Guide

A Guide to Weight Loss Plateaus

Are you just starting on your weight loss journey? Have you started but hit a weight loss plateau? We're here to help.

Download the Guide