My Bag
${ cartError }

Pattern Library

Palette

Primary
Black
#000000
$color--black
White
#FFFFFF
$color--white
Elson Red
#EE3931
$color--red
Gold
#F4D887
$color--gold
Tints & Shades
Grey 1
#F7F7F7
$color--grey--01
Grey 2
#EEEEEE
$color--grey--02
Grey 3
#DDDDDD
$color--grey--03
Grey 4
#999999
$color--grey--04

Typography

General Text
.font--general
Favorit Light Favorit Regular
Editorial Text
.font--editorial
Cormorant Garamond Regular
Brand Text
.font--brand
Courier New Regular

Typography Scale

Editorial Page Title
Desktop: 48px
Mobile: 36px
Cormorant Garamond Regular
.type--editorial-t
An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur
Editorial Page Quote
Desktop: 48px
Mobile: 32px
Cormorant Garamond Regular
.type--editorial-q
An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur
Editorial Paragraph
Desktop: 32px
Mobile: 24px
Cormorant Garamond Regular
.type--editorial-p
An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur
Hero
Desktop: 24px
Mobile: 18px
Favorit Light
.type--hero
An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur
Brand Voice L
Desktop: 21px
Mobile: 21px
Courier New Regular
.type--brand-l
An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur
Page Title, Module Title
Desktop: 18px
Mobile: 18px
Favorit Light
.type--module-t
An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur
Brand Voice M
Desktop: 18px
Mobile: 18px
Courier New Regular
.type--brand-m
An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur
General Body Paragraph
Desktop: 14px
Mobile: 14px
Favorite Light
Favorit Regular (as bold)
.type--body-p
An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur
Brand Voice S
Desktop: 14px
Mobile: 14px
Courier New Regular
.type--brand-s
An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur
CTA
Desktop: 12px
Mobile: 12px
Favorit Regular
.type--cta
An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur
Small Text
Desktop: 12px
Mobile: 12px
Favorite Light
Favorit Regular (as bold)
.type--small-p
An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur An Iconic Kiki with Legendary Lorem Ipsum Dolor Sit Amet Consectutur

Grids

Desktop
Layout width: 1280px
.container--xl
Columns: 12
Gutters: 40px
.gutters--full
Mobile
Layout width: 374px
Gutters: 20px

Clickables

Contained (light bg)
.contained--light--01
.contained--light--02
.contained--03
.contained--04
.contained--05
Contained (dark bg)
.contained--dark--01
.contained--dark--02
.contained--03
.contained--04
.contained--05
Uncontained
.uncontained--light
.uncontained--dark
Swatches
.swatches--no-border
.swatches--border
Tabs
.tab
Sub Nav
.pill--light--item
.pill--dark--item
Carousel Arrows
Carousel Arrows (for swatches)
Expand/Collapse
expand collapse
expand collapse
Tags
Lorem Ipsum exit

Inputs

Text field
.text-input.text-input--textfield
Dropdowns
Radio Buttons
.radio
Checkmarks
.checkbox--square
.checkbox--circle
Email Input

Scrollbar

Horizontal Slider
.scroll-bar

Video

Play / Pause
.video-control--play .video-control--pause
Video Controls
.video-control--custom
Ratio Sizes
.video-control--custom.aspect-ratio.aspect-ratio--4-5
.video-control--custom.aspect-ratio.aspect-ratio--1-1
.video-control--custom.aspect-ratio.aspect-ratio--4-3
.video-control--custom.aspect-ratio.aspect-ratio--16-9

Icons

Search
search
search
Wishlist
wishlist
wishlist
Up/Down
nav-up
nav-up
nav-down
nav-down
Close
close
close