Brand Guidelines

Text
Links
Color Wheel
Headings
Icons
Form Fields

Text: Default / No Class
.text--default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec euismod tellus. Donec dignissim diam sed lectus rhoncus varius.

In in nisi quis nibh lacinia posuere pulvinar sed libero. Mauris dui diam, porttitor sed egestas et, venenatis sed erat. Cras consectetur ut dolor eget tempor. Morbi quis nisl posuere, scelerisque magna nec, placerat eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Large
.text--lg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec euismod tellus. Donec dignissim diam sed lectus rhoncus varius.

In in nisi quis nibh lacinia posuere pulvinar sed libero. Mauris dui diam, porttitor sed egestas et, venenatis sed erat. Cras consectetur ut dolor eget tempor. Morbi quis nisl posuere, scelerisque magna nec, placerat eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Small
.text--sm
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec euismod tellus. Donec dignissim diam sed lectus rhoncus varius.

In in nisi quis nibh lacinia posuere pulvinar sed libero. Mauris dui diam, porttitor sed egestas et, venenatis sed erat. Cras consectetur ut dolor eget tempor. Morbi quis nisl posuere, scelerisque magna nec, placerat eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

X-Small
.text--xs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec euismod tellus. Donec dignissim diam sed lectus rhoncus varius.

Subtitle
.text--subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec euismod tellus. Donec dignissim diam sed lectus rhoncus varius.

Links: Default

This is an example of how links look.

Unstyled
.unstyled
This is an example of how links look.

Rounded Button

class="button button--block" or .button.button--block

Rounded Block Button

Color Wheel

White #fff
Gray 100 #e5e5e5
Gray 200 #dddddd
Gray 300 #c4c4c4
Gray 400 #aeb0b5
Gray 500 #626262
Gray 600 #464646
Gray 700 #36393B
Gray 800 #1f1f1f
Gray 900 #0f0f0f
Black #000
Red
Blue
Purple
Orange
Yellow
Green

Headings Heading Fonts

Structure	Class	Ex.
Primary Font	`.heading--primary`	Example
Primary Secondary	`.heading--secondary`	Example

Standard Sizes

Structure	Class	Ex.
Heading X-Large	`.heading--xl`	Example
Heading Large	`.heading--lg`	Example
Heading Medium	`.heading--md`	Example
Heading Small	`.heading--sm`	Example
Heading X-Small	`.heading--xs`	Example

Jumbo Sizes

Structure	Class	Ex.
Jumbo Large	`.heading--jumbo-lg`	Example
Jumbo Medium	`.heading--jumbo-md`	Example
Jumbo Small	`.heading--jumbo-sm`	Example

Icons

Name	Default	Inverse	Transparent	Light
`account`
`airplane`
`arrow`
`bar`
`category`
`checkmark`
`climate`
`dollar`
`facebook`
`fees`
`filter`
`gplus`
`headset`
`heart`
`instagram`
`lock`
`mail`
`map`
`message`
`nightlife`
`paw`
`pencil`
`phone`
`pin`
`pinterest`
`search`
`services`
`snorkel`
`twitter`
`user`
`water`