Colors

Hex Values

$orange
#e47425

$orange-dk
#a55923

$off-white
#f6eee5

$tan-lt
#e8ddcf

$tan
#cebca6

$tan-dk
#857667

$off-black
#383635

$black
#000000

$white
#ffffff

$red
#d03b3b

$text
#484746

Classes

default Paragraph Text

.tan-dk Paragraph Text

.orange Paragraph Text

.orange-dk Paragraph Text

.white Paragraph Text

.off-white Paragraph Text

.tan-lt Paragraph Text

.tan Paragraph Text

Background Styles

.bg--orange

.bg--orangeFancy

.bg--white

.bg--whiteFancy

.bg--landscape

Font Styles

Heading Style

Achieve these styles by using: 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.intro
Introduction Paragraph Text. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.

p.story

Add class "story" to style the first letter.

p.big

Big Paragraph Text. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.

p.small

Small Paragraph Text. 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

Paragraph text 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 a

This text is a hyperlink

p a.link--secondary

This text is a hyperlink with class .link--secondary

mark

This text is highlighted.

blockquote

"Blockquote suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio."
Blockquote Footer, Author

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 List.
This is an Ordered List.
1. This is a nested Ordered List.
2. This is a nested Ordered List.
This is an Ordered List.
This is an Ordered List.
This is an Ordered List.

Logos

Horizontal Logo

Stacked Logo

Form Elements

First Name*

<div class="placeholderLabel">
	<input type="text" name="your-firstName" value="">
	<label for="your-firstName">First Name*</label>
</div>

Type of Business*

I have ordered with Neomonde Bakery before.

Buttons & Styled Links

a.button

This is a button ››

p.line--left a

What can we help you find?

Style Guide