Bestsellers

Perfumes

LIP

Body & Home

GIFT BAR

Party With Kilian

Discover

Styleguide

Fonts
Headers
Text
Default Headings with Paragraphs
Colors
Buttons
Icons
Forms
Adaptive Placeholder
Dropdown

Fonts

Edwardian Script ITC
The quick brown fox jumps over the lazy dog
font-family: $font--heading;
Helvetica Neue LT Pro 45 Light
The quick brown fox jumps over the lazy dog
font-family: $font--text;
font-weight: 300;
Helvetica Neue LT Pro 55 Roman
The quick brown fox jumps over the lazy dog
font-family: $font--text;
Helvetica Neue LT Pro 65 Medium
The quick brown fox jumps over the lazy dog
font-family: $font--text;
font-weight: 500;
Helvetica Neue LT Pro 75 Bold
The quick brown fox jumps over the lazy dog
font-family: $font--text;
font-weight: 700;

Headers

Header 1
Header One
@extend %h1;
// or
@include h1;
Header 2
Header Two
@extend %h2;
// or
@include h2;
// add a span tag to any header to display line behind text as shown in this example e.g.
class="h2"><span>...</span>
Header 3
Header Three
@extend %h3;
// or
@include h3;
Header 4
Header Four
@extend %h4;
// or
@include h4;
Header 5
Header Five
@extend %h5;
// or
@include h5;
Header 6
Header Six
@extend %h6;
// or
@include h6;

Text

Large Text / Pull Quote
“The quick brown fox jumps over the lazy dog”
@extend %t1;
// or
@include t1;
Medium Text / Intro Paragraph
Lorem ipsum dolor sit amet, consectetuer dipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
@extend %t2;
// or
@include t2;
Small Text
Lorem ipsum dolor sit amet, consectetuer dipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
@extend %t3;
// or
@include t3;

Default Headings with Paragraphs

h1 heading

This is a text link. This is bold text. This is italic text. This is bold and italic text.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

h2 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

h3 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est.

h4 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est.

h5 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est.

h6 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est.

Colors

  • #000000 $color-black
  • #fffffff $color-white
  • #cd3030 $color-red
  • #f6f6f6 $color-light-silver
  • #e9e9e9 $color-silver
  • #c7c3c3 $color-light-stone-gray
  • #999999 $color-medium-stone-gray
  • #6b6b6b $color-stone-gray
  • #111111 $color-charcoal
  • opacity 85% $color-transparent-dark
  • opacity 85% $color-transparent-light

Buttons

Primary CTA
Shop Now
@extend %button;
// or
@include button;
button
Shop Now
@extend %button;
@extend %button--inverted;
button button--inverted
Secondary CTA (with outline treatment)
Shop Now
@extend %button-secondary;
button-secondary
Shop Now
@extend %button-secondary;
@extend %button-secondary--inverted;
button-secondary button-secondary--inverted
Full width CTA
Shop Now
@extend %button; // or %button-secondary, etc.
width: 100%;
button button--wide
Disabled Button
Sold Out
button button--disabled
Text Button
Explore
@extend %link;
// or
@include link;
link

Icons

Also available as a mixin e.g. @include icon("icon--plus");
  • icon icon--accessibility
  • icon icon--account
  • icon icon--bag
  • icon icon--caret--down
  • icon icon--caret--left
  • icon icon--caret--right
  • icon icon--caret--up
  • icon icon--checkbox--checked
  • icon icon--checkbox
  • icon icon--close
  • icon icon--email
  • icon icon--facebook
  • icon icon--hamburger
  • icon icon--heart--filled
  • icon icon--heart--outline
  • icon icon--instagram
  • icon icon--livechat
  • icon icon--location--filled
  • icon icon--location
  • icon icon--logo
  • icon icon--map-marker
  • icon icon--minus
  • icon icon--phone
  • icon icon--pinterest--circle
  • icon icon--pinterest
  • icon icon--play
  • icon icon--plus
  • icon icon--quill
  • icon icon--radio--checked
  • icon icon--radio
  • icon icon--search
  • icon icon--share
  • icon icon--twitter
  • icon icon--youtube

Forms









Adaptive Placeholder

.adpl
.no-adpl

If you want to use placeholder text without the adaptive placeholder feature just add the "no-adpl" class directly to the form field element.

Dropdown

selectBox
selectBox
title="Size"
selectBox selectBox--inverted
Toggle Code