Hope Academy

Website Styleguide
03. Elements
02. Color Palette

Website Brand Style Guide

This page will be used to set your type, create re-usable elements, and be a reference guide for the main styles on your website.

Enjoy!

↥
01 Typography

Heading One

Desktop: Gibson Medium / 48px (3.3333333333333335VW)/ 1.1 / -.2
Tablet: 48px (6Vw)/ 1.1 / -.2
mobile: 30px Equivalent / 1.15 / -.2

Heading Two

Desktop: Gibson Semi-bold / 30px(2.083333333333333vw) / 1.15 / .3
Tablet: 30px / 1.25 / .3
mobile: 21px / 1.2 / .3

Heading Three

Desktop: Gibson Semi-bold / 21px / 1 / .3
tablet: 21px / 1.3 / .3
mobile: 21px / 1.15 / .3

Heading Four

Desktop: Gibson Semi-bold / 16px / 1 / .4
Tablet: 16px / 1 / .4
Mobile: 16px / 1 / .4
Heading Five
Desktop: Covik Sans Mono Medium / 16px / 1 / .2
Tablet: 16px / 1 / .2
Mobile: 14px / 1 / .2
Heading Six
Desktop: Covik Sans Mono Medium / 14px / 1 / .5
Tablet: 14px / 1 / .5
Mobile: 14px / 1 / .5
Menu Text

I am a block of paragraph text! 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.

I am a block of paragraph text! 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.

Desktop: Gibson Light / 21px / 1.43 / .2
Tablet: 21px / 1.43 / .2
Mobile: 16px / 1.45 / .1

H1 multiline dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

I am a block of paragraph text! 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.

H2 multiline dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

I am a block of paragraph text! 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.

H3 multiline dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

I am a block of paragraph text! 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.

02 color palette
Accent Green
#ACEC72
Dark Green
#87C54E
Lightx2 Green
#E3F1E8
Light Green Grey
#F5F7F6
Dark
#292929
Dark Bark
‍#2f3727
Bark
‍#8A8C83
Black
‍#8A8C83
03 basic elements
This is the default text value for a symbol field
This is the default text value for a symbol field
Our Staff