Chargeback Gurus Style Guide

The following should be used as a guideline for display and usage of logos, colors and brand styles. This guide is subject to change and should be referenced for design initiatives. Additions, changes, or modifications should be submitted to marketing for written approval before use.

Logo
Colors
Typography
Buttons
Forms
Icons

Logo

Download Logo Files

Colors

Light Blue Tint

#ecf3fa

Vibrant Blue

#22a8f2

Blue

#21558f

Dark Blue

#0e3f68

Grey Blue

#5e85b1

Light Blue

#9FC5E8

Grey

#595959

Dark Grey

#353535

Teel (use as an accent or highlight color)

#7ecdc3

Orange (use only sparingly if necessary)

#da7429

Green (use sparingly)

#B1c03e

Typography

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Display-1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

Display-2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

Display-3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

Display-4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

H1 - Prefacing Title - Lorem ipsum dolor sit amet

H2 - Title - Header - Lorem ipsum dolor sit amet, consectetur adipisicing elit

H3 - Subtitle - Secondary Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit

H4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

H5 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

H6 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

body - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

p - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

li - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
li - Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis.
li - Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

li - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
li - Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis.
li - Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

p.small - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

p.large - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

p.blog - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

“Blockquote - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.”

This is a link lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien magna. Morbi ac arcu eu tortor condimentum pellentesque.