Style Guide
Color
Brand Colors
Brand Primary– Neptune Blue
#0076A9
Brand Secondary – Robin's Egg
#26CAD3
Brand Tertiary – Midnight
#084975
Brand Ascent
Utility Colors
Color Warning
Color Success
Gray Scale
Gray 900
Gray 800
Gray 700
Gray 500
Gray 400
Gray 200
Gray 100
Gray 50
Typography
Oswald Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
$header-font-stack
'Harmonia Sans', "Arial Black", "Arial Bold", Gadget, sans-serif;
Harmonia Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
01234567890 !@$%”?,&
$body-font-stack
'Harmonia Sans', '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
-
Twitter -
Facebook -
Instagram -
location -
time -
phone
General Icons
-
Arrow Down
-
Arrow Left
-
Arrow Right
-
Close
-
Plus
-
Minus
-
Menu
-
Account
-
Search
-
Cart
-
Question
-
Error
-
Resume
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
medium-up--one-third
medium-up--one-third
medium-up--one-third
medium-up--one-third
medium-up--one-third small--one-half
medium-up--one-third small--one-half
3.1
3.2
3.3
3.4
3.5
3.6
3.7