Elkay.com Style Guide

Fonts

Fonts should be loaded with typekit. Any environment (development, staging, production, etc.). In case the typekit CDN does not load, google fonts api may be called on.

The primary font is Open Sans.

Weights & Styles:
Light - 300
Regular - 400
Italic
Bold - 700

Per Marketing:
Open Sans is the preferred headline font as it provides a good range of weights that can be used for sidebar and very small table/caption copy. This typeface is to be used for both print and web applications.
Arial is a serif backup for Web when Open Sans is unavailable.

The secondary font (rarely used) is Arno Pro.

Weights & Styles:
Regular - 400
Semibold - 600

Per Marketing:
Arno Pro is the preferred typeface for long-form body copy. It is not intended to be used in large sizes. This typeface is to be used for both print and web applications.
Georgia is a serif backup for Web when Arno Pro is unavailable. 

<link rel="stylesheet" href="https://use.typekit.net/fil7pxl.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

font-family: "open-sans", 'Open Sans', Arial, sans-serif;
('Open Sans' is for the google fonts api fall-back)

font-family: "arno-pro", Georgia, serif;

CSS for Text Elements

Body CSS

body {
    background-color: #fff;
    color: #75787B;
    font-family: "open-sans", 'Open Sans', sans-serif;
    font-size: 18px;
    line-height: 1.4;
}

Body Copy Text

Lorem ipsum dolor sit amet, sit te possim detracto, wisi aliquid theophrastus ex est, vide novum impedit eos eu. Sit te suas alterum argumentum, in vix summo inermis. Sit posse saepe ne, in mei tamquam aliquid inciderint. Quo in expetendis dissentias inciderint.

An vim numquam recteque, esse euismod officiis id nam, qui no eligendi singulis sensibus. Modo prima indoctum ei nam. Nec id minim dicunt, quando facilis ei quo. Postea feugiat deserunt id eos, ad iusto ludus mentitum pri. Ex est errem abhorreant, ut nec percipitur delicatissimi.

Lists

  • Unordered List Item
  • Unordered List Item
  1. Ordered List Item
  2. Ordered List Item
p, li {
font-size: 1rem;
}

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.6rem; }
h5 { font-size: 1.3rem; }
h6 { font-size: 1.1rem; }
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.1;
}
h1, h2, h3 {    
    margin-top: 20px;
    margin-bottom: 10px;
}
h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

Colors

Elkay.com uses a subset of the color palette established by marketing for all Elkay brands.

PRIMARY COLORS
Color Name Class Name Hex Value
Elkay Gray elkayGrayText
elkayGrayBG		 #75787B
elkayGrayBGDark #525557
elkayGrayBGLight #919599
elkayGrayBGBright #dae0e5
Elkay Navy Blue elkayNavyBlueText
elkayNavyBlueBG 		#165c7d
elkayNavyBlueBGDark #15425c
elkayNavyBlueBGLight #2473a0
Aqua Blue aquaBlueText
aquaBlueBG 		#3eb1c8
aquaBlueBGDark #3393a6
aquaBlueBGLight #5ccfe8
SECONDARY COLOR
Color Name Class Name Hex Value
Soft Green softGreenText
softGreenBG 		#6b9560
softGreenBGDark #587a50
softGreenBGLight #8cc27e
ACCENT COLOR
Color Name Class Name Hex Value
Accent Orange accentOrangeText
accentOrangeBG 		#e87722
accentOrangeBGDark #c4661d
accentOrangeBGLight #fa9b52
WHITE
Color Name Class Name Hex Value
White whiteText
whiteBG 		#fff

CTA Buttons and Links

SVG icons come from an SVG file.*
If SVG is not possible, transparent png-alpha served up by Scene 7.

.cta has the icon to the left, <button> and .button has the icon to the right.

Padding 10 pixels.
Right padding 50 pixels to allow for button icon.
Left padding 50 pixels to allow for xta icon.

