EZShield® Style Guide

For our partners, we offer a number of branding choices for your custom identity protection program so that we can best fit your needs.

Please reach out to your dedicated EZShield client services manager at cs@ezshield.com to view this section.

Submit

EZShield Design - Introduction

Consistency is key. This portion of our style guide helps employees and partners alike properly use EZShield colors, fonts, and other visual elements when presenting our brand or services.

Layout

Web and Print Layout Guide

Our goal is to have open and clean layouts where we primarily use white space and image driven layouts.

Print Color Swatches

The following color swatches give us an overview of our collection of colors. Please reference the sections below for more detailed information and use cases.

Primary Accent

Secondary Accents

Alert Colors

Other Print Layout Colors

Web Colors

Web Color Swatches

The following color swatches give us an overview of our collection of colors. Please reference the sections below for more detailed information and use cases.

State Colors

Green / Positive #46a34f RGB 70 163 79
Gold / Requires Attention #ef9a21 RGB 239 154 33
Red / Negative #d94332 RGB 217 67 50

Web Interface Background Colors

White / Content Background (Widgets) #ffffff RGB 255 255 255
Main Background #f8f8f8 RGB 248 248 248
White Accent / Zebra Striping #f2f2f2 RGB 242 242 242
Border / Divider Color #e5e5e5 RGB 229 229 229
EZShield Blue #2d78a3 CMYK 83 46 19 1
Dark Gray / Sidebar Background #2f343e RGB 47 52 62

Web Text Colors

Heading Text #333333 RGB 51 51 51
Paragraph Text #555555 RGB 85 85 85
Secondary Text #999999 RGB 153 153 153
Dark Background Text #7b818a RGB 123 123 123
Required Information Text #ef9a21 RGB 239 154 33

Web Headline Colors

Headlines

We use this color for most headlines.

Hex: #333Sass: $gray-headline

Main Headline

Secondary Headline

Tertiary Headline

H4 Headline

Web Text Colors

Paragraph Text

This is our body copy and paragraph text color. It should be used for large bodies of text.

Hex: #555Sass: $gray

A bad credit score can prevent you from advancing in life. You must postpone major purchases, endure high interest rates and be handicapped from making investments in your future — such as going back to school or starting your own business.

Secondary Text

We use this color for inactive copy and secondary descriptive text.

Hex: #999Sass: $gray-light

This is some inactive or secondary text that's less important than the main body copy.

Dark Background Text

This is our text color for our navigation where it is displayed on a dark background.

Hex: #7b818aSass: $gray-alt

Secure


Monitor


Restore

Text Links

This color is used for text links.

Hex: #4184B1Sass: $link-blue

This is some example paragraph text and this is a link.

Web User Messaging Colors

Required Information

We use this color to highlight important or required information to the user—such as required form fields and page errors.

Hex: #ef9a21Sass: $gold


You must enter a valid phone number.
This is a user message. It can point out an error, or provide more details.

Web State Colors

Green / Positive

This is our primary color. We use it for good news—such as having zero alerts, a good credit score, and positive buttons like purchase, open, view, etc.

Hex: #46a34fSass: $green

0

Gold / Requires Attention

This is our color for alerts. We use this color whenever the user has an alert.

Hex: #ef9a21Sass: $gold

14

Red / Negative

This is our color for threats and open cases. If the user has a threat or an open case, we message them with this color. This color is also used for negative actions like reporting a threat.

Hex: #d94332Sass: $red

2

Web Interface Colors

Dark Gray / Sidebar Background

This background color is used for our online dashboard navigation sidebar.

Hex: #2f343eSass: $gray-dark

White / Content Background (Widgets)

This background color is used in our widgets and other sections where we are displaying content.

Hex: #fffSass: $white

Main Background

This background color is used in contrast to our white background.

Hex: #f8f8f8Sass: $white-alt

White Accent / Zebra Striping

We use this color as an alternative row color in a table.

Hex: #f2f2f2Sass: $white-accent

Border / Divider Color

We use this color for our widget borders and divider lines.

Hex: #e5e5e5Sass: $gray-border

Blue / Main Marketing Site Color

This background color is for containing site elements such as headers and footers.

Hex: #2d78a3Sass: $blue

Typography

Print & Image Fonts

We use the typeface Helvetica Neue LT Std as our primary font. If unavailable for any reason, you may use Helvetica as a substitute.


More to come in this section.

Web & Mobile Fonts

We use the typeface Aktiv Grotesk Std for all of our text, on every site. If unavailable for any reason, you may use Helvetica as a substitute.


font-family: 'aktiv-grotesk-std', helvetica, arial, sans-serif;

H1 Header

This is the styling for our main headers.


h1 {
  font-weight: 300;
  font-size: 36px;
  line-height: 48px;
  color: #333;
}

h1: Main Heading

