Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address,...

19
Page 1 Introduction Website The overall look and feel of the McAfee website is light and carefree. We want out customer to feel at ease. We take care of out customer not scare them. Color Palette We use a soft color palette for our pronounced symbols, like the buy now button. Secondary colors are neutral (gray) and are used to support the primary colors and deliver a soft human feeling. Imagery Our imagery depicts customers and their environments in an authentic and direct manner. Portraits of calm, confident, and intensely determined people convey the empowerment.

Transcript of Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address,...

Page 1: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 1

Introduction

WebsiteThe overall look and feel of the McAfee website is light and carefree. We want out customer to feel at ease. We take care of out customer not scare them.

Color PaletteWe use a soft color palette for our pronounced symbols, like the buy now button.

Secondary colors are neutral (gray) and are used to support the primary colors and deliver a soft human feeling.

ImageryOur imagery depicts customers and their environments in an authentic and direct manner. Portraits of calm, confident, and intensely determined people convey the empowerment.

Page 2: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 2

Caret/chevronDefinition and usage

The Caret symbol is one of the most frequently used icons across our website and application.

Page 3: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 3

Color, typography & styles

BodyR:85, G:85, B:85HEX: 555555

h1, h2, h3, h4, p, address, input, dtR:51, G:51, B:51HEX: 333333

a:linkR:0, G:153, B:255HEX: 0099FF

a:hoverR:85, G:85, B:85HEX: CC0033

a:focusR:204, G:71, B:20HEX: CC4714

GreenR:204, G:71, B:20HEX: 7BC370

body background: bg.png, repeat-x, scroll left top box-shadow: 0, 0, 15px, 4px, rgba (0, 0, 0, 0.2) font: 12px arial, helvetica, sans-serif width: 765px margin: 0, auto position: relative color: #555555

strong, b font-weight: bold

a, a:link cursor: pointer text-decoration: none color: #166494

a:hover text-decoration: none color: #CC0033

a:focus outline-width: medium outline-style: none color: #CC4714

p font-size: 0.96em margin-top: 10px font-weight: normal color: #333333

h1 font-size: 20px line-height: 1.2em margin-top: 10px color: #333333

h2 font-size: 1.32em margin-top: 0.6em font-weight: bold color: #333333

h3 font-size: 1.8em margin-top: 10px font-weight: bold color: #333333

h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333

address, input, dt color: #333333

Page 4: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 4

Home pageBlock elements

Page 5: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 5

Website backgroundBackground image and box shadow

Page 6: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 6

Header

Page 7: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 7

Home page/hero

Page 8: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 8

Product page/heroAwards and icons

Page 9: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 9

Product page/heroHover overlay

Page 10: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 10

Product page/hero Background color gradients

Page 11: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 11

Home page/carouselBackground and specifications

Page 12: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 12

Home page/testimonial Testimonial, video and download

Page 13: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 13

Home page/testimonialIcons

Page 14: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 14

Home page/footerText specifications

Page 15: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 15

Home page/footerMeasurements

Page 16: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 16

Home page/footerSign up box, subscribe button

Page 17: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 17

ButtonsBuy Now, Upgrade Now and Share

Buy Now

Share

Page 18: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 18

ButtonsChat Now, Log In

Chat Now

Page 19: Introduction · h4 font-size: 1em margin: 0.6em 0 0 font-weight: bold color: #333333 address, input, dt color: #333333. Page 4 Home page Block elements. Page 5 Website background

Page 19

IconsProduct feature, system requirements, awards and buy with confidence