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 Tagblockquote
Remember, if you don't do it this year, you'll be one year older when you do.
Warren Miller
- Strong
- Emphasis
- Inline link
Strike- Sup
No bullet
|
|
Round bullet
|
|
Square bullet
|
|
Inline List
|
|
Numeric bullet
|
|
Alpha bullet
|
|
Horizontal Rules
Default
Thick
hr.hr--thick
Small
hr.hr--small
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
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 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