E.L.F. Style Guide

Colors

$black (#000000)
Headings
Primary Body Copy
Main CTA
UI Elements
Carousel Dot Active
Social Icons Footer
$gray (#999999)
Unselected Tab Heading
Breadcrumbs
Secondary Body Copy
Review Stars on Tiles
Disabled Button
$poppy (#f26a6b)
Global Promo Message
Promo Callouts
Shopping Bag Icon Fill
Beauty Squad Icon Fill
$light-gray (#d2d2d2)
Social Icons PDP
Carousel Dot Inactive
$linework-gray (#dddddd)
Linework
Divider Lines & Borders (Forms, Drop Downs, Product Tile Outline)
$background-gray (#f2f2f2)
Footer bg color
Secondary product tile bg
$error-red (#ff0000)
Error Message Text,
Invalid Form Field Border
$light-black (#333333)
Primary Button Hover Color
$light-blue (#"C5E8E9)
Light blue background used in content color stripe
$pink (#FAE7ED)
Pink background used in content asset background colors
$mauve (#AB8281)
Mauve background used in content asset background colors
$dark-mauve (#4E2D2E)
Dark Mauve background used in content asset background colors
$white (#FFFFFF)
White text overlaid on images, Body background

Typography

Fonts

Futura Medium

@include font-title() font-weight: $font-wt-title-regular; (applied to any Futura font)

Futura Bold

@include font-title-bold() font-weight: $font-wt-title-bold; (applied to any Futura font)

Assistant Regular (default font)

@include font-reg() font-weight: $font-wt-regular; (applied to any Assistant font)

Assistant Bold

@include font-bold() font-weight: $font-wt-bold; (applied to any Assistant font)

Headings

H1 Primary Heading, Futura Medium 40px24px

@include type-heading1() <h1> .h1 .heading1

Font Family: Futura Medium

Font Size: 40px desktop | 24px mobile

Line Height: 1em

Letter Spacing: 0.1em

e.g. Page Heading, Section Heading, Product Carousel Heading

H2 Secondary Heading, Futura Medium 24px18px

@include type-heading2() <h2> .h2 .heading2

Font Family: Futura Medium

Font Size: 24px desktop | 18px mobile

Line Height: 1em

Letter Spacing: 0.1em

e.g. Section Subheading, Side Bar Heading, Checkout Section Headings (Shipping Address)

H3 Tertiary Heading, Futura Medium 18px

@include type-heading3() <h3> .h3 .heading3

Font Family: Futura Medium

Font Size: 18px

Line Height: 1em

Letter Spacing: 0.1em

e.g. Section Tertiary Heading, Other Header Elements (Modal Window Heading)

H4 Quaternary Heading, Futura Medium 16px

@include type-heading4() <h4> .h4 .heading4

Font Family: Futura Medium

Font Size: 16px

Line Height: 1em

Letter Spacing: 0.1em

H5 Quinary Heading, Assistant Bold 14px

@include type-heading5() <h5> .h5 .heading5

Font Family: Assistant Bold

Font Size: 14px

Line Height: 1em

Letter Spacing: 0.05em

Hero Primary Heading, Futura Bold 70px28px

@include type-hero1() <h1 class="hero"> .hero h1 .hero1

Font Family: Futura Bold

Font Size: 70px desktop | 28px mobile

Line Height: 1em

Letter Spacing: 0.1em

e.g. Main Feature / Hero Slot

Hero Secondary Heading, Futura Medium 40px24px

@include type-hero2() <h2 class="hero"> .hero h2 .hero2 @include type-caro-heading() .caro-heading

Font Family: Futura Medium

Font Size: 40px desktop | 24px mobile

Line Height: 1em

Letter Spacing: 0.1em

e.g. Secondary Hero Headings, Carousel Headings (No Tabs)

Hero Tertiary Heading, Futura Bold 18px14px

@include type-hero3() <h3 class="hero"> .hero h3 .hero3

Font Family: Futura Bold

Font Size: 18px desktop | 14px mobile

Line Height: 1em

Letter Spacing: 0.1em

e.g. -Trend Alert- in Homepage

Carousel Tab Title, Assistant Bold 20px16px

 

Disabled


@include type-caro-tab() .caro-tab

Font Family: Assistant Bold

Font Size: 20px desktop | 16px mobile

Line Height: 1em

Letter Spacing: 0.05em

Body Text

Paragraph Text, Assistant Regular 14px

@include type-paragraph1() <p> .p .p1 .paragraph1

Font Family: Assistant Regular

Font Size: 14px

Line Height: 20px

Letter Spacing: 0.025em (default)

PDP: Product Name, Futura Medium 24px18px

@include type-pdp-name() .pdp-name

Same as Heading 2

Font Family: Futura Medium

Font Size: 24px desktop | 18px mobile

Line Height: 1em

Letter Spacing: 0.1em

PDP: Product Description, Assistant Regular 14px

@include type-pdp-description() .pdp-description

Same as Paragraph 1

Font Family: Assistant Regular

Font Size: 14px

Line Height: 20px

Letter Spacing: 0.025em

PDP: Attribute Title, Assistant Bold 14px

@include type-pdp-attr-title() .pdp-attr-title

Font Family: Assistant Bold

Font Size: 14px

Line Height: 20px

Letter Spacing: 0.05em

Text Transform: uppercase

e.g. Color, availability, etc.

PDP: Attribute Name, Assistant Regular 14px

@include type-pdp-attr-name() .pdp-attr-name

Font Family: Assistant Regular

Font Size: 14px

Line Height: 20px

Letter Spacing: 0.025em

e.g. Color, availability, etc.

PDP: Price, Assistant Bold 24px18px

@include type-pdp-price() .pdp-price

Font Family: Assistant Bold

Font Size: 24px desktop | 18px mobile

Letter Spacing: 0.05em

PDP: Strikethru Price, Assistant Regular 24px18px

@include type-pdp-strikethru-price() .pdp-strikethru-price

Font Family: Assistant Regular

Font Size: 24px desktop | 18px mobile

Letter Spacing: 0.025em

PDP: Sale Message, Assistant Bold 16px14px

@include type-pdp-sale-msg() .pdp-sale-msg

Color: $poppy (#f26a6b)

Font Family: Assistant Bold

Font Size: 16px desktop | 14px mobile

Letter Spacing: 0.05em

Text Transform: uppercase

PDP: Accordion Title, Assistant Bold 14px

@include type-pdp-tab-title() .pdp-tab-title

Font Family: Assistant Bold

Font Size: 14px

Letter Spacing: 0.05em

Category Browse Title, Futura Medium 40px24px

@include type-cat-browse-page-title() <h1> .cat-browse-page-title

Same as Heading 1

Font Family: Futura Medium

Font Size: 40px desktop | 24px mobile

Line Height: 1em

Letter Spacing: 0.1em

e.g. Page Heading, Section Heading, Product Carousel Heading

Paragraphs

Paragraph Body Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Etiam quis erat tincidunt, posuere mauris ut, bibendum massa. Nullam rhoncus, velit vitae posuere dapibus, lectus lorem suscipit ligula, id convallis ex justo quis urna. This is a link within a paragraph. Morbi ullamcorper non arcu vel ornare. Integer elementum, erat et bibendum tristique, neque dui sollicitudin risus, et facilisis felis augue vitae arcu. Maecenas ut mauris semper, gravida ante a, viverra diam. Sed sed lectus at velit aliquet aliquet non rhoncus dui. Curabitur tristique lectus eros, in pulvinar odio rhoncus nec. Pellentesque ornare lobortis velit, in sagittis metus ultricies id. Integer vitae pretium felis. Maecenas dignissim gravida lacinia.

Font Family: Assistant Regular

Font Size: 14px

Line Height: 20px

Letter Spacing: 0.025em (default)

Lists

Unordered List

  • Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Item 2 Ipsum dolor sit amet, consectetur adipiscing elit lorem.
  • Item 3 Dolor sit amet, consectetur adipiscing elit lorem ipsum.
  • Item 4 Sit amet, consectetur adipiscing elit lorem ipsum dolor.
.bulleted-list <ul class="list">

Default Font Specs: paragraph1

List Style Type: disc

Top Padding: 6px (to create a perceived line-height of 26px)

Ordered List

  1. Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Item 2 Ipsum dolor sit amet, consectetur adipiscing elit lorem.
  3. Item 3 Dolor sit amet, consectetur adipiscing elit lorem ipsum.
  4. Item 4 Sit amet, consectetur adipiscing elit lorem ipsum dolor.
.numbered-list <ol class="list">

Default Font Specs: paragraph1

List Style Type: decimal

Top Padding: 6px (to create a perceived line-height of 26px)

List Using Custom Markup

Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Item 2 Ipsum dolor sit amet, consectetur adipiscing elit lorem.

Item 3 Dolor sit amet, consectetur adipiscing elit lorem ipsum.

Item 4 Sit amet, consectetur adipiscing elit lorem ipsum dolor.

<div class="bulleted-list">
    <p class="list-item"></p>
    <p class="list-item"></p>

Forms

Input Fields (options and variations)

Optional caption text in form definition
Optional caption text in markup

Selects Boxes, Radios, and Checkboxes

optional caption for checkbox

Using custom markup

Secondary Input Field Style

Optional caption text in form definition

Buttons

Button Types


<a class="button">

<button> <a class="button"> @include button()

Assistant Bold 14px

Button Height: 40px

Button Width: auto

Button Max Width: 340px

Side Padding: 30px

Text Color: $white

Text Color: $white

Border Color: $black

Border Color: $light-black

Background Color: $black

Background Color: $light-black


class "secondary"

<button class="secondary"> <a class="button secondary"> @include secondaryButton()

Assistant Bold 14px

Button Height: 40px

Button Width: auto

Button Max Width: 340px

Side Padding: 30px

Text Color: $black

Text Color: $white

Border Color: $black

Border Color: $black

Background Color: $white

Background Color: $black


"tertiary"

<button class="tertiary"> <a class="button tertiary"> @include tertiaryButton()

Assistant Bold 14px

Button Height: 40px

Button Width: auto

Button Max Width: 340px

Side Padding: 30px

Text Color: $white

Text Color: $white

Border Color: $white

Border Color: $white

Background Color: transparent

Background Color: rgba($white, 0.4)


class "quaternary"

<button class="quaternary"> <a class="button quaternary"> @include quaternaryButton()

Assistant Bold 14px

Button Height: 40px

Button Width: auto

Button Max Width: 340px

Side Padding: 30px

Text Color: $black

Text Color: $black

Border Color: $black

Border Color: $black

Background Color: transparent

Background Color: rgba($white, 0.3)

Text Button

The following is a button rendered like a normal paragraph link. This can be implemented with the following markup:

<button class="button-text"></button>

Inherits font from parent in most cases

Text Color: $link-color ($black)

Text Decoration: $link-decor (underline)

Text Decoration: $link-hover-decor (none)

Button Variations (can be applied to any button type)

Large (ex: Add To Cart)

class="large"
class="secondary large"

<button class="[type] large"> @include largeButton() <a class="button [type] large">

Assistant Bold 14px

Button Height: 40px

Button Width: 340px

Button Max Width: 100%

Minimum Side Padding: 30px

UI Elements

Accordions

HTML: see markup in ISML

SCSS: @include accordion($black, $header-nav-border, $white)

Click Me To Expand The Div Below Me

I will expand when my parent div is clicked

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

HTML: class="expand-down"

Hover Over Me To Expand

I will expand when my parent div is clicked

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

HTML: class="expand-down expand-on-hover"

Click Me To Expand (with arrow)

I will expand when my parent div is clicked

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

HTML: class="expand-down-with-arrow"

Hover Over Me To Expand (with arrow)

I will expand when my parent div is clicked

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

HTML: class="expand-down-with-arrow expand-on-hover"

Carousels

Full-Bleed Banner caro

HTML: class="full-bleed-width"

or

SCSS: @include full-bleed-width()

Light dots

HTML: class="slick-light-ui"

or

JS: dotsClass: 'slick-dots light-dots',

Overlaid dots

class="slick-overlay-dots slick-light-ui"

or

JS: dotsClass: 'slick-dots overlaid light-dots',

Caro showing a partial reveal of the next tile up

In the slick carousel init options, use variableWidth: true and set multiple breakpoints to control the number of dots visible at any given viewport. See styleguide.js "style-guide-caro4"

Small one-slide carousel

Changes between light dots to dark dots responsively (at 768px) using the slick 'dotsClass' option.

below 768px: dotsClass: 'slick-dots light-dots',

above 768px: dotsClass: 'slick-dots',

Modal Dialogs

Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The button below is added directly in the HTML <div>. Explicitly giving it a class name of "close-button' will make it function to close the dialog.

Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The button below is added in JS. Assigning it a 'click' property value of function() { $(this).dialog( "close" ); } will make it function to close the dialog.

The class dialogClass: 'dark-titlebar' can also be added to change the titlebar bg to black and the title text color (if a dynamic title exists) to white.

You could also achieve this with the added class of 'light-titlebar-text' to keep the titlebar background transparent.

Paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

If you do not specify a title="" attribute in the dialog div, or a title: '', option in the dialog.open parameters object, no title will be rendered, which will effectively shift the body contents of the dialog up a few pixels to reduce the extra top-margin of having an empty (but existing) titlebar.

This dialog is assigned the property dialogClass: 'has-banner', which removes the built-in padding around the dialog content, and positions at the top, allowing a content banner image or other "full-bleed" images to be used. Note that the content banner should be given the class name "dialog-banner".

Inner content like paragraphs and buttons will need to be explicitly assigned paddings, margins, etc.

You can string classes together in this property as well, ex: 'has-banner light-titlebar-text'

To launch a lightbox from within a content asset, you can use the global classname open-lightbox, which will find the next instance of an element in the DOM with the classname of "lightbox" and open it into a jQuery dialog.

Tooltips

Box Style Divs with Carat Tips

Control which direction the peak is pointing with the mixin parameter $pointing. Accepted values are "up" (default if undefined), "down", "left", or "right".

Control the absolute positioning of the peak with mixin parameters $top, $bottom, $left, or $right.

Define the background color and borders with the parameters $bg-color and $borders.

There's a 7px padding applied to the inner content area by default, to account for any overlap with the peak shape.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Etiam quis erat tincidunt, posuere mauris ut, bibendum massa.

Example: @include carat-box($left: 33%)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nisi nisl, sed posuere arcu facilisis quis. Etiam quis erat tincidunt, posuere mauris ut, bibendum massa.

Example: @include carat-box($pointing: "left", $top: 30px, $bg-color: $gray, $borders: 1px solid $gray)

Content Styling

Heros Banners

Hero Banner with 100% width

Hero H1

Hero H2

Hero H3

Hero paragraph

Defaults to 100% width. Do not implicitly define this in the stylesheet, or it may override full-bleed styles (see below).

Hero Banner with Full-Bleed Width

CSS Hack to break a div out of a bounding container, as long as it is centered in the page (left/right margins and paddings are equal).

In ISML:   class="full-bleed-width"

In SCSS:   @extend %full-bleed-width;

In SCSS:   @include full-bleed-width;

Content Asset Clasname-Driven Styling

Viewport visibility control via classname

desktop-only or desktopHidden below 768px

desktop-tabletHidden below 480px

tablet-onlyOnly visible from 480px to 767px

mobile or mobile-onlyHidden above 767px

Direct div positioning control

Using flex box

NOTE: These positioning styles only apply in the desktop viewport (768px and above). Mobile will always assume banner-text to be centered in the container.

Width control: just append '-25', '-33', '-50-', '-66', or '-75' to the end of the class name

NOTE: These width styles only apply in the desktop viewport (768px and above). Mobile will always assume banner-text to be full-width.

Using floats

float-left
float-right
float-none

Direct text alignment control

text-left

text-center

text-right

Direct text styling control

bold

no-bold

title-font

title-bold

italic

no-italic

uppercase

normalcase

underline

no-underline

Direct text color control

dark-text (#000)

light-text (#FFF)

black-text (#000)

gray-text (#999)

poppy-text (#f26a6b)

red-text (#f26a6b)

light-gray-text (#D2D2D2)

linework-gray-text (#DDD)

background-gray-text (#F2F2F2)

error-red-text (#F00)

light-black-text (#333)

light-blue-text (#C5E8E9)

pink-text (#FAE7ED)

mauve-text (#AB8281)

dark-mauve-text (#4E2D2E)

white-text (#FFF)

Direct background color control

black-bg (#000)

light-black-bg (#333)

red-bg (#f26a6b)

dark-bg (#D2D2D2)

gray-bg (#F2F2F2)

light-bg (#FFF)

light-blue-bg (#C5E8E9)

pink-bg (#FAE7ED)

mauve-bg (#AB8281)

dark-mauve-bg (#4E2D2E)

white-bg (#FFF)

Iconography

Logo

logo

SVG Sprite Icons

ISML Syntax:

<issvghelper icon="icon-name"/>

Content Asset Syntax:

<svg class="icon icon-name svg-icon-name-dims"><use xlink:href="#icon-name"/></svg>

Header Icons

search
heart
cart-icon

Footer Icons

Global UI

heart
heart-filled
close
arrow-down
arrow
arrow-left
arrow-right
arrow-small-down
arrow-small
send
mail
filter-icon
checkmark
radio-dot
back-to-top
feedback
play-button
play-button-alt
beauty-squad
tool-tip
chat-pdp
facebook-blue
google-color
heart-filled
close
arrow-down
arrow
mail
track-package
gift-cards
store-locator
beauty-squad

Social Icons (PDP)

My Account Dashboard

my-account
payment
addresses
order-history

Fluid Grids

As needed, custom page styling should extend the fluid grid system developed for this site. This Style Guide also utilizes this system.

Please see fluid grid examples here.