Style guide page introduction

The style guide includes all elements, symbols and classes that are used throughout the website. Creating a central location to make design changes which will take effect across the entire website.

Container

1240px - 50px margin on mobile & tablet

Typography

H1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Font-family:
Font-size:
Color:
Letter spacing: 
Line height: 

H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Font-family:
Font-size:
Color:
Letter spacing: 
Line height: 

H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Font-family:
Font-size:
Color:
Letter spacing: 
Line height: 

H4

We are empowered real people who are passionate about learning throughout all stages of life. We share empowering stories, learning opportunities for older adults, and key insights on aging so our community can use new knowledge to live healthier and happier lives.

Font-family:
Font-size:
Color:
Letter spacing: 
Line height: 
H5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Font-family:
Font-size:
Color:
Letter spacing: 
Line height: 
H6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Font-family:
Font-size:
Color:
Letter spacing: 
Line height: 
p

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.

Font-family:
Font-size:
Color:
Letter spacing: 
Line height: 
P 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.

Font-family:
Font-size:
Color:
Letter spacing: 
Line height: 
Font-family:
Font-size:
Color:
Letter spacing: 
Line height: 

Color Palette

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.

Primary
#181B56
Black
#000000
Text
#4A4A68
Border
#E2CDA8
Dark grey
#FF4600
Background
#F9F5EF
Warm grey
#E2DFD4
Border Colour
#C8C8C8
Silver
#D9DBDDCSS

Hover Colors

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.

Hover one

Hover two
Hover Three

Buttons

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.

BTN
BTN-underline
BTN-no-underline
BTN-red
BTN-cream
BTN-cream
See More...