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.
Paragraph • 18px ; 160% • 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 small • 16px ; 160% • 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
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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.
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
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.