Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor.
Style Guide
Colors
Hex Values
#000
#111
#606161
#9E9E9E
#CBCAC5
#E7E7DC
#fff
#243363
#5CC5C1
#57926B
#81C780
#F2BD55
#F3702E
#B43025
#EC8849
#3D3B3B
#F2EDDC
Classes
default
Paragraph Text
.black
Paragraph Text
.gray-dk
Paragraph Text
.gray
Paragraph Text
.gray-med
Paragraph Text
.gray-lt
Paragraph Text
.off-white
Paragraph Text
.white
Paragraph Text
.aqua
Paragraph Text
.green
Paragraph Text
.green-lt
Paragraph Text
.yellow
Paragraph Text
.orange
Paragraph Text
.red
Paragraph Text
.og-orange
Paragraph Text
.og-black
Paragraph Text
.og-white
Paragraph Text
Background Textures
.bg--off-white
.bg--white
.bg--pattern
Font Styles
h1 or p.h1
Subheading Style
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.
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.
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.
.uppercase
To change the type to all uppercase, use the class .mono
.subheading
The default Subheading Style
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 (for Dark Backgrounds)
Primary Logo (for Light Backgrounds)
Monogram
Kitchen & Brewing

Electric Owl Society
Form Elements
Subheading
Block Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor.