Styleguide (unpublish before launch)

Colors

black
(--color-styleguide-black)
#000000
carbon
(--color-styleguide-carbon)
#28292A
gray
(--color-styleguide-gray)
#EEEDED
dark-gray
(--color-styleguide-dark-gray)
#BFBFBF
light-gray
(--color-styleguide-light-gray)
#F8F8F8
white
(--color-styleguide-white)
#ffffff
divider line
(--color-styleguide-divider)
#CCCCCC
ui-stroke
(--color-styleguide-ui-stroke)
#000000
text
(--color-styleguide-text)
#000000

Typography

EYEBROW TEXT LARGE

EYEBROW TEXT MED

EYEBROW TEXT SMALL

Heading Text Large

Heading Text Medium

Heading Text Small

Heading Text Large Alt

Heading Text Medium Alt

Heading Text Small Alt

Body Text Large

Body Text Medium

Body Text Small

Body Text Caption

0 1 2 3 4 5 6 7 8 9

Buttons

Button Primary (.button.button--primary)

Primary

Primary - Hover

Primary - Active

Button Secondary (.button.button--secondary)

Secondary

Secondary - Hover

Secondary - Active

Button Primary - White (.button.button--primary-white)

Primary - White

Primary - White - Hover

Primary - White - Active

Button secondary - White (.button.button--secondary-white)

secondary - White

secondary - White - Hover

secondary - White - Active

Link 1 (.button.button--link-1)

Default

Hover

Link 2 (.button.button--link-2)

Default

Hover

Inputs

Input Field - Default

Dropdown - Default

Badges

BADGE

Swatches - Hover/Active

Swatch Swatch

Filter Tabs

Select Tab Select Tab Select Tab

Filter Tabs - Hover/Active

Select Tab Select Tab Select Tab