Styleguide

Fonts

Proxima Nova is the default font.

Bauer Bodoni Bold is the secondary font.

Proxima Nova
AaBb
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
AaBb
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
AaBb
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
AaBb
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
font-weight: 100 | normal | 600 | 700;
Bauer Bodoni Bold
AaBb
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
AaBb
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
font-style: normal | italic;

Typography Styles

Face
Bronzers
NEW
DON'T MISS OUT
BEST SELLERS
Color & Sparkle
Juicy Lips
Tutti Frutti Collection
Juicy Lips
Shop Now
Face > Foundation > Born This Way
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet mollis magna. Praesent magna ipsum.
Born This Way Supercoverage
$32
Quote
Quote
Quote Author
Quote
Born This Way Supercoverage
MULTI-USE SCULPTING CONCEALER
12 ml / 0.40 fl. oz
$30
Free Shipping with any BTS purchase*
HOW TO / DETAILS
  • Diamond-shaped doe foot allows application in thick lines using the flat surface, as well as thinner lines using the side and tip for precision coverage.
Contour
Choose neutral to cool-toned shades 3 tones darker than skin tone to create a believable shadow and shape.

Buttons

Standard Button
Shop Now
// or
@include button;
button
Black Button
Shop Now
// or
@include button--black;
button button--black
Pink Accent Button
Shop Now
// or
@include button--pink-accent;
button button--pink-accent
Pink Button
Shop Now
// or
@include button--pink;
button button--pink
Gold Button
Shop Now
// or
@include button--gold;
button button--gold
Disabled Button
Shop Now
// or
@include button;
button button--disabled
link
Secondary link
DETAILS
DETAILS
@include link--secondary;
link--secondary
@include link--tertiary;
link--tertiary
Inline Tout Link
SHOP NOW
SHOP NOW
@include link--inline-tout;
link--inline-tout

Colors

Primary Colors

  • #FDC2CB $color-pink
  • #FFF5F5 $color-pink-2
  • #DB008B $color-pink-accent
  • #000000 $color-black
  • #E6E6E6 $color-gray

Secondary Colors

  • #BF9B5F $color-gold
  • #C6E8EA $color-teal
  • #F4ECCA $color-yellow
  • #E3ECCD $color-mint

Icons

Icons are in progress - conversion fron icon font / glyphicon to inline SVG is underway

  • icon icon--arrow-down
  • icon icon--arrow-left-1
  • icon icon--arrow-left-2
  • icon icon--arrow-right-1
  • icon icon--arrow-right-2
  • icon icon--arrow-up
  • icon icon--bag-mobile
  • icon icon--caret--down
  • icon icon--checkmark
  • icon icon--close
  • icon icon--email
  • icon icon--facebook--circle
  • icon icon--facebook
  • icon icon--hamburger
  • icon icon--head--outline
  • icon icon--head--solid
  • icon icon--heart--filled
  • icon icon--heart-outline
  • icon icon--instagram
  • icon icon--livechat
  • icon icon--login-mobile
  • icon icon--pinterest--circle
  • icon icon--pinterest
  • icon icon--play
  • icon icon--plus
  • icon icon--search-mobile
  • icon icon--twitter
  • icon icon--youtube
  • icon icon--zoom
  • icon icon--smart-gift-icon
  • icon icon--plus--big

Forms

Accessibility Requirement

  • All form fields must have a label. If none is provided please provide a title and aria-label to your input fields

See: https://www.w3.org/WAI/tutorials/forms/

Form with Pink background




Full Border Version use .input-border or %input-border

Components

selectBox


Full Border Version

Slick Carousel
Slick Carousel - small version has class carousel--small-arrows
Toggle
Code
TOP