Fonts

These are the various font families and weights being used throughout the site.

TUNGSTEN SEMIBOLD

Grumpy wizards make toxic brew for the evil Queen and Jack.

BRYANT MEDIUM

Grumpy wizards make toxic brew for the evil Queen and Jack.

BRYANT MEDIUM ITALIC

Grumpy wizards make toxic brew for the evil Queen and Jack.

BRYANT REGULAR

Grumpy wizards make toxic brew for the evil Queen and Jack.

BRYANT REGULAR ITALIC

Grumpy wizards make toxic brew for the evil Queen and Jack.

Colors

Primary Colors - being used through out the site are reflective of the proposed business line integration colors. Each line has a representative color. These colors have been optimized for optimal contrast on web.

Hex: #98150B
Hex: #003087
Hex: #222222

Secondary Colors - the variety of light greys are primarily used for the separation of content and elements.

Hex: #dddddd
Hex: #eaeaea
Hex: #f4f4f4
Headings

The heading styles are used to denote hierarchy of content. Header Style One will only appear on the hero area of landing pages. Headers Two through Four can be used as headers in all general content blocks. Five and Six are generally used within content.

h1. Heading Example

Tungsten Semibold - 50px (3.125em)

h2. Heading Example

Tungsten Semibold - 40px (2.5em)

h3. Heading Example

Tungsten Semibold - 36px (2.25em)

h4. Heading Example

Tungsten Semibold - 26px (1.625em)
h5. Heading Example
Tungsten Semibold - 20px (1.25em)
h6. Heading Example
Tungsten Semibold - 16px (1em)
List Samples

This is how both ordered and unordered lists are supposed to be displayed in there normal format.

  • Unordered List Item
  • Unordered List Item
  • Unordered List Item
  • Unordered List Item
  • Unordered List Item
  • Unordered List Item
  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item
  4. Ordered List Item
  5. Ordered List Item
  6. Ordered List Item
Copy Samples

This copy consists of various inline and block level copy applications. Such applications are underlined, stikethrough, inline link, bold, italic, highlighted and blockquote text.


Qui fugit underline text quasi totam italic or emphasis text sapiente eveniet corporis nesciunt, dolor consectetur highlighted text libero provident bold text sample. Molestias repellat cems kseraul placeat laboriosam repudiandae. Text that is no longer relevant to use. Consectetur doloribus dolorem ratione, inventore. This is small text molestiae molestias iusto, voluptas suscipit explicabo adipisci recusandae.

Buttons

This is a collection of the various button styles being used through out the site. Always styled in #e21f11 with Tugsten Semibold set at 18pt.

Button 
<a href="#" class="button-link">Button</a>
Button One

Button Style One – this is the sites primary button style, generally used for all calls to action.

<a href="#" class="button-link button-link-default">Button One</a>
Button Two

Button Style Two – a knockout version of the primary button, should be used very sparsely. Its increased visual weight makes it perfect for extremely important calls to action or in conjunction with form elements.

<a href="#" class="button-link button-link-default alt">Button Two</a>
Button Style Three    

Button Style Three – Generally only used in global elements such as navigation, footer, and tool bar.

<a href="#" class="button-link no-styles red">Button Style Three</a>
Button Extended

Button Style Four –used in place of button style one in situations where content blocks hold less real estate, or importance.

<a href="#" class="button-link button-link-ext">
    Button Extended
    <i class="icon icon-arrow">
        <svg>
            <use xlink:href="img/spritemap.svg#icon-arrow-right"></use>
        <svg>
    </i>
</a>
General Link

General Link Style – the general hyperlink style for the site, set at 15 points in Braynt Medium with an underline.

<a href="#">General Link</a>
Graphic Elements

This site employs various types of iconography to support content and UI elements.


Primary Icons – are used to bolster business-line related content or navigation.

General Copy Samples

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur doloribus maiores blanditiis quas quasi autem cum nihil deserunt tempore at, eveniet necessitatibus odio placeat repellat dolorem vel aut. Doloribus, quam.Quo autem molestiae molestias iusto, voluptas dolorem ratione, inventore suscipit explicabo adipisci recusandae. Odit corrupti, animi sunt sed labore maxime placeat ipsum, ipsam cumque explicabo magnam, optio eligendi ducimus ipsa?

Consectetur adipisicing elit. Reprehenderit distinctio quam cumque, quisquam inventore voluptatibus! Eaque autem enim, eveniet suscipit molestiae accusamus aliquam cupiditate repellat quas, asperiores quam molestias tempora! Qui fugit repudiandae quasi totam mollitia aspernatur consequatur sapiente eveniet corporis nesciunt, dolor consectetur deserunt illum libero provident error voluptate laboriosam. Molestias repellat cum placeat laboriosam repudiandae eos pariatur nesciunt!

General Copy Samples w/ Floated Image

