Visual elements

Logos

The logo

Use the full colour logo wherever possible

full colour, light background

white, dark background

The mark

Should be used when an icon or avatar is required. Use the full logo in all other cases

Clear space

The logo must always be surround by clear space. The minimum spacing is equivalent to the height of the heart on all 4 sides.

Colours

Primary colours

Green
100%
#39b54a
75%
#6AC777
50%
#9CDAA4
25%
#cfedd4
10%
#68c876
5%
#F7FFF9
Dark
#2b973f
Grey
100%
#706f6f
75%
#939393
50%
#B7B7B7
25%
#DBDBDB
10%
#F0F0F0
5%
#F5F5F5
Dark
#454545

Complimentary colours

Yellow
100%
#FFC805
75%
#ffd643
50%
#FFE382
25%
#FFF1C0
10%
#FFFAE6
5%
#FFFCF3
DARK
#842c0a
Ruby
100%
#d8338b
75%
#e266a8
50%
#eb99c5
25%
#f5cce2
10%
#fbebf3
5%
#fdf5f9
DARK
#930741
Blue
100%
#0085F0
75%
#40A3F4
50%
#80C2F7
25%
#BFE0FB
10%
#E6F3FE
5%
#F2F9FE
DARK
#0055E5
LAVENDER
100%
#646fff
75%
#8b93ff
50%
#b1b7ff
25%
#d8dbff
10%
#eff1ff
5%
#f7f8ff
DARK
#241880

Typography

Evergreen Life uses two typefaces, Co Headline for headings, and Open Sans. The typeface is used at various weights, primarily Regular (400) and Semibold (600). To ensure optimum legibility, it’s best to avoid Light (300) or lighter weights.

A a
A a

Headings

Co Headline is used for H1 - H3, Open Sans is used thereafter. All headings have a letter spacing of .35px, and a line height of 140%.

People powered health.

H1

48px

30px

People powered health.

H2

36px

24px

People powered health.

H3

30px

21px

People powered health.

H4

24px

18px

People powered health.

H5

18px

14px

Content

Paragraphs are all set in Open Sans regular (400).

Bring all your health information and GP records together in one place. Book GP appointments, order NHS prescriptions and get insights on how to be as happy and healthy as possible with the Evergreen Life app.

Regular

18px

14px

Bring all your health information and GP records together in one place. Book GP appointments, order NHS prescriptions and get insights on how to be as happy and healthy as possible with the Evergreen Life app.

Small

16px

12px

Bring all your health information and GP records together in one place. Book GP appointments, order NHS prescriptions and get insights on how to be as happy and healthy as possible with the Evergreen Life app.

Caption

12px

10px

Bring all your health information and GP records together in one place.

Overline

12px

12px

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>

Components

Alerts

An alert displays a prominent message which cannot be ignored.
Warning or alert text goes here

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--

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">

Downloadable Files

Download PDF image

Copied!

Evergreen Life heart logo white
This style guide performs best when used with a larger screen such as a desktop or laptop.