Logos

Download logos: PNGSVG

Typography

A a
A a

Headings

The five boxing wizards jump quickly.

Hero • 52px ; 20px / 3.25em ; 1.3em • Co Headline • Bold

The five boxing wizards jump quickly.

This is a text block styled like a H1
H1 • 38px ; 22px / 2.375em ; 1.4em • Co Headline • Bold

The five boxing wizards jump quickly.

This is a text block styled like a H2
H2 • 36px ; 40px / 2.25em ; 1.4em • Co Headline • Bold

The five boxing wizards jump quickly.

This is a text block styled like a H3
H3 • 32px ; 36px / 2em ; 1.4em • Co Headline • Bold

The five boxing wizards jump quickly.

H3 --secondary • 24px ; 32px / 1.5em ; 1.4em • Open Sans • Semi bold

The five boxing wizards jump quickly.

This is a text block styled like a H4
H4 • 24px ; 32px / 1.5em ; 1.4em • Co Headline • Regular

The five boxing wizards jump quickly.

H4 --secondary • 20px ; 24 px / 1.125em ; 1.4em • Open Sans • Semi bold
The five boxing wizards jump quickly.
This is a text block styled like a H5
H5 • 18px ; 24px / 1.125em ; 1.4em • Open Sans • Semi bold
The five boxing wizards jump quickly.
This is a text block styled like a H6
H6 • 12px ; 18px / 0.75em ; 1.4em • Open Sans • Semi bold

Subheadings & 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.

Subheading • 18px/1.125em ; 1.6em • Open Sans

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.

Paragraph • 16px/1em ; 1.75em - • Open Sans

Block Quotes

"Three things in life – your health, your mission, and the people you love." -Naval Ravikant

Lists

Unordered lists

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ordered lists

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Add this code to style a numbered list:
<style>
 /* This removes all list styling, including numbers */
 .rich-text ol {
   list-style-type: none;
   position: relative;
 }

/* This forces the step counter below to start incrementing */
 .rich-text ol li {
   counter-increment: step-counter;
 }

/* This adds a step counter before each list item in a numbered list and styling */
 .rich-text ol li::before {
   content: counter(step-counter);
   position: absolute;
   left: 0;
   width: 24px;
   height: 24px;
   font-size: 14px;
   color: white;
   font-weight: 500;
   background-color: #39b54a;
   border-radius: 99px;
   text-align: center;
   line-height: 24px;
 }
</style>

Others

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Caption • 12px/0.75em ; 1.4 • Open Sans
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Caption-2 • 12px/0.75em ; 1.4 • Open Sans • Capitalise
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pre-heading • 12px/0.75em ; 1.4 • Open Sans • Semi bold • Capitalise

Colours

Primary colour - Evergreen Green

Each colour shade is a variation of opacity on a white background. Green is our primary colour, used against a white background.
--green
#39B54A
--green075
#6BC878
--green050
#9CDAA4
--green025
#CDECD2
--green010
#EBF7EC
--green-dark
#1C5A24
--green-pressed
#54925C

Secondary colour - Evergreen Yellow

Aside from its complementary use alongside Evergreen Green, our yellow is used to aid reading logical decisions, such in .b-tent button style.
--yellow
#FFC805
--yellow075
#FFD644
--yellow050
#FFE382
--yellow025
#FFF1C0
--yellow010
#FFF9E6
--yellow-dark
#8A6C00

Evergreen Grey

