Style Guide

Color

Brand Colors

Color Primary
#bf1238

Color Secondary
#003865

Utility Colors

Color Warning

Color Success

Gray Scale

Gray 900

Gray 700

Gray 400

Gray 200

Gray 100

Color 50

Typography

Montserrat Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&

$header-font-stack

'Montserrat', "Arial Black", "Arial Bold", Gadget, sans-serif;

Source Sans Pro

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&

$body-font-stack

'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;

font size 1000

font size 900

font size 800

font size 700

font size 600

font size 500

font size 400

font size 300

font size 200

font size 100

font size 75

font size 25

H1 Header style

H2 Header style

H3 Header style

H4 Header style

H5 Header style
H6 Header Style

paragraph: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

paragraph p-large: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

paragraph p-regular: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

paragraph p-large p-regular: Tufulio's mount waterman chinese downhill. Paradise paradise sitzmark lifts white pass kitzbühel silver mountain glen plake. Winter park badger pass scott jay peak tree well silver mountain tuck it apres ski mount shasta baker mountain powder stash chinese downhill. Boreal rambo koflach grand targhee snowbasin sun valley the cliff.

Link inside body copy, text Default. should look like this

Anchor Tag
Text Link
blockquote

Remember, if you don't do it this year, you'll be one year older when you do.

Warren Miller

No bullet ul
.no-bullets
  • One
  • Two
  • Three
  • Four
Round bullet ul (default)
.disc
  • One
  • Two
  • Three
  • Four
Square bullet ul
.square
  • One
  • Two
  • Three
  • Four
Inline List ul
.inline-list
  • One
  • Two
  • Three
  • Four
Numeric bullet ol (default)
  1. One
  2. Two
  3. Three
  4. Four
Alpha bullet ol
.alpha
  1. One
  2. Two
  3. Three
  4. Four

Horizontal Rules

Default
Thick

hr.hr--thick

Small

hr.hr--small

Buttons



Forms

Vertical

To make long forms with block elements, add a class of .form-vertical to the parent.

You cannot add a class directly to most liquid form elements (e.g. {% form 'contact' %}). Instead, wrap the form in a div with the class .form-vertical to achieve the same effect.

Use class input-full

Checkboxes

Radios

Horizontal

Invisible Labels

Add a class of hidden-label to a label to hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.

Input Groups

Notes and Errors

This is a standard note
This is a success message

This is an error message.

  • Bullets can offer more insight to the error

Iconography

Social Icons
  • Vimeo
  • YouTube
  • Twitter
  • Facebook
  • Pinterest
  • Instagram
General Icons
  • Arrow Down
  • Arrow Left
  • Arrow Right
  • Arrow Left
  • Arrow Right
  • Close
  • Plus
  • Minus
  • Menu
  • Account
  • Location
  • Search
  • Cart
  • Error
  • Success
  • Grid View
  • List View
  • Call
  • email
Aaccessible Icon HTML
    <div class="icon-fallback-text">
      <span class="icon icon-facebook"></span>
      <span class="fallback-text">Facebook</span>
    </div>

Grid

This grid is based on csswizardry grids, though with some slight modifications. Built with Sass, the grid is fully integrated into your timber.scss.liquid stylesheet and has no external dependencies. Helper classes are generated by custom functions added to default grid Sass. Class names are created based on the $breakpoints variable in timber.scss.liquid.

grid__item

large--one-half medium--one-third

large--one-quarter medium--one-third

large--one-quarter medium--one-third

large--one-third medium--one-whole

large--one-third medium--one-half small--one-half

large--one-third medium--one-half small--one-half

3.1

3.2

3.3

3.4

3.5

3.6

3.7