Style Guide

Typography

Primary Font

Aa Open Sans Condensed

Open Sans Condensed is your base font. Paragraphs and all basic text are in this font. If you need to assign this font, use the class .primaryFont.

Secondary Font

Sorts Mill Goudy

Sorts Mill Goudy is your secondary accent font. Header 1 and Headers 3 - 5 and other accents texts use this font. If you need to assign this font, use the class .secondaryFont.

Tertiary Font

Aa Shelby

Shelby is your tertiary accent font. Header 2 and other accents texts use this font. If you need to assign this font, use the class .tertiaryFont.

Headers

h1. This is a very large header.With a Subtitle

h2. This is a large header.

h3. This is a medium header.With Another Subtitle

h4. This is a moderate header.

h5. This is a small header.

h6. This is a tiny header.

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>

Paragraphs

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. You have several options for highlighting text. The <strong> tag makes text bolder. The <em> tag makes text italicized. You also have available the .underline class to underline your text as well as the .uppercase class to make your text uppercase.

<p>You have several options for highlighting text. The strong tag <strong>makes text bolder</strong>. The em tag <em>makes text italicized</em>. You also have available the .underline class to <span class="underline">underline your text</span> as well as the .uppercase class to <span class="uppercase">make your text uppercase.</span></p>

Links

The standard link colors are preset to the Primary and Secondary colors. This is an example of a link. If you'd like your link to have an arrow after it, add the class .more to it, like this: Learn More

<a href="">This is an example of a link</a>.
<a href="" class="more">Learn More</a>

Dividers

Use dividers to define breaks between paragraphs or sections.

<hr />

Unordered Lists, Ordered Lists and Description Lists

Use an unordered list to list things if the order of the items doesn't matter. Use an ordered list when creating a list where the order of the items is important, like ranking something from best to worst. Use a Description List to define terms.

Unordered List

List item number 1 that needs to be really long so we can see the spacing when it goes to another line
List item number 1
List item number 1

<ul>
   <li>List item number 1</li>
   <li>List item number 1</li>
   <li>List item number 1</li>
</ul>

Ordered List

List item number 1 that needs to be really long so we can see the spacing when it goes to another line
List item number 1
List item number 1

<ol>
   <li>List item number 1</li>
   <li>List item number 1</li>
   <li>List item number 1</li>
</ol>

Description List

Color: List item number 1 that needs to be really long so we can see the spacing when it goes to another line
Color Again: List item number 1

<dl>
   <dt>Color</dt>
   <dd>List item number 1</dd>
   <dt>Color Again</dt>
   <dd>List item number 1</dd>
</dl>

Blockquotes

You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face. You are able to say to yourself, 'I lived through this horror. I can take the next thing that comes along.'
Eleanor Roosevelt

<blockquote>
<p>You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face. You are able to say to yourself, 'I lived through this horror. I can take the next thing that comes along.'</p>
<cite>Eleanor Roosevelt</cite>
</blockquote>

Text Alignment

Left Aligned Text

This the the standard alignment for text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p class="textLeft">This the the standard alignment for text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Right Aligned Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.

<p class="textRight">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.</p>

Center Aligned Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.

<p class="textCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.</p>

Justify Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.

<p class="textJustify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.</p>

Colors

Primary Color

#7e6c6a
R126/G108/B106

.color--primary
.background--primary

Secondary Color

#927265
R146/G114/B101

.color--secondary
.background--secondary

Tertiary Color

#444148
R68/G65/B72

.color--tertiary
.background--tertiary

Support Color

#d7c2ad
R215/G194/B173

.color--support
.background--support

Support Color #2

#eae3d9
R234/G227/B217

.color--support2
.background--support2

Support Color #3

#e8eceb
R232/G236/B235

.color--support3
.background--support3

Using the color classes to switch out font colors is simple. Just assign that color class to your tag.

Heading 5 in Support Color

This paragraph has a font color change in the very middle.

<h5 class="supportColor">Heading 4 in Support Color</h5>
<p>This paragraph has a <span class="secondaryColor">font color change</span> in the very middle.</p>

Buttons

A basic button can be created using the .btn class. You have your choice of two buttons colors, .primaryBg and .secondaryBg. If you'd like your button to stand out a little more, you may also add the class .large.

Standard Button With Primary Background

Press Me

<a class="btn primaryBg">Press Me</a>

Standard Button With Secondary Background

Press Me

<a class="btn secondaryBg">Press Me</a>

Large Button With Primary Background

Press Me

<a class="btn primaryBg large">Press Me</a>

Images

There are several classes available to both size and position your images. If you would like your image to have style, add the class .styled to your image tag. The available widths are .width20, .width25, .width33, .width50, and .width100.

Image Floated Left 20% Width with No Style

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum.

<p><img src="images/kitten.jpg" class="floatLeft width25">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>

Styled Image Floated Right 50% Width

<p><img src="images/kitten.jpg" class="styled floatRight width50">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>

Styled Image Centered 100% Width

<p><img src="images/kitten.jpg" class="styled block positionCenter width100"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

Responsive Videos

To make an embedded video responsive, add the class .flex-container to the containing tag. To make your responsive video styled, add the class .styled to the containing tag.

<p class="flex-container styled"><iframe src="//www.youtube.com/embed/rd3A-y5sO5o" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

Request a Consultation& Contact Us Today

Each piece of Signature Wood Work custom furniture starts with an idea. Share yours today.

Testimonials

"Andy provided friendly honest support from the initial inquiry to the finished product. The care that goes in to Signature products is obvious, making supporting this local business an easy decision."

- Sonny B.,
Happy Home Owner
"My wife and I received delivery of our new Live Edge dining table with chairs yesterday. I just wanted to let you know that the table and chairs are perfect! Thank you so much for such beautiful and unique addition to our house."

- Barb A.,
Happy Home Owner
"Andy was incredibly helpful throughout the entire process. He patiently helped us from the beginning, from picking the wood, all the way to advising on the methods of construction of the furniture. It was all because of his input that made our coffee table idea turn out better than we could have imagined. We will definitely recommend him to our friends and family."

- James W,
Happy Home Owner