Style Guide

Gotion

Colors

$brand-primary #1D2528
$brand-secondary #E65621
$brand-tertiary #01B0F0
$body1 #11D368
$body2 #474646
$body3 #EFF8FD

Typography

Aa Zz

Europa, Bold

Aa Zz

Europa, Regular

H1 header

(>1025px) 4.5em/1em, (1024-768px) 3.75em/1em, (<767px) 1.875em/1em

H2 header

(>1025px) 2.25em/1em, (1024-768px) 1.875em/1em, (<767px) 1.5em/1.25em

H3 header

(>1025px) 1.875em/1em, (1024-768px) 1.5em/1.25em, (<767px) 1.313em/1.333em

H4 header

(>1025px) 1.5em/1em, (1024-768px) 1.313em/1.333em, (<767px) 1.125em/1.333em
H5 header
(>1025px) 1.313em/1.333em, (1024-768px) 1.313em/1.333em, (<767px) 1.125em/1.333em
H6 header
(>1025px) 1.125em/1.333em, (1024-768px) 1.125em/1.333em, (<767px) 1.125em/1.333em

Lead Body

(>1025px) 1.313em/1.429em, (1024-768px) 1.313em/1.429em, (<767px) 1.125em/1.333em

Body

16px/1.5em
Bullet List (unordered)
  • List item goes here
  • Another list item goes here that wraps to two lines lorem ipsum dolor sit amet
  • List item goes here
  • Another list item goes here
  • List item goes here
  • Another list item goes here
Bullet List (ordered)
  1. List item goes here
  2. Another list item goes here that wraps to two lines lorem ipsum dolor sit amet
  3. List item goes here
  4. Another list item goes here
  5. List item goes here
  6. Another list item goes here
Block Quote Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui. Sed sodales pharetra nulla, in aliquet tellus. Morbi ultricies risus quam, et dignissim ipsum mattis id. Vivamus vestibulum nibh fermentum mauris aliquet, vitae tincidunt ante pellentesque. Integer malesuada posuere sagittis.

Cras non lacinia augue. Quisque mauris arcu, facilisis luctus nibh sed, dapibus suscipit diam. Nam at ante semper, mattis quam ac, congue est. Nulla at nibh a nisl consequat suscipit quis id neque. Nunc interdum ipsum dolorat ante semper. - John Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui. Sed sodales pharetra nulla, in aliquet tellus. Morbi ultricies risus quam, et dignissim ipsum mattis id.

Forms

Please provide a valid email address
Select Dropdown
  • 1
  • 2
  • 3
  • 4

Tables

Column 1 Title Column 2 Title Column 3 Title
Item 1 Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit
Item 2 Item 2 Mauris semper, eros eget interdum finibus
Item 3 Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit
Item 4 Item 4 Mauris semper, eros eget interdum finibus
Item 5 Item 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit
Item 6 Item 6 Mauris semper, eros eget interdum finibus

Icons

.icon-facebook-circle .icon-facebook
.icon-twitter-circle .icon-twitter
.icon-linkedin-circle .icon-linkedin
.icon-google-plus-circle .icon-google-plus
.icon-youtube-circle .icon-youtube
.icon-plus-circle .icon-plus
.icon-minus-circle .icon-minus
.icon-check-circle .icon-check
.icon-close-circle .icon-close
.icon-info .icon-info-circle
.icon-question-circle .icon-question
.icon-play-circle .icon-play
.icon-play
.icon-chevron-up
.icon-chevron-right
.icon-chevron-left
.icon-chevron-down
.icon-search
.icon-user
.icon-users