palette

Neutral

 
$color-black
#000000
 
$color-greyDarkest
$color-neutral-900
#181818
 
$color-greyDarker
$color-neutral-800
#3B3B3F
 
$color-greyDark
$color-neutral-700
#65656C
 
$color-greyMediumDark
$color-neutral-600
#666666
 
$color-greyMedium
$color-neutral-500
#6a6a6c
 
$color-grey
$color-neutral-400
#999D9F
 
$color-greyLight
$color-neutral-300
#BBBDC0
 
$color-greyLighter
$color-neutral-200
#EFEFF0
 
$color-greyLightest
$color-neutral-100
#FCFCFC
 
$color-white
#ffffff

Primary

 
$color-primaryLight
#e9ff09
 
$color-primary
#c2d500
 
$color-primaryDark
#a3b300
 
$color-primaryDarker
#849100

Secondary

 
$color-secondaryLight
#003f6b
 
$color-secondary
#002b49
 
$color-secondaryDark
#002138
 
$color-secondaryDarker
#001727

Tertiary

 
$color-tertiaryLight
#292929
 
$color-tertiary
#181818
 
$color-tertiaryDark
#101010

Support

 
$color-error
#BF1722
 
$color-errorLight
#ffffff
 
$color-warning
#CC8100
 
$color-warningLight
#ffffff
 
$color-success
#178801
 
$color-successLight
#ffffff
 
$color-info
#6a6a6c
 
$color-infoLight
#ffffff

Type

Hero Jumbo

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

SubHeading H1

SubHeading H2

SubHeading H3

SubHeading H4

SubHeading H5
SubHeading 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.

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.

Paragraph Medium. 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.

Paragraph Medium. 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.

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.

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.

.emphasized paragraph text

Action Large

Action Medium

Action Small

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

Hero Jumbo

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

SubHeading H1

SubHeading H2

SubHeading H3

SubHeading H4

SubHeading H5
SubHeading 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.

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.

Paragraph Medium. 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.

Paragraph Medium. 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.

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.

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.

.emphasized paragraph text

Action Large

Action Medium

Action Small

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

Icons

Buttons

Default



Primary



Secondary



Tertiary




Ghost






button--arrow


Default



Primary



Secondary



Tertiary




Ghost






button--arrow


Links & Utlities

Text Link Default 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 PDP Buy grid key value pairs

Text Link Default Inline links in paragraph tags should be pretty obvious.

Util Link – Used in places like the masthead or blog meta data

Util Label – Used in places like the cart labels or PDP Buy grid key value pairs

Dividers

 

Forms

Please select one
Please select one
  • This is not a valid email address
  • 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 Default

Alert Success

Alert Info

Alert Error

Alert Warning

Layout

This is .container
This is .container-xs - 420px
This is .container-sm - 720px
This is .container-md - 1280px
This is .container-lg - 1440px
This is .container-xl - 1680px

Spaced Section

.stacked-component

Another Spaced Section, Medium Spacing

.stacked-component.spacing-md

Stacked Spaced Sections, Spacing Small, Same Theme

.stacked-component.spacing-sm

This section has no padding-top

.stacked-component.spacing-sm + .stacked-component.spacing-sm

Spacing

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

Background Themes

.theme-negative or .u-negative
.theme-dark
.theme-primary
.theme-secondary
.theme-tertiary
.theme-gray
.theme-light-gray
.theme-light
.theme-transparent
!