Branding


This page shows the current brand direction along with some key elements so that we can make sure things work together smoothly.


Colors

Hint of Red

Light shades

Use this color as the background for your dark-on-light designs, or the text color of an inverted design.

Downy

Light accent

Accent colors can be used to bring attention to design elements by contrasting with the rest of the palette.

Curious Blue

Main brand color

This color should be eye-catching but not harsh. It can be liberally applied to your layout as its main identity.

Lynch

Dark accent

Another accent color to consider. Not all colors have to be used - sometimes a simple color scheme works best.

Mirage

Dark shades

Use as the text color for dark-on-light designs, or as the background for inverted designs.


Headings

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

Paragraph

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to make it bold!. You can also use em to italicize your words.

http://keystocks-staging.codehammerhead.com/

Lists

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
    1. Lorem ipsum dolor sit amet
    2. Lorem ipsum dolor sit amet
    3. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet

Button

Primary Secondary Success Alert Warning

So Tiny So Small So Basic So Large Such Expand

Callout

This is a default callout.

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a primary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a secondary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a success callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a warning callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is an alert callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.

Table

Table HeaderTable HeaderTable HeaderTable Header
Content Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here

Tooltip

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.


Pagination


Forms

Here's how you use this input field!

Choose Your Favorite
Check these out
$

Accordion


Tabs

One

Check me out! I'm a super cool Tab panel with text content! On medium-down screen sizes, this component will transform into an accordion.

Two

Three

Check me out! I'm a super cool Tab panel with text content!

Four

Five

Check me out! I'm a super cool Tab panel with text content!

Six


Cards

Dreams feel real

I'm going to improvise. Listen, there's something you should know about me... about inception.

Last updated 1 minute ago

Menus

Cards play nicely with menus too! Give them a try.

Featured

Your title here!

An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.

Buttons!

Who doesn't love a good button? Buttons work in all of their forms too.

I'm a button

And button groups...

Button groups also work great!

Centered

The utility classes like .text-center work great too.

Click me

Example

This is not the final desing.
This shows how well the colors combine together

semantic

Full Screen Color Sample

semantic
November 2nd & 9th Webinar Attendees Book Call Here

Webinar Attendees – click here to book a complimentary 10-minute call with Ryan, Aaron, Brennan or one of our staff. We will answer your questions and see what services may be right for you.