These shades are used primarily for text (--dark or --grey) and for for .b-light button style. --dark is used instead of full black, as we avoid using full black (#000000) on our designs.
--grey
#706F6F
--grey075
#939393
--grey050
#B7B7B7
--grey025
#DBDBDB
--grey010
#F0F0F0
--grey005
#F5F5F5
--dark
#454545

Alert colour - Evergreen Ruby

Ruby should only be used when a destructive option is available or to highlight an alert, such as web banners.
--ruby
#D8338B
--ruby075
#E474B1
--ruby050
#ECA4CB
--ruby025
#F5D3E5
--ruby010
#FAE9F3

Alerts

An alert displays a prominent message which cannot be ignored.
Warning or alert text goes here
.warning-banner
.warning-banner__icon
.warning-banner__text

Badges & tags

Badges

Badges are are not clickable and are used to draw attention and give status to something.
1
Danger!
Warning!
Success!
.text-badge
.fill--

Tags

Tags are compact elements that represent an attribute, or action. These are clickable.
We use them in our blog to show which category our articles belong, and the link out to that category.
Health Records
GP Services
Fitness
DNA
Happiness
Food
.category-tag
.fill--

Buttons & links

Default button

Button • 18px • Open Sans • Padding: 8px 16px 8px 16px
Button--licon
.button
.button__text
.button__ricon--icon2
Button--licon
.button
.button__text
.button__licon--icon2
Button states
Active
.button
Hover
.button:hover
Pressed
.button:pressed
Disabled
.button:disabled
.button__text:disabled
Selected
.button:selected
.button__text:selected

Secondary styles

b-light

b-light should be used when a default button has low contrast with the background.
Button Text
.b-light
Button--licon
.b-light
.b-light__text
.button__ricon--icon2
Button--licon
.button
.button__text
.button__licon--icon2
Button states
Active
.b-light
Hover
.b-light:hover
Pressed
.b-light:pressed

.b-light variations

b-light variations should inherit styles from parent styles.
b-light--border can be used alongside a default button to show emphasis.
Button Text
.b-light--border

b-discreet

Button Text
.b-discreet
Button--licon
.button
.button__ricon--icon2
Button--licon
.button
.button__licon--icon2
Button states
Active
.b-discreet
Hover
.b-discreet:hover
Pressed
.b-discreet:pressed

Sizing variations

All sizing variations modify font size, weight and padding as well as inheriting states from their parent style. Use as a combo class after definiting button style first.

X-Small button

14px • Open Sans • Padding: 0px 16px 0px 16px
Button Text
.b-discreet .button--XS
Button--licon
.b-discreet .button--XS
.button__text
.button__ricon--icon1
Button--licon
.b-discreet .button--XS
.button__text
.button__licon--icon1

Small button

14px • Open Sans • Padding: 8px 16px 8px 16px
Button Text
.button .button--S
Button--licon
.button  .button--S
.button__text
.button__ricon--icon1
Button--licon
.button  .button--S
.button__text
.button__licon--icon1

Large button

18px • Open Sans • Semi Bold • Padding: 8px 24px 8px 24px
Button Text
.button .button--L
Button--licon
.button .button--L
.button__text
.button__ricon--icon3
Button--licon
.button .button--L
.button__text
.button__licon--icon3

X-Large button

18px • Open Sans • Semi Bold • Padding: 12px 24px 12px 24px
Button Text
.button .button--XL
Button--licon
.button .button--XL
.button__text
.button__ricon--icon3
Button--licon
.button .button--XL
.button__text
.button__licon--icon3
This is an example of a Text link
All links • 16px • Open Sans

Forms and Inputs

If this is not the e-mail address associated with your Evergreen Life account, please include it within your message.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Add this code to style checkboxes and radio buttons
<style>
/* === CUSTOM CHECKBOX CSS === */
/* On mouse-over, add a style */
.checkbox-field:hover input ~ .checkmark {
border: 2px solid #39b54a;
}
/* When the checkbox is checked, add a background */
.checkbox-field input:checked ~ .checkmark {
 border: 0px;
 background: #6BC878 url(https://assets.website-files.com/5b34f90b0c38d5623f58ee1f/5c644b7cd11115d9ef169986_check-action1.svg) no-repeat center;;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}
/* Show the checkmark when checked */
.checkbox-field input:checked ~ .checkmark:after {
 display: block;
}
/* === CUSTOM RADIO BUTTON CSS === *//* On mouse-over, add a style */
.radio-field:hover input ~ .radiomark {
border: 2px solid #39b54a;
}
/* When the checkbox is checked, add a background */
.radio-field input:checked ~ .radiomark {
 border: 0px;
 background: #6BC878;
}
/* Create the checkmark/indicator (hidden when not checked) */
.radiomark:after {
 content: "";
 position: absolute;
 display: none;
}
/* Show the checkmark when checked */
.radio-field input:checked ~ .radiomark:after {
 display: block;
}
/* Style the indicator (dot/circle) */
.radio-field .radiomark:after {
 top: 8px;
 left: 8px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #ffffff;
}
</style>

Other scripts that could be helpful

Disallow robots from indexing this page

Add this code to a page you do NOT wish it to appear on search engines:
<meta name="robots" content="noindex">
This style guide performs best when used with a larger screen such as a desktop or laptop.