H2 Header

This is the styling for our secondary headers.


h2 {
  font-weight: 300;
  font-size: 30px;
  line-height: 34px;
  color: #333;
}

h2: Secondary Heading

H3 Header

This is the styling for our tertiary headings and form field labels.


h3 {
  font-weight: 300;
  font-size: 24px;
  line-height: 30px;
  color: #333;
}

h3: Tertiary Heading/Labels

H4 Header

This is the styling for callout headlines.


h4 {
  font-weight: 300;
  font-size: 18px;
  line-height: 24px;
  color: #333;
}

h4: Callout Heading

Paragraph Body Copy

This is the styling for body copy. We use a lighter font weight.


p {
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: #555;
}

Paragraph Body Copy: The quick brown fox jumps over the lazy dog.

Blog Post Copy

This is the styling for the body of a blog post. Longer bodies of text read better with a normal font weight.


p {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #555;
}

Paragraph Body Copy: The quick brown fox jumps over the lazy dog.

Detail Copy

This is the styling for smaller details copy.


span.details {
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: #555;
}
Detail copy: The quick brown fox jumps over the lazy dog.

Buttons

Button Styling

These are our button styles. You can choose between two versions that come in three sizes and several background colors. Border radius (rounded corners), height, text color, font size and weight, padding, etc., should not be changed. Width can change as needed by content. Button should not contain anything other than text. Text should never wrap to two or more lines.

Default Button

These are our default buttons. This is the base for all of our buttons.

Green Buttons

These are our green buttons.

Gold Buttons

These are our gold buttons. We use these for actions related to alerts.

Red Buttons

These are our red buttons. We use these for actions related to threats.

Blue Buttons

These are our blue buttons. Primarily used on our marketing sites.

Dark Gray Buttons

These are our dark buttons. These should only be used on dark backgrounds.


/* Default Button */
.btn {
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  background-color: #555555;
  color: #ffffff;
  text-align: center;
  line-height: normal;
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
}
.btn:hover {
  text-decoration: none;
  color: #ffffff;
  background-color: #333333;
}
/* Default Outline */
.btn-outline {
  border: 1px solid #555;
  background-color: #F8F8F8;
  color: #555;
}
.btn-outline:hover {
  background-color: #F2F2F2;
  color: #555;
}
/* Default Outline Subtle */
.btn-outline-subtle {
  border: 1px solid #e5e5e5;
  background-color: #F8F8F8;
  color: #555;
}
.btn-outline-subtle:hover {
  background-color: #F2F2F2;
  color: #555;
}
/* Green */
.btn-green {
  background-color: #46a34f;
  color: #ffffff;
}
.btn-green:hover {
  background-color: #3a8641;
}
/* Green Outline */
.btn-green.btn-outline {
  background-color: #f8f8f8;
  color: #46a34f;
}
.btn-green.btn-outline:hover {
  background-color: #f2f2f2;
}
/* Gold */
.btn-gold {
  background-color: #ef9a21;
  color: #ffffff;
}
.btn-gold:hover {
  background-color: #d88510;
}
/* Gold Outline */
.btn-gold.btn-outline {
  background-color: #f8f8f8;
  color: #ef9a21;
}
.btn-gold.btn-outline:hover {
  background-color: #f2f2f2;
}
/* Red */
.btn-red {
  background-color: #d94332;
  color: #ffffff;
}
.btn-red:hover {
  background-color: #bf3323;
}
/* Red Outline */
.btn-red.btn-outline {
  background-color: #f8f8f8;
  color: #d94332;
}
.btn-red.btn-outline:hover {
  background-color: #f2f2f2;
}
/* Blue */
.btn-blue {
  background-color: #285984;
  color: #ffffff;
}
.btn-blue:hover {
  background-color: #1f4465;
}
/* Blue Outline */
.btn-blue.btn-outline {
  background-color: #f8f8f8;
  color: #285984;
}
.btn-blue.btn-outline:hover {
  background-color: #f2f2f2;
}
/* Dark Gray */
.btn-darkgray {
  background-color: #2f343e;
  color: #7b818a;
}
.btn-darkgray:hover {
  background-color: #1d2127;
}
/* Dark Gray Outline */
.btn.btn-outline-dark {
  border: 1px solid #7b818a;
  background-color: #2f343e;
  color: #7b818a;
}
.btn-outline-dark:hover {
  background-color: #1d2127;
}
.visual-dark-bg {
  background-color: #2f343e;
  padding: 20px;
  text-align: center;
  min-height: 150px;
}
/* Large */
.btn-large {
  padding: 10px 25px;
  font-size: 16px;
}
/* Small */
.btn-small {
  padding: 8px 20px;
  font-size: 12px;
}
input.btn-small {
  /* adjust for input buttons */
  margin-bottom: 0;
  padding-bottom: 24px;
}