Typography

Fonts

.font--avenir-light, $font--avenir-light - Avenir Light
The quick brown fox jumps over the lazy dog
.font--avenir-book, $font--avenir-book - Avenir Book
The quick brown fox jumps over the lazy dog
.font--avenir-roman, $font--avenir-roman - Avenir Roman
The quick brown fox jumps over the lazy dog
.font--avenir-medium, $font--avenir-medium - Avenir Medium
The quick brown fox jumps over the lazy dog
.font--avenir-heavy, $font--avenir-heavy - Avenir Heavy
The quick brown fox jumps over the lazy dog
.font--avenir-black, $font--avenir-black - Avenir Black
The quick brown fox jumps over the lazy dog

Headers

All versions here can be combined with font classes above to override default weight as needed. We do not explicity set uppercase styles in CSS to allow for editorial flexibility.

.header--extra-large, %header--extra-large, @include header--extra-large - Extra Large Header A
Lorem Ipsum.
.header--extra-large-alt, %header--extra-large-alt, @include header--extra-large-alt - Extra Large Header B
Lorem Ipsum.
.header--large, %header--large, @include header--large - Large Header
LOREM Ipsum.
.header--medium, %header--medium, @include header--medium - Medium Header
LOREM IPSUM. Lorem Ipsum.
.header--small, %header--small, @include header--small - Small Header
Lorem ipsum dolor sit amet, consectetuer dipiscing elit, sed diam nonummy nibh euismod.

Text

.t1, %t1 - Large Body Copy
Lorem ipsum dolor sit amet, consectetuer dipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. dolore magna aliquam erat volutpat.
.t2, %t2 - Small Body Copy
Lorem ipsum dolor sit amet, consectetuer dipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. dolore magna aliquam erat volutpat.

Components

Colors

$color-white
#ffffff
$color-lighter-gray, $color-bg - Background Gray
#f6f6f6
$color-light-gray, $color-border - Divider Gray, White CTA Hover
#ebebeb
$color-gray - Text Gray
#959595
$color-light-black - Black CTA Hover
#303030
$color-black, $color-text
#000000
$color-red, $color-error - Error Message Red
#d74027
$color-transparent--dark - Dark Overlay
rgba(0, 0, 0, 0.5)
$color-transparent--light - Light Overlay
rgba(255, 255, 255, 0.7)

Buttons

Hover transitions TBD

.button, %button, @include button
Shop Now
.button .button--inverted
Shop Now
.button .button--quickshop
Quick Shop
.button .button--large - SPP CTA Button
Add To Bag
.button .button--disabled - Disabled Button
Sold Out
.link, %link - CTA Alt
Explore
.link .link--large - CTA Alt Large
Explore

Icons

TBD

Default Styles

Headings with paragraphs

Heading 1

Standard body copy inside a paragraph. This is a link. This is bold and italic.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 3

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 4

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 5

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 6

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Default Form Elements

The Fieldset:

Legend

The Form:

Radio Buttons:

Checkboxes:

Custom UI Elements

selectBox

selectBox selectBox--alternate

Adaptive Placeholder:

Please login to receive emails.