Web Style Guide
Colors
Hex Values
#e94d13
#f26122
#f6822c
#fe824d
#687d90
#82a0bb
#fff
#ededed
#e0e0e0
#b9b4b7
#444
#222
#000
#de4444
Classes
default
Paragraph Text
.orange-dk
Paragraph Text
.orange
Paragraph Text
.orange-lt
Paragraph Text
.orange-dull
Paragraph Text
.blue
Paragraph Text
.blue-lt
Paragraph Text
.white
Paragraph Text
.gray-lt
Paragraph Text
.gray-lt-2
Paragraph Text
.gray
Paragraph Text
.gray-dk
Paragraph Text
.off-black
Paragraph Text
.black
Paragraph Text
.red
Paragraph Text
Background Textures
.bg--gray
.bg--orange
Font Styles
h1, .h1, or span.h1
H1 Heading Styles.
H2 Heading Styles.
H3 Heading Styles.
H4 Heading Styles.
H5 Heading Styles.
H6 Heading Styles.
Body Styles
p
This is the default size and styling for paragraph body copy throughout the site. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue.
p.big
This text is larger paragraph text, good for the introductory paragraph of longer content.
p.small
This text is small paragraph text.
p.smaller
This text is an even smaller paragraph text.
p.heading
To change the font from Overpass to Chakra, use the class .heading
p a
This text is a hyperlink using the a element.
mark
This text is highlighted using the mark element.
blockquote
"Blockquote suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio."
Lists
This is an Unordered List.
- This is an Unordered List.
- This is a nested Unordered List.
- This is a nested Unordered List.
- This is an Unordered List.
- This is an Unordered List.
- This is an Unordered List.
This is an Ordered & Unordered List.
- This is an Unordered List.
- This is a nested Ordered List.
- This is a nested Ordered List.
- This is an Ordered List.
- This is an Ordered List.
- This is an Ordered List.
This is an Ordered List.
- This is an Ordered List.
- This is a nested Ordered List.
- This is a nested Ordered List.
- This is an Ordered List.
- This is an Ordered List.
- This is an Ordered List.
Logos
Primary Logo



Favicon



Trade Logo



Trade+



Payments Logo



Badges Logo



Offer Logo



API Logo



Wobbly Bird
Form Elements
Two Column Layout
Text & Photo (on Right)
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia.
Text & Photo (on Left)
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia.
Two Text Columns
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia.
Two Text Columns
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia.
Multi Columns
Centered Multi Columns
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.
Centered Multi Columns
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.
Centered Multi Columns
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.
Centered Multi Columns
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.
Left Align Multi Columns + Icon
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.
Left Align Multi Columns + Icon
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.
Left Align Multi Columns + Icon
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.
Left Align Multi Columns + Icon
Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.
Single Testimonial
"Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus."
Multiple Testimonials
Logo Grid
Key Features / Use Cases
Key Feature Title 01
Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor.
Key Feature Title 02
Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque.
Key Feature Title with Bullets
Quisque eget odio ac lectus vestibulum faucibus eget in metus.
Curabitur vulputate, ligula lacinia scelerisque.
Nulla at nulla justo, eget luctus tortor.
Employees








Mrs. Wobbly Bird
Chief Wobbler
Wobble baby, wobble baby, wobble baby, wobble. Wobble baby, wobble baby, wobble baby, wobble. Wobble baby, wobble baby, wobble baby, wobble. Wobble baby, wobble baby, wobble baby, wobble.
Drives a 1980 UFO








Mr. Wobbly Bird
Founder of Wobbling
Wobble baby, wobble baby, wobble baby, wobble. Wobble baby, wobble baby, wobble baby, wobble. Wobble baby, wobble baby, wobble baby, wobble. Wobble baby, wobble baby, wobble baby, wobble.
Drives a Preowned 1985 UFO