palette

Neutral

$color-black
#000000

$color-greyDarkest
$color-neutral-900
#262627

$color-greyDarker
$color-neutral-800
#3B3B3F

$color-greyDark
$color-neutral-700
#65656C

$color-greyMediumDark
$color-neutral-600
#666666

$color-greyMedium
$color-neutral-500
#999D9F

$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
#A4C6CB

$color-primary
#106A71

$color-primaryDark
#0C555A

$color-primaryDarker
#094043

Secondary

$color-secondaryLight
#B6D1D5

$color-secondary
#A4C6CB

$color-secondaryDark
#93B2B6

$color-secondaryDarker
#839EA2

Tertiary

$color-tertiaryLight
#CE3EA01

$color-tertiary
#BCC200

$color-tertiaryDark
#797D00

Support

$color-error
#BF1722

$color-errorLight
#FAD5D8

$color-warning
#CC8100

$color-warningLight
#fffdea

$color-success
#178801

$color-successLight
#d5ffd8

$color-info
#6a6a6c

$color-infoLight
#EFEFF0

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

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

.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

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

palette

Neutral

Primary

Secondary

Tertiary

Support

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

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

Icons

Buttons

Default

Primary

Secondary

Tertiary

Ghost

button--arrow

Default

Primary

Secondary

Tertiary

Ghost

button--arrow

Links & Utlities

Dividers

Forms

Quantity Selectors

Alert

Layout

Spaced Section

Another Spaced Section, Medium Spacing

Stacked Spaced Sections, Spacing Small, Same Theme

This section has no padding-top

Spacing

Background Themes