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: #e21f11

Hex: #3b9cd6

Hex: #44a651

Hex: #d0ab2c

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

Ordered List Item
Ordered List Item
Ordered List Item
Ordered List Item
Ordered List Item
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. The style below each button demonstrates hover state.

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

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.

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

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

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

Button Button One Button Two Button Extended

Button Style Three General Link

Graphic Elements

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

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

Secondary Icons – Used to support UI elements in various places throughout our components.

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 image 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!

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.

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.

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

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

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.

Email address

Password

Disabled Field

Example block-level success help text here.

Example block-level error help text here.

File input

Example block-level general help text here.

Label for Text Area

Select field:

Checkbox Sample

Disabled Checkbox

Radio Sample

Disabled Radio

Inline Form

Inline Form (No Labels)

Alerts Messages

Here are styles for two types of alert messages. The first is for standard alerts, the second for any type of warning message. A hyper link may be built into the copy.

Nullam id dolor id nibh ultricies vehicula ut id elit. Link Style

Duis mollis, est non commodo luctus, nisi erat porttitor ligula. Link Style

Maecenas sed diam eget risus varius blandit sit amet non magna. Link Style

Etiam porta sem malesuada magna mollis euismod. Link Style

Grid Sample(s)

Example: Stacked-to-horizontal

.col-md-1

.col-md-12

.col-md-10

.col-md-2

.col-md-8

.col-md-4

.col-md-6

.col-md-4

.col-md-8

.col-md-2

.col-md-10

.col-md-4

.col-md-3

.col-md-6

.col-md-2

.col-md-8

.col-md-3

.col-md-6

.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

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

Example: Offsetting columns

.col-md-4

.col-md-4 .col-md-offset-4

.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