styleguide

TYPOGRAPHY

BEBAS NEUE

massive
PAGE BREAK headline

H1 JOHN

H1 Paul

H1 GEORGE

H1 RINGO

H1 WHITE

H2 JOHN

H2 PAUL

H2 GEORGE

H2 RINGO

H2 WHITE

H3 JOHN

H3 PAUL

H3 GEORGE

H3 RINGO

H3 WHITE

H4 JOHN

H4 PAUL

H4 GEORGE

H4 RINGO

H4 WHITE

H5 JOHN
H5 PAUL
H5 GEORGE
H5 RINGO
H5 WHITE

H1 LEFT

H1 CENTER

H1 RIGHT

H1 LEFT

H1 CENTER

H1 RIGHT

H2 LEFT

H2 CENTER

H2 RIGHT

H2 LEFT

H2 CENTER

H2 RIGHT

H3 LEFT

H3 CENTER

H3 RIGHT

H3 LEFT

H3 CENTER

H3 RIGHT

H4 LEFT

H4 CENTER

H4 RIGHT

H4 LEFT

H4 CENTER

H4 RIGHT

H5 LEFT
H5 CENTER
H5 RIGHT
H4 LEFT
H4 CENTER
H4 RIGHT

HAUFE MERRIWEATHER SANS

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H1 Heading

H2 Heading

H3 Heading

H4 Heading

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

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

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. 

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. 

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. 

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. 

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. 

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. 

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. 

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. 

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. 

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. 

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. 

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. 

interactions

buttons

black btn
gray btn
turquoise btn
blue btn
black btn
gray btn
turquoise btn
blue btn
black btn
gray btn
turquoise btn
blue btn
white white btn
white gray btn
white turq btn
white blue btn

COLORS

primary (in use)

#005fff - r-blue
Basic Blue | Buttons | Headlines | BGs

#00d2d2 - r-turquoise
Basic Turquoise | Buttons | Headlines

#f7f9fc - r-gray-1
Menu BG
(=r-cool-gray-1)

#f4f6f9 - r-gray-2
Section BG

#e7eef6 - r-gray-ultrapale
p on colored blue/turq BG
(=r-cool-gray-2)

#bcd0e0 - r-gray-pale
p on gray-ultradark
(=r-cool-gray-4)

#7894a9 - r-gray-light
p light on r-gray-2-bg 
H Page Break | Divider

#536f85 - r-gray
p | H1-4
(=r-cool-gray-7)

#42525c - r-gray-dark
Big number, on r-gray-ultradark (approach)
(=r-cool-gray-8)

#262e33 - r-gray-ultradark
Section BG | Menu BG 
(=r-cool-gray-9)

secondary (not in use)

#00dbdb - r-turqoise-light
H Page Break | Divider-Light 

# r-turquoise-dark
Divider on gray

#00bec3 - r-turquoise-bg
Section BG

#c9fa46 - r-yellow

#9ef513 - r-green-yellow

#e60a95 - r-pink

#cb007b - r-pink-dark

#90f0f0 - r-turquoise-pale

#00e3e3 - r-turquoise-medium

#0029e7 - r-blue-dark

#d5e2ec - r-cool-gray-3

#98b1c1 - r-cool-gray-5

#7897ac - r-cool-gray-6