Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

Web Pattern Library:

Color palette & classes

$navy-blue
$dark-blue
$blue
$light-blue
$darker-pink
$dark-pink
$pink
$light-pink
$dark-aqua
$aqua
$light-aqua
$red
$green
$darker-gray
$dark-gray
$gray
$light-gray
$border-gray
$fill-gray
$white

Color Classes

For use with components that can be customized in the markup, like marketing modules.

The following styles can be customized:

Text color classes

For light backgrounds:

text-navy-blue
text-link-blue
text-dark-blue
text-darker-pink
text-dark-pink
text-dark-aqua
text-red
text-green
text-darker-gray
text-dark-gray
text-gray

For dark backgrounds:

text-blue
text-light-blue
text-pink
text-light-pink
text-aqua
text-light-aqua
text-light-gray
text-border-gray
text-fill-gray
text-white

Background color classes

bg-navy-blue
bg-dark-blue
bg-blue
bg-light-blue
bg-darker-pink
bg-dark-pink
bg-pink
bg-light-pink
bg-dark-aqua
bg-aqua
bg-light-aqua
bg-red
bg-green
bg-darker-gray
bg-dark-gray
bg-gray
bg-light-gray
bg-border-gray
bg-fill-gray
bg-white

Border color classes

stroke-navy-blue
stroke-dark-blue
stroke-blue
stroke-light-blue
stroke-darker-pink
stroke-dark-pink
stroke-pink
stroke-light-pink
stroke-dark-aqua
stroke-aqua
stroke-light-aqua
stroke-red
stroke-green
stroke-darker-gray
stroke-dark-gray
stroke-gray
stroke-light-gray
stroke-border-gray
stroke-fill-gray
stroke-white