Styleguide (hide before launch)

Colors

--ch-navy
#002B49
--ch-black
#000
--ch-overlay
rgba(0, 0, 0, 0.25);
--ch-light-grey
#EDEDEB
--ch-off-white
#F4F4F4;
--ch-caramel
#8D633A
--ch-stone
#D6D2C4
--ch-stroke-light
#D9D9D9
--ch-stoke-ui
#949494
--ch-stroke-dark
#777
--ch-confirmation-green
#319A4F
--ch-urgent-red
#910000
--ch-cream
#F5F0E6
--ch-white
#fff

Typography

.headline .headline-xl

Example Headline

.headline .headline-lg

Example of a Headline

.headline .headline-md

Example of a Headline

.headline .headline-sm

This is an example of a Headline

.headline .headline-xs

This is an example of a Headline

.headline-sans .title-sans

This is an example of a Headline

.headline-sans .headline-sans-lg

Example of a Headline

.headline-sans .headline-sans-md

Example of a Headline

.headline-sans .headline-sans-sm

Example of a Headline

.headline-sans .headline-sans-xs

This is an example of a Headline

.eyebrow

This is an example of an eyebrow

.body .body-lg This is an example of body copy as a reference.
.body .body-md This is an example of body copy as a reference.
.body .body-sm This is an example of body copy as a reference.
.body .body-xs This is an example of body copy as a reference.
WYSIWYG h1

H1 tag
WYSIWYG h2

H2 tag
WYSIWYG h3

H3 tag
WYSIWYG h4

H4 tag
WYSIWYG h5
H5 tag
WYSIWYG h6
H6 tag
WYSIWYG p

P tag
.body-lg-bold

Text here

.body-md-bold

Text here

.body-sm-bold

Text here

.caption

Text here

.nav-promo-tiles

Text here

.interface-tiles

Text here

.small-chip-text

Text here

Buttons

.button--large

Button Action

.button--black

Button Action

.button-stone

Button Action

.button--black-outline

Button Action

.button--white

Button Action

.button--white-outline

Button Action

.link--black

Button Action

.link--white

Button Action

Icons

icon-search
icon-account
icon-bag
icon-heart
icon-location
icon-small-arrow-left
icon-small-arrow-right
icon-close-x
icon-small-arrow-down
icon-small-arrow-up
icon-arrow-left
icon-arrow-right
icon-menu
icon-pause
icon-play
icon-small-close-x
icon-small-filter
icon-small-sale-tag
icon-zoom
icon-delivery
icon-shipping
icon-chat
icon-check
icon-notification