CSS for button styling: 
/*svg CTA & button */
button,
a.button,
a.cta {
    position: relative;
    display: inline-block;
    width: auto; 
    text-decoration: none;
    font-size: 1.5em;
}
button,
a.button {
    padding: 10px 50px 10px 10px;
}
a.cta {
    padding: 10px 10px 10px 50px;
}
/*use svg icon*/
button svg,
a.button svg,
a.cta svg {
    position: absolute;
    top: calc(50% - 15px);
    height: 30px;
    width: 30px;
    fill: currentColor;
}
button svg,
a.button svg {
    right: 10px;
}
a.cta svg {
    left: 10px;    
}
button.ghostLightBG,
a.button.ghostLightBG,
a.cta.ghostLightBG {
    border: 2px solid #75787B;
    color: #75787B;
    background-color: transparent;
}
button.ghostLightBG:hover,
a.button.ghostLightBG:hover,
a.cta.ghostLightBG:hover,
button.ghostLightBG:active,
a.button.ghostLightBG:active,
a.cta.ghostLightBG:active {
    border: 2px solid #165c7d;
    color: #165c7d;
    background-color: transparent;
}
button.ghostDarkBG,
a.button.ghostDarkBG,
a.cta.ghostDarkBG {
    border: 2px solid #fff;
    color: #fff;
    background-color: transparent;
}
button.ghostDarkBG:hover,
a.button.ghostDarkBG:hover,
a.cta.ghostDarkBG:hover,
button.ghostDarkBG:active,
a.button.ghostDarkBG:active,
a.cta.ghostDarkBG:active {
    background-color: #fff;
    color: #15425c;
}
No Styling, default link and icon color.
Button Class 
<a class="button">
    Button
    <svg viewBox="0 0 300 300">
        <use xlink:href="#arrow_open"></use>
    </svg>
</a>
Navy Blue background, white text (with white fill for the svg icon)
Button Class 
<a class="button whiteText elkayNavyBlueBG">
    Button
    <svg viewBox="0 0 300 300">
        <use xlink:href="g#arrow_open"></use>
    </svg>
</a>
Ghost Button
Light Background
<button class="ghostLightBG">
    Button
    <svg viewBox="0 0 300 300">
        <use xlink:href="#arrow_open"></use>
    </svg>
</button>
Ghost Button
Dark Background
<button class="ghostDarkBG">
    Button
    <svg viewBox="0 0 300 300">
        <use xlink:href="#arrow_open"></use>
    </svg>
</button>
Brochures Icon CTA
Brochures 
<a href="#" class="cta">
    <svg viewBox="0 0 300 300">
        <use xlink:href="#brochures"></use>
    </svg>
    Brochures
</a>
PDF Icon CTA
PDF File 
<a href="#" class="cta elkayGrayText">
    <svg viewBox="0 0 300 300">
        <use xlink:href="#pdf_file"></use>
    </svg>
    PDF File
</a>
Mail Icon CTA
Email Link 
<a href="#" class="cta">
    <svg viewBox="0 0 300 300" class="elkayNavyBlueText">
        <use xlink:href="#mail"></use>
    </svg>
    Email Link
</a>
Map Marker Icon CTA
Map Marker 
<a href="#" class="cta">
    <svg viewBox="0 0 300 300" class="softGreenText">
        <use xlink:href="#map_marker"></use>
    </svg>
    Map Marker
</a>

* In order for the external svg to work properly in IE, the svg file is called using Ajax. Including it as an <img> does not work in any version of IE. Please note, the file must come from the same domain!

For more information: https://css-tricks.com/ajaxing-svg-sprite/

<script>
$.get('/images/svg/icons.svg', function(data) {
  var div = document.createElement('div');
  $(div).addClass('nodisplay');
  div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
  document.body.insertBefore(div, document.body.childNodes[0]);
});
</script>

Forms

Input fields should be full width, but no wider than 600 pixels.





Padding

Classes loosely based on Bootstrap 4's padding classes.

p for padding

 

t - for classes that set padding-top
b - for classes that set padding-bottom
l - for classes that set padding-left
r - for classes that set padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a padding on all 4 sides of the element

 

With 5 pixel increments up to 50:
-0 -5 -10 -15 -20 -25 -30 -35 -40 -45 -50

For sites in AEM based on Elkay Backbone:
-0px -5px -10px -15px -20px -25px -30px -35px -40px -45px -50px

With 1% increments up to 10%:
-1pct -2pct -3pct -4pct -5pct -6pct -7pct -8pct -9pct -10pct

A few examples:

p-15
pt-35
px-mob-50
py-20
p-1pct
pt-5pct
px-3pct
py-tab-2pct