palette

$color-greyDarkest
#181818
$color-greyDarker
#3B3B3F
$color-greyDark
#65656C
$color-grey
#999D9F
$color-greyLight
#BBBDC0
$color-greyLighter
#EFEFF0
$color-greyLightest
#FCFCFC
$color-primary
#c2d500
$color-secondary
#002b49
$color-tertiary
#181818
$color-error
#BF1722
$color-warning
#CC8100
$color-success
#178801

Type

Header H1

Header H2

Header H3

Header H4

Header H5
Header H6

SubHeader H3

SubHeader Secondary

SubHeader H4

SubHeader H5
SubHeader H6

paragraph.large. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Header H3

paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Header H4

paragraph.small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci

Here is a link - Large Inline links in paragraph tags should be pretty obvious.

Here is a link - Small Inline links in paragraph tags should be pretty obvious.

Util Label venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci Author

Here is a link Inline links in paragraph tags should be pretty obvious.

Util Link Places like the masthead or blog meta data

Util Label Places like the cart labels or key value pairs

Util Link Small

Util Link Dark

Util Link Orange

.emphasized paragraph text

Header H1

Header H2

Header H3

Header H4

Header H5
Header H6

SubHeader H3

SubHeader Secondary

SubHeader H4

SubHeader H5
SubHeader H6

paragraph.large. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Header H3

paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Header H4

paragraph.small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci

Here is a link - Large Inline links in paragraph tags should be pretty obvious.

Here is a link - Small Inline links in paragraph tags should be pretty obvious.

Util Label venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.

Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci Author

Here is a link Inline links in paragraph tags should be pretty obvious.

Util Link Places like the masthead or blog meta data

Util Label Places like the cart labels or key value pairs

Util Link Small

Util Link Dark

Util Link Orange

.emphasized paragraph text

Buttons

a.button
a.button
a.button
a.button.button--ghost
a.button.button--primary.button--large
a.button.button--large
a.button.button--small
a.Button--more

a.Button--back


button--arrow, a.button--arrow


a.button
a.button
a.button
a.button.button--ghost
a.button.button--primary.button--large
a.button.button--large
a.button.button--small
a.Button--more

a.Button--back


button--arrow, a.button--arrow


Links

Dividers




Forms

Please select one
Please select one
  • This is not a valid email address
  • Did you mean…
  • You must select a value
Please select one
Please select one

Quantity Selectors

Alert

Alert

Alert Success

Alert Info

Alert Error

Layout

This is .container
This is .container *should not be inside container
column small-4
column small-4
column small-4
column small-6 medium-4 large-3
column small-4 medium-4 large-3
column small-4 medium-4 large-3
column small-4 medium-4 large-3

Margins

The layout centers around a vertical rhythm of 20px which is equal to the base line height and blocks of text. Gutters are also equal to this base line height. Note that these are only variables and there are not classes mapped to these variables.

$margin-small
$margin-base
$margin-medium
$margin-large
$margin-x-large

Negative Text

the .u-negative class makes all children text, buttons, etc white.