Placeholder imageLorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur doloribus maiores blanditiis quas quasi autem cum nihil deserunt tempore at, eveniet necessitatibus odio placeat repellat dolorem vel aut. Doloribus, quam.Quo autem molestiae molestias iusto, voluptas dolorem ratione, inventore suscipit explicabo adipisci recusandae. Odit corrupti, animi sunt sed labore maxime placeat ipsum, ipsam cumque explicabo magnam, optio eligendi ducimus ipsa?

Consectetur adipisicing elit. Reprehenderit distinctio quam cumque, quisquam inventore voluptatibus! Eaque autem enim, eveniet suscipit molestiae accusamus aliquam cupiditate repellat quas, asperiores quam molestias tempora! Qui fugit repudiandae quasi totam mollitia aspernatur consequatur sapiente eveniet corporis nesciunt, dolor consectetur deserunt illum libero provident error voluptate laboriosam. Molestias repellat cum placeat laboriosam repudiandae eos pariatur nesciunt!

Copy Alignment Samples

Left aligned text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.

Center aligned text.
Pellentesque pulvinar ligula vitae tellus ornare, vitae suscipit est pretium. Sed vitae tincidunt mauris. Maecenas posuere, augue vitae bibendum commodo, ante mi laoreet nibh, a pulvinar massa metus eget arcu. Phasellus fermentum purus ac diam sodales dignissim. Pellentesque pulvinar ligula vitae tellus ornare, vitae suscipit est pretium. Sed vitae tincidunt mauris. Maecenas posuere, augue vitae bibendum commodo, ante mi laoreet nibh, a pulvinar massa metus eget arcu. Phasellus fermentum purus ac diam sodales dignissim.

Right aligned text.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam mi orci, pellentesque a est id, rutrum luctus lacus. Nunc nec euismod risus, a vehicula nisi. Nunc porta velit vitae tortor vehicula, non ullamcorper enim pellentesque. Proin dapibus odio ut nisl porttitor pharetra.

Justified text.
Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia. Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia. Pellentesque pulvinar ligula vitae tellus ornare, vitae suscipit est pretium. Sed vitae tincidunt mauris. Maecenas posuere, augue vitae bibendum commodo, ante mi laoreet nibh, a pulvinar massa metus eget arcu. Phasellus fermentum purus ac diam sodales dignissim.

Column Copy Samples

Qui fugit repudiandae quasi totam mollitia aspernatur consequatur sapiente eveniet corporis nesciunt, dolor consectetur deserunt illum libero provident error voluptate laboriosam. Molestias repellat cum placeat laboriosam repudiandae eos pariatur nesciunt!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur doloribus maiores blanditiis quas quasi autem cum nihil deserunt tempore at, eveniet necessitatibus odio placeat repellat dolorem vel aut. Doloribus, quam.Quo autem molestiae molestias iusto, voluptas dolorem ratione, inventore suscipit explicabo adipisci recusandae. Odit corrupti, animi sunt sed labore maxime placeat ipsum, ipsam cumque explicabo magnam, optio eligendi ducimus ipsa?

Aside Callout Samples
Did You Know?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna” aliqua."

- Melissa Schwartz 10FTMBA
Tables & Comparisson Chart
Comparison Topic Column Topic Column Topic Column Topic Column Topic
Comparison Topic Here Yes No Yes No
Comparison Topic Here No Yes No Yes
Comparison Topic Here Yes No Yes No
Comparison Topic Here No Yes No Yes
i Table Marks
Comparison Topic Column Topic Column Topic Column Topic Column Topic
Comparison Topic Here Lorem ipsum dolor sit Mauris ac mi Cras ut blandit lorem. Donec suscipit feugiat lectus nec imperdiet.
Comparison Topic Here Suspendisse rutrum Fusce elementum tincidunt tellus venenatis adipiscing. Lorem Nullam eget egestas orci. Aenean pretium scelerisque
Comparison Topic Here Fusce sit amet Maecenas consequat interdum nibh, Aliquam erat volutpat. Nunc at viverra Suspendisse condimentum leo
Comparison Topic Here Quisque dictum Nunc vitae nulla et Cras dignissim accumsan tellus, Mauris ac mi
i Table Text
General Form

Form elements are styled and displayed in various states of interaction. Subtle shifts in opacity indicate to the user that they had interacted. Input copy within these elements is always set at 18pt in Tungsten Semibold.


Example block-level success help text here.

Example block-level error help text here.

Example block-level general help text here.

Inline Form
Inline Form (No Labels)
Grid Sample(s)

Example: Stacked-to-horizontal

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-12
.col-md-10
.col-md-2
.col-md-8
.col-md-4
.col-md-6
.col-md-6
.col-md-4
.col-md-8
.col-md-2
.col-md-10
.col-md-4
.col-md-4
.col-md-4
.col-md-3
.col-md-3
.col-md-6
.col-md-2
.col-md-2
.col-md-8
.col-md-3
.col-md-6
.col-md-3
.col-md-3
.col-md-4
.col-md-5

Example: Mobile and desktop

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Example: Mobile, tablet, desktop

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Example: Offsetting columns

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

Example: Nesting columns

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6

Example: Column ordering

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9