Primary Color Palette

This vibrant palette is friendly and approachable which aligns with Edmunds' clean and modern interface elements. As part of the global updates to simplify the color palette and better reflect the brand, below makes up the RGB, CMYK and Pantone colors for our style guideline. Colors can also be set at shades of 25%, 50% and 75%.

Primary Blue

#0072BC
C:100 M:45 Y:0 K:10
Pantone 2945 C

USAGE: Main buttons, CTAs, Text links

Secondary Blue

#00AAFD
C:70 M:10 Y:0 K:0
Pantone 2925 C

USAGE: Global navigation elements, Drop down arrows, Dynamic actions, Hover states

Green

#58A200
C:70 M:0 Y:100 K:9
Pantone 362 C

USAGE: Pricing (PP, TCO, incentives, calculators), Lead buttons, Special Offers

Yellow

#FFCC32
C:0 M:10 Y:100 K:0
Pantone 109 C

USAGE: Specs and info, Browse by, Research, Compare vehicles, Features

Orange

#FF6633
C:0 M:61 Y:97 K:0
Pantone 158 C

USAGE: Research, Secondary buttons, Inventory and results, Ratings listing

Primary Red

#BF2D37
C:0 M:100 Y:79 K:20
Pantone 187 C

USAGE: Editorial, Buying guide, Auto shows

Alert Red

#FF1929
C:0 M:97 Y:100 K:0
Pantone 485 C

USAGE: Message and form errors, negative actions, etc.

Dark Grey

#333333
C:33 M:3 Y:0 K:90
Pantone 433 C

USAGE: Page headers, Main body copy

Secondary Dark Grey

#555555
C:23 M:2 Y:0 K:77
Pantone 432 C

USAGE: Section headers, Secondary editorial, Social, Car news, Best cars list

Mid Grey

#999999
C:5 M:0 Y:0 K:45
Pantone 430 C

USAGE: Global navigation drop down

Light Grey

#CCCCCC
C:3 M:0 Y:0 K:32
Pantone 429 C

USAGE: Main Dotted and Solid hairlines

Secondary Light Grey

#E5E5E5
C:2 M:0 Y:0 K:18
Pantone 428 C

USAGE: Container Stroke and Solid hairlines

Tertiary Light Grey

#F2F2F2
C:0 M:0 Y:0 K:11
Pantone 427 C

USAGE: Background colors, Buttons

White

#F2F2F2
C:0 M:0 Y:0 K:11
Pantone 427 C

USAGE: Background colors, CTAs

Download: Photoshop RGB Swatches, RGB PSD Palette / Illustrator CMYK Swatches, CMYK AI Palette

HTML

									
										<!--#Main-colors-explained-->
<div class="asset_use">This vibrant palette is friendly and approachable which aligns with Edmunds' clean and modern interface elements. As part of the global updates to simplify the color palette and better reflect the brand, below makes up the <strong>RGB</strong>, <strong>CMYK</strong> and <strong>Pantone</strong> colors for our style guideline. Colors can also be set at shades of 25%, 50% and 75%.</div>

<div class="center_swatch">
	<!--#colors-swatches-->
	<div id="color_holder" class="color_holder">
		<div class="blue_p"></div>
		<div class="color_name">
		<span class="color_title"> Primary Blue </span> 
		<div>#0072BC<br>C:100 M:45 Y:0 K:10<br>Pantone 2945 C<p><p>USAGE: Main buttons, CTAs, Text links</div> 
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background: #00AAFD;"></div>
	<div class="color_name">
		<span class="color_title"> Secondary Blue </span> 
		<div>#00AAFD<br>C:70 M:10 Y:0 K:0<br>Pantone 2925 C<p><p>USAGE: Global navigation elements, Drop down arrows, Dynamic actions, Hover states</div>
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background: #58A200;"></div>
	<div class="color_name">
		<span class="color_title"> Green </span> 
		<div>#58A200<br>C:70 M:0 Y:100 K:9<br>Pantone 362 C<p><p>USAGE: Pricing (PP, TCO, incentives, calculators), Lead buttons, Special Offers</div>
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background: #FFCC32;">  </div>
	<div class="color_name">
		<span class="color_title"> Yellow </span> 
		<div>#FFCC32<br>C:0 M:10 Y:100 K:0<br>Pantone 109 C<p><p>USAGE: Specs and info, Browse by, Research, Compare vehicles, Features</div>
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background:  #FF6633;">  </div>
	<div class="color_name">
		<span class="color_title"> Orange </span> 
		<div>#FF6633<br>C:0 M:61 Y:97 K:0<br>Pantone 158 C<p><p>USAGE: Research, Secondary buttons, Inventory and results, Ratings listing</div>
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background:  #bf2d37;">  </div>
	<div class="color_name">
		<span class="color_title"> Primary Red </span> 
		<div>#BF2D37<br>C:0 M:100 Y:79 K:20<br>Pantone 187 C<p><p>USAGE: Editorial, Buying guide, Auto shows</div>
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background:  #FF1929;">  </div>
	<div class="color_name">
		<span class="color_title"> Alert Red </span> 
		<div>#FF1929<br>C:0 M:97 Y:100 K:0<br>Pantone 485 C<p><p>USAGE: Message and form errors, negative actions, etc.</div>
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background: #333333;">  </div>
	<div class="color_name">
		<span class="color_title"> Dark Grey </span> 
		<div>#333333<br>C:33 M:3 Y:0 K:90<br>Pantone 433 C<p><p>USAGE: Page headers, Main body copy</div>
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background: #555555;">  </div>
	<div class="color_name">
		<span class="color_title"> Secondary Dark Grey </span> 
		<div>#555555<br>C:23 M:2 Y:0 K:77<br>Pantone 432 C<p><p>USAGE: Section headers, Secondary editorial, Social, Car news, Best cars list</div>
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background: #999999;">  </div>
	<div class="color_name">
		<span class="color_title"> Mid Grey </span> 
		<div>#999999<br>C:5 M:0 Y:0 K:45<br>Pantone 430 C<p><p>USAGE: Global navigation drop down</div>
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background: #cccccc;">  </div>
	<div class="color_name">
		<span class="color_title"> Light Grey </span> 
		<div>#CCCCCC<br>C:3 M:0 Y:0 K:32<br>Pantone 429 C<p><p>USAGE: Main Dotted and Solid hairlines</div>
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background: #E5E5E5;">  </div>
	<div class="color_name">
		<span class="color_title"> Secondary Light Grey </span> 
		<div>#E5E5E5<br>C:2 M:0 Y:0 K:18<br>Pantone 428 C<p><p>USAGE: Container Stroke and Solid hairlines</div>
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background: #F2F2F2;">  </div>
	<div class="color_name">
		<span class="color_title"> Tertiary Light Grey </span> 
		<div>#F2F2F2<br>C:0 M:0 Y:0 K:11<br>Pantone 427 C<p><p>USAGE: Background colors, Buttons</div>
	</div>
</div>

<!--#colors-swatches-->
<div id="color_holder" class="color_holder">
	<div class="blue_p"; style="background: #FFFFFF;">  </div>
	<div class="color_name">
		<span class="color_title"> White </span> 
		<div>#F2F2F2<br>C:0 M:0 Y:0 K:11<br>Pantone 427 C<p><p>USAGE: Background colors, CTAs</div>
	</div>
</div>


</div>

<div class="asset_download">Download: <a href="../../downloads/edmunds_digital_color_palette.aco">Photoshop RGB Swatches</a>, <a href="../../downloads/edmunds_digital_color_palette.psd">RGB PSD Palette</a>  /  <a href="../../downloads/edmunds_print_color_palette.ase">Illustrator CMYK Swatches</a>, <a href="../../downloads/edmunds_print_color_palette.ai">CMYK AI Palette</a></div>

1080 Custom Grid System

This custom grid was developed to support our 2015 ad footprint where we introduced all IAB standard ad units (Leaderboards 728x90 and Medium Rectangles/Box Ads 300x250). Margins were added on either side of the grid for the purpose of protecting our pages from the occasional custom wallpaper ad or browser edges.

When designing to the grid just remember that everything needs to be horizontally divisible by 5 pixels, so no 37px gutters.

Download: 1080 Grid PSD

HTML

									
										<div class="asset_use">
  <p>This custom grid was developed to support our 2015 ad footprint where we introduced all IAB standard ad units (Leaderboards 728x90 and Medium Rectangles/Box Ads 300x250). Margins were added on either side of the grid for the purpose of protecting our pages from the occasional custom wallpaper ad or browser edges. <p>When designing to the grid just remember that everything needs to be horizontally divisible by 5 pixels, so no 37px gutters.</div>

<div><img src="../../images/grid.jpg" width="1200" height="1101" alt="edmunds_grid" /></div>

<div class="asset_download">Download: <a href="../../downloads/1080_custom_grid.psd">1080 Grid PSD</a></div>

Type Sample

Edmunds.com type specifications. Some special rules include, 10px padding under all body headers/H4’s, 15px padding between all paragraph breaks and custom line-height for line wrapping is 24px. Otherwise see below for details.

H1
This is a an example of an H1

Helvetica, font size: 28px, Line height: 34px, #333333
Primarly used for page headers (e.g. H1)

H2
This is an example of an H2

Helvetica, Regular, font size: 22px, Line height: 30px, #333333

H3
This is an example of an H3

Helvetica, Regular, font size: 16px, Line height: 22px, #555555

H4
This is an example of an H4

Helvetica, Bold, font size: 14px, Line height: 19px, #333333

Body Text
This is an example of Body Text. Until recently, buyers in this category had two options: the BMW 3 Series or something that wasn't as good as the BMW 3 Series. But times have changed and BMW's spot at the top of the pecking order is as unstable as it's ever been. The base engine is now a turbocharged four-cylinder, and challengers to the throne are getting exceptionally good.

Helvetica, Regular, font size: 14px, Line height: 20px, #333333

Links
Link 1

Helvetica, Regular, font size: 14px, Line height: 20px, #0072BC
Links lists: 14px/28px/24px line wrap

Bulleted Lists
• Sed rutrum est non
• Duis dapibus viverra
• Suspendisse potenti
• Nulla quis enim ut elit
• Vivamus venenatis orci

Helvetica, Regular, font size: 14px, Line height: 20px, #333333

Captions
Nam mattis adipiscing tortor; sit amet porta massa tincidunt sit amet.

Helvetica, Regular, font size: 13px, Line height: 18px, #555555

Footnotes/Fine Print
*Nam mattis adipiscing tortor; sit amet porta massa tincidunt sit amet.

Helvetica, Regular, font size: 11px, Line height: 16px, #555555

Type Rules

Type-Rules

Guideline: No widows in headlines, body copy, etc. - 2-3 words minimum on last line

Download: Type Specimen PSD / Type Rules PSD

HTML

									
										<div class="asset_use">Edmunds.com type specifications. Some special rules include, 10px padding under all body headers/H4’s,
15px padding between all paragraph breaks and custom line-height for line wrapping is 24px. Otherwise see below for details.
</div>

	<div class="font_holder">

		<div class="twoeight_px">H1<br />
		This is a an example of an H1</div>
		<h1 class="h1-explained ">Helvetica, font size: 28px, Line height: 34px, #333333 
		<br>Primarly used for page headers (e.g. H1) </h1>

		<div class="two_two">H2<br />
		This is an example of an H2</div>
		<h1 class="h1-explained ">Helvetica, Regular, font size: 22px, Line height: 30px, #333333 </h1>

		<div class="one_eight">H3<br />
		This is an example of an H3</div>
		<h1 class="h1-explained ">Helvetica, Regular, font size: 16px, Line height: 22px, #555555 </h1>
        
        <div class="one_nine">H4<br />
		This is an example of an H4</div>
		<h1 class="h1-explained ">Helvetica, Bold, font size: 14px, Line height: 19px, #333333 </h1>

		<div class="one_six">Body Text<br />
		This is an example of Body Text. Until recently, buyers in this category had two options: the BMW 3 Series or something that wasn't as good as the BMW 3 Series. But times have changed and BMW's spot at the top of the pecking order is as unstable as it's ever been. The base engine is now a turbocharged four-cylinder, and challengers to the throne are getting exceptionally good.</div>
		<h1 class="h1-explained ">Helvetica, Regular, font size: 14px, Line height: 20px, #333333 </h1>

		<div class="one_four">Links<br />
		Link 1</div>
		<h1 class="h1-explained ">Helvetica, Regular, font size: 14px, Line height: 20px, #0072BC <br>Links lists: 14px/28px/24px line wrap</h1>

		<div class="one_two">Bulleted Lists <br />
		• Sed rutrum est non <br />
		• Duis dapibus viverra <br />
		• Suspendisse potenti <br />
		• Nulla quis enim ut elit <br />
		• Vivamus venenatis orci <br /></div>
		<h1 class="h1-explained ">Helvetica, Regular, font size: 14px, Line height: 20px, #333333 </h1>

		<div class="one_one">Captions <br />
		Nam mattis adipiscing tortor; sit amet porta massa tincidunt sit amet. </div>
		<h1 class="h1-explained ">Helvetica, Regular, font size: 13px, Line height: 18px, #555555 </h1>

		<div class="one_zero">Footnotes/Fine Print<br />
		*Nam mattis adipiscing tortor; sit amet porta massa tincidunt sit amet. </div>
		<h1 class="h1-explained ">Helvetica, Regular, font size: 11px, Line height: 16px, #555555 </h1>

	</div>
   
<span class="sg-pattern-head">Type Rules</span>
    
<center><div class="spec_example_padding"><p><img src="../../images/type_rules_1.jpg" alt="Type-Rules"/><img src="../../images/type_rules_2.jpg" alt="Type-Rules"/></div></center>

<div class="asset_use"><strong>Guideline:</strong> No widows in headlines, body copy, etc. - 2-3 words minimum on last line
</div>

<div class="asset_download">Download: <a href="../../downloads/type_specimen.psd">Type Specimen PSD</a> / <a href="../../downloads/type_rules.psd">Type Rules PSD</a></div>

Horizontal Rules

Horizontal Rules (HRs) are content separators. The Dotted Rule is used to separate 'like' content, while the Solid Rules separate sections of 'different' types of content. The 'Light' solid rule can be used in cases where content is grouped within the same section.

Usage: Separates content within and outside of containers

Vertical Rules

Vertical-Rules

Usage: Follow same as above – use to designer's discretion

Download: HRs PSD, VRs PSD

HTML

									
										<div class="asset_use">Horizontal Rules (HRs) are content separators. The <strong>Dotted Rule</strong> is used to separate 'like' content, while the <strong>Solid Rules</strong> separate sections of 'different' types of content. The 'Light' solid rule can be used in cases where content is grouped within the same section.</div>

<center><div class="hair_padding"><img src="../../images/hr.png" alt="Horizontal-Rules" /></div></center>

<div class="asset_use"><strong>Usage:</strong> Separates content within and outside of containers
</div>

<span class="sg-pattern-head">Vertical Rules</span>

<center><div class="spec_example_padding"><p><img src="../../images/vr.png" alt="Vertical-Rules"  name="button_spec" id="button_spec" /></div></center>

<div class="asset_use"><strong>Usage:</strong> Follow same as above – use to designer's discretion
</div>

<div class="asset_download">Download: <a href="../../downloads/hr.psd">HRs PSD</a>, <a href="../../downloads/vr.psd">VRs PSD</a></div>

Logos

Logo assets for Edmunds.com. Marks Guideline: All logo marks (e.g. ® © ™ SM), only need to be represented the first time they are used on a page. In the case of Price Promise, if this is used in the copy multiple times on page, only the first instance needs the mark.

Download Edmunds Logo:
EPS• PNG

When the Price Promise logo is with the Edmunds logo it uses a registration mark.

Download Edmunds PP Logo:
EPS• PNG

When the Price Promise logo is alone, it uses the standard mark.

Download PP Logo:
EPS• PNG

Download: PP Guidelines Doc

HTML

									
										<div class="asset_use">Logo assets for Edmunds.com. <strong>Marks Guideline:</strong> All logo marks (e.g. ® © ™ SM), only need to be represented the first time they are used on a page. In the case of Price Promise, if this is used in the copy multiple times on page, only the first instance needs the mark.</div>

<div id="logos">

		<div class="logo_dl_container">
			<div><img src="../../images/logos/edmunds_official_logo.png"/></div>
			<div class="asset_download">Download Edmunds Logo: </br>
				<a href="../../downloads/edmunds.eps">EPS</a><span class="pipes">•</span> 
				<a href="../../downloads/edmunds.zip">PNG</a>
			</div>
		</div>

		<div class="logo_dl_container">
			<div><img src="../../images/logos/edmunds_price_promise.png"/></div>
			<div class="asset_download">When the Price Promise logo is with the Edmunds logo it uses a registration mark.<p>Download Edmunds PP Logo: </br>
				<a href="../../downloads/edmunds_price_promise.eps">EPS</a><span class="pipes">•</span>
				<a href="../../downloads/edmunds_price_promise.zip">PNG</a>
			</div>
		</div>
		
		<div class="logo_dl_container">
			<div><img src="../../images/logos/price_promise_logo.png"/></div>
			<div class="asset_download">When the Price Promise logo is alone, it uses the standard mark.<p>Download PP Logo: </br>
				<a href="../../downloads/price_promise.eps">EPS</a><span class="pipes">•</span>
				<a href="../../downloads/price_promise.zip">PNG</a>
			</div>
		</div>

</div>

<div class="asset_download">Download: <a href="../../psd/PricePromiseGuidelines.docx">PP Guidelines Doc</a></div>

Iconography

When creating designs, the Front End Development code should correspond with each icon. To view this please refer to the Iconmoon Library or the Icon Audit spreadsheet with a narrowed down set.

Illustration Style

Illustration-Style

Guidelines:
• 3 max colors (plus white or knockout) to align with flat UI
• Colors are within the Edmunds palette (or shade of - 25%, 50%, 75%)
• Illustrations are flat, no drop shadows or depth
• Concepts should be a metaphor for associated content

Download: Iconography Set or Full IcoMoon Library

HTML

									
										<div class="asset_use">When creating designs, the Front End Development code should correspond with each icon. To view this please refer to the <a href="http://static.ed.edmunds-media.com/unversioned/ng/fonts/ngc-v1/icomoon-library.html" target="_blank">Iconmoon Library</a> or the <a href="https://docs.google.com/a/edmunds.com/spreadsheets/d/1xvJQGI9cL0yyxlx5yKn9UVt2uWVCcc8E_qdAVrksCi0/edit?usp=sharing" target="_blank">Icon Audit</a> spreadsheet with a narrowed down set.</div> 

<center><div><img src="../../images/iconography.png" alt="Iconography-Set" name="button_example" id="drop-downs" /></div>
</center>
 
<span class="sg-pattern-head">Illustration Style</span>

<center><div class="spec_example_padding"><p><img src="../../images/illustration_style.png" alt="Illustration-Style"  name="button_spec" id="button_spec" /></p></div></center>

<div class="asset_use"><strong>Guidelines:</strong><br>• 3 max colors (plus white or knockout) to align with flat UI<br>• Colors are within the Edmunds palette (or shade of - 25%, 50%, 75%)<br>• Illustrations are flat, no drop shadows or depth<br>• Concepts should be a metaphor for associated content 
</div>

<div class="asset_download">Download: <a href="../../downloads/iconography.ai">Iconography Set</a> or <a href="../../downloads/IcoMoon-Ultimate.zip">Full IcoMoon Library</a></div>

Buttons

Edmunds uses four different button sizes: Extra Large, Large, Medium, and Small. Button color is specific to the task.

Blue Button (#0072BC): To initiate a general action. Pressing this will a user to another page with results (i.e. a list, a calculation, a sign up, etc.) You will use this button for most of the interactions that take place on Edmunds.com. Example verbiage: “Go”, “Select”, “View”, “Search”, “Select a Car”, “Find my Car”

Buttons

Green Button (#58A200): Used to primarily submit information (I.e. Submitting a dealer quote). Used to initiate searches.

Buttons

Orange Button (#58A200): This is a specialty button and should only be used sparingly on the site. This button should ONLY be used to begin a linear multi-step process (I.e. Building a price for a vehicle). The orange button style should be continued throughout the process. (I.e. Choosing style, color, options).

Buttons

Grey Button (#F2F2F2 w/#0072BC CTA): Used to update or modify an element on the current page a user is on. (I.e. Changing zip code, sorting a list, etc.) Placement of this button is usually atop a listing. Also used as an inactive state for the Blue Button. Grey button variations can also be control objects like forward, back, play, pause, etc. buttons (re: photo carousel). Example verbiage: “Update”, “Calculate”, “Choose”, “Sort”, “Enter”.

Specs

Buttons

Rules:• CTAs are 2-3 words maxiumum
• Buttons with more than 3 word CTAs becomes a text link
• CTAs are always Upperlower Case

Download: Button PSD (w/specs)

HTML

									
										<div class="asset_use">Edmunds uses four different button sizes: Extra Large, Large, Medium, and Small. Button color is specific to the task.   
</div>


<center><div><img src="../../images/blue_btn.jpg" alt="Buttons" name="button_example" width="574" height="406" id="button_example" /></div>
</center>

<div class="asset_use"><strong>Blue Button (#0072BC)</strong>: To initiate a general action. Pressing this will a user to another page with results (i.e. a list, a calculation, a sign up, etc.) You will use this button for most of the interactions that take place on Edmunds.com. Example verbiage: “Go”, “Select”, “View”, “Search”, “Select a Car”, “Find my Car”
</div>

<center><div><p><img src="../../images/green_btn.jpg" alt="Buttons"  name="button_spec" width="574" height="406" id="button_spec" /></p></div>
</center>

<div class="asset_use"><strong>Green Button (#58A200)</strong>: Used to primarily submit information (I.e. Submitting a dealer quote). Used to initiate searches.
</div>

<center><div><p><img src="../../images/orange_btn.jpg" alt="Buttons"  name="button_spec" width="574" height="406" id="button_spec" /></p></div>
</center>

<div class="asset_use"><strong>Orange Button (#58A200)</strong>: This is a specialty button and should only be used sparingly on the site. This button should ONLY be used to begin a linear multi-step process (I.e. Building a price for a vehicle). The orange button style should be continued throughout the process. (I.e. Choosing style, color, options).
</div>

<center><div><p><img src="../../images/grey_btn.jpg" alt="Buttons"  name="button_spec" width="574" height="406" id="button_spec" /></p></div></center>

<div class="asset_use"><strong>Grey Button (#F2F2F2 w/#0072BC CTA)</strong>: Used to update or modify an element on the current page a user is on. (I.e. Changing zip code, sorting a list, etc.) Placement of this button is usually atop a listing. Also used as an inactive state for the Blue Button. Grey button variations can also be control objects like forward, back, play, pause, etc. buttons (re: photo carousel). Example verbiage: “Update”, “Calculate”, “Choose”, “Sort”, “Enter”.
</div>

<span class="sg-pattern-head">Specs</span>
<center><div class="spec_example_padding"><p><img src="../../images/buttons_spec.jpg" alt="Buttons"  name="button_spec" width="574" height="406" id="button_spec" /></p></div></center>

<div class="asset_use"><strong>Rules:</strong>• CTAs are 2-3 words maxiumum<br>• Buttons with more than 3 word CTAs becomes a text link<br>• CTAs are always Upperlower Case</div>

<div class="asset_download">Download: <a href="../../psd/button.psd">Button PSD (w/specs)</a></div>

Social Buttons

All social buttons should follow the respective brand's color and logo usage guidelines.

Social Channel Buttons: Appearing in global footer and email footers – link open each respective channel link to a '_blank' window/tab.

Social Action Buttons: Used for simple sign-up and login for various actions on the site.

Download: Channel Buttons PSD, Action Buttons PSD

HTML

									
										<div class="asset_use">All social buttons should follow the respective brand's color and logo usage guidelines.<p> 
</div>

<center><div><img src="../../images/social-buttons.jpg"/></div>
</center>

<div class="asset_use"><strong> Social Channel Buttons:</strong> Appearing in global footer and email footers – link open each respective channel link to a '_blank' window/tab.
</div>

<center><div><img src="../../images/social-buttons2.jpg"/></div>
</center>

<div class="asset_use"><strong> Social Action Buttons:</strong> Used for simple sign-up and login for various actions on the site.
</div>

<div class="asset_download">Download: <a href="../../downloads/social-buttons.psd">Channel Buttons PSD</a>, <a href="../../downloads/social-buttons2.psd">Action Buttons PSD</a></div>

Containers

These container colors make-up usage across the site.

Red (#BF2D37)

USAGE: Editorial, Buying guide, Auto shows

Yellow (#FFCC32)

USAGE: Specs and info, Browse by (make, feature, type), Research, Compare popular vehicles, Features

Orange (#FF6634)

USAGE: Technical information, Inventory and results, Ratings listing

Green (#58A200)

USAGE: Pricing (PP, TCO, incentives, calculators)

Grey (#999999)

USAGE: Secondary editorial, Social, Car news, Best cars lists, Other

No Color Bar

USAGE: Container with tabs, Consumer reviews, SEO and editorial text

Example w/Specs

Download: Container PSD (w/specs)

HTML

									
										<div class="asset_use">These container colors make-up usage across the site.
</div>


<div class="center_swatch">
	<!--#colors-swatches-->
	<div id="color_holder" class="color_holder_1">
		<div class="blue_p_1"; style="background: #BF2D37;"></div>
		<div class="color_name_1">
		<span class="color_title"> Red (#BF2D37)</span> 
		<div>USAGE: Editorial, Buying guide, Auto shows</div> 
	</div>
</div>

	<!--#colors-swatches-->
	<div id="color_holder" class="color_holder_1">
		<div class="blue_p_1"; style="background:  #FFCC32;"></div>
		<div class="color_name_1">
		<span class="color_title"> Yellow (#FFCC32)</span> 
		<div>USAGE: Specs and info, Browse by (make, feature, type), Research, Compare popular vehicles, Features</div> 
	</div>
</div>

	<!--#colors-swatches-->
	<div id="color_holder" class="color_holder_1">
		<div class="blue_p_1"; style="background:  #FF6634;"></div>
		<div class="color_name_1">
		<span class="color_title"> Orange (#FF6634)</span> 
		<div>USAGE: Technical information, Inventory and results, Ratings listing</div> 
	</div>
</div>

	<!--#colors-swatches-->
	<div id="color_holder" class="color_holder_1">
		<div class="blue_p_1"; style="background:  #58A200;"></div>
		<div class="color_name_1">
		<span class="color_title"> Green (#58A200)</span> 
		<div>USAGE: Pricing (PP, TCO, incentives, calculators)</div> 
	</div>
</div>

	<!--#colors-swatches-->
	<div id="color_holder" class="color_holder_1">
		<div class="blue_p_1"; style="background: #999999;"></div>
		<div class="color_name_1">
		<span class="color_title"> Grey (#999999)</span> 
		<div>USAGE: Secondary editorial, Social, Car news, Best cars lists, Other</div> 
	</div>
</div>

	<!--#colors-swatches-->
	<div id="color_holder" class="color_holder_1">
		<div class="blue_p_1"; style="background: #ffffff;"></div>
		<div class="color_name_1">
		<span class="color_title"> No Color Bar</span> 
		<div>USAGE: Container with tabs, Consumer reviews, SEO and editorial text</div> 
	</div>
</div>
</div>

<span class="sg-pattern-head">Example w/Specs</span>
<center><div class="spec_example_padding"><img src="../../images/containers_animation.gif" padding-top: 5px; alt="modules"></div></center>

<div class="asset_download">Download: <a href="../../downloads/containers.psd">Container PSD (w/specs)</a>

Modal Windows

Below are examples of modal window usage on Edmunds. We most commonly use the modal for our Photo Flipper as well as for signup and zipcode forms.

Download: Photo Flipper PSD or Signup Form PSD

HTML

									
										<div class="asset_use">Below are examples of modal window usage on Edmunds. We most commonly use the modal for our Photo Flipper as well as for signup and zipcode forms.</div>

<center><div class="spec_example_padding"><img src="../../images/modal-windows.gif" alt="Modal-Windows" name="flipper_example" id="modals1" /></div></center>

<div class="asset_download">Download: <a href="../../downloads/photo-flipper.psd">Photo Flipper PSD</a> or <a href="../../downloads/signup-window.psd">Signup Form PSD</a>

Forms

Forms are set at two sizes, and match the heights set for buttons on the site. The two sizes used are Large (41px height) and Medium (34px height).

Leadform Example

leadform

Rules:
• All form fields should match button height
• Unselected form fields are contained by 1px rule, #cccccc
• Selected form fields are contained by 1px rule, #00aafd (secondary blue)
• Errored form fields are contained by 1px rule, #ff1929 (alert red)

Download: Form Field PSD or Leadform PSD

HTML

									
										<div class="asset_use">Forms are set at two sizes, and match the heights set for buttons on the site. The two sizes used are Large (41px height) and Medium (34px height).
</div>

<center><div class="spec_example_padding"><img src="../../images/forms.jpg" alt="Forms-input" name="forms_example" id="forms_example" /></div>
</center>

<span class="sg-pattern-head">Leadform Example</span>

<center><div class="spec_example_padding"><p><img src="../../images/leadform_animation.gif" alt="leadform" name="leadform_example" id="leadform_example" /></p></div>
</center>

<div class="asset_use"><strong>Rules:</strong><br>• All form fields should match button height<br>• Unselected form fields are contained by 1px rule, #cccccc<br>• Selected form fields are contained by 1px rule, #00aafd (secondary blue)<br>• Errored form fields are contained by 1px rule, #ff1929 (alert red)
</div>

<div class="asset_download">Download: <a href="../../downloads/forms.psd">Form Field PSD</a> or <a href="../../downloads/leadform.psd">Leadform PSD</a>

Drop Down Menus

As of now the FED team recommends limited customization to the drop down menus – with the reasoning that drop downs are browser dependant and would be require unique CSS per browswer.

Drop Down Example

Download: Drop Downs PSD

HTML

									
										<div class="asset_use">As of now the FED team recommends limited customization to the drop down menus – with the reasoning that drop downs are browser dependant and would be require unique CSS per browswer. 
</div>

<center><div><img src="../../images/drop_downs.jpg" alt="Drop-Downs" name="drop-down_example" id="drop-downs" /></div>
</center>

<span class="sg-pattern-head">Drop Down Example</span>

<center><div><img src="../../images/drop_down_example.gif" alt="Drop-Downs2" name="drop-down_example2" id="drop-downs2" /></div>
</center>

<div class="asset_download">Download: <a href="../../downloads/drop_downs.psd">Drop Downs PSD</a>

Video Players

Edumnds uses a thrid-party vendor called Brightcove for video player implementation across the site. This allows for customized controls and currently we are testing their NextGen player with responsive capabilities and cleaner UI.

Rules:
• Videos players should be designed without a container
• Sizes should be 16:9 ratio for full width of Main Well and Ad Well
• Main Well video size = 730x410
• Ad Well video size = 320x180
• Video thumbnail is customizable and should be saved at 730x410 to respond for all sizes
• Video active color = Secondary Blue, #00aafd

Brightcove Base Player

video_player

Notes:
• The player is in pre-launch so our FED team is customizing the UI per Video team needs
• Once ready we will launch in right rail, content pages & photo flipper
• New player is responsive and adaptive, and we can edit CSS

Download: Video Player PSD

HTML

									
										<div class="asset_use">Edumnds uses a thrid-party vendor called Brightcove for video player implementation across the site. This allows for customized controls and currently we are testing their NextGen player with responsive capabilities and cleaner UI.
</div>

<center><div><img src="../../images/VideoExample.gif" alt="Video-Player" name="button_example" id="drop-downs" /></div>
</center>

<div class="asset_use"><strong>Rules:</strong><br>• Videos players should be designed without a container<br>• Sizes should be 16:9 ratio for full width of Main Well and Ad Well<br>• Main Well video size = 730x410<br>• Ad Well video size = 320x180<br>• Video thumbnail is customizable and should be saved at 730x410 to respond for all sizes<br>• Video active color = Secondary Blue, #00aafd
</div>

<span class="sg-pattern-head">Brightcove Base Player</span>

<center><div class="spec_example_padding"><p><img src="../../images/brightcove_player.gif" alt="video_player" name="video_example" id="video_example" /></p></div>
</center>

<div class="asset_use"><strong>Notes:</strong><br>• The player is in pre-launch so our FED team is customizing the UI per Video team needs<br>• Once ready we will launch in right rail, content pages & photo flipper<br>• New player is responsive and adaptive, and we can edit CSS
</div>

<div class="asset_download">Download: <a href="../../downloads/containers.psd">Video Player PSD</a>

Tabs

General Purpose Tabs

Specs

Download: Tabs PSD

HTML

									
										<!--#Main-colors-explained-->
<div class="asset_use">General Purpose Tabs</div>
<div>
	<center><img src="../../images/tabs_pattern.png" /></center>
</div>

<span class="sg-pattern-head">Specs</span>
<center><div class="spec_example_padding"><img src="../../images/tabs_specs.png" /></div></center>


<div class="asset_download">Download: <a href="../../downloads/tabs_template.psd">Tabs PSD</a></div>

Global Navigation

Currently the global navigation is adhereing to the former 960 grid but will be updated soon. General guidelines below still apply.

Breadcrumb & Share This Page

Rules:
• Links are separated by slashes not carets
• Breadcrumb is set to 14px font size, #0072BC
• Selected links change color to #333333
• Share this Page toggle matches style & aligns with same baseline as breadcrumb
• Share buttons are standard social API shares

Download: Global Nav PSD or Breadcrumb / Share PSD

HTML

									
										<div class="asset_use">Currently the global navigation is adhereing to the former 960 grid but will be updated soon. General guidelines below still apply.
</div>

<div style="text-align: center; padding-top: 20px;"><img src="../../images/global_nav.png" alt="global navigation" /></div>


<span class="sg-pattern-head">Breadcrumb & Share This Page</span>

<div style="text-align: center; padding-top: 20px;"><img src="../../images/global_header.gif" alt="global navigation" /></div>

<div class="asset_use"><strong>Rules:</strong><br>• Links are separated by slashes not carets<br>• Breadcrumb is set to 14px font size, #0072BC<br>• Selected links change color to #333333<br>• Share this Page toggle matches style & aligns with same baseline as breadcrumb<br>• Share buttons are standard social API shares
</div>

<div class="asset_download">Download: <a href="../../downloads/global_nav.psd">Global Nav PSD</a> or <a href="../../downloads/global_header.psd">Breadcrumb / Share PSD</a></div>

Global Footer

Download: Global Footer PSD

HTML

									
										<!-- Begin Footer -->
<div style="text-align: center; padding-top: 20px;"><img src="../../images/g_footer.png" alt="global footer"></div>

<div class="asset_download">Download: <a href="../../downloads/global_footer.psd">Global Footer PSD</a></div>
<!-- End Footer -->

HTML

HTML

Helvetica, font size: 28px, Line height: 34px, #333333 Primarly used for page headers (e.g. H1)

Helvetica, Regular, font size: 22px, Line height: 30px, #333333

Helvetica, Regular, font size: 16px, Line height: 22px, #555555

Helvetica, Bold, font size: 14px, Line height: 19px, #333333

Helvetica, Regular, font size: 14px, Line height: 20px, #333333

Helvetica, Regular, font size: 14px, Line height: 20px, #0072BC Links lists: 14px/28px/24px line wrap

Helvetica, Regular, font size: 14px, Line height: 20px, #333333

Helvetica, Regular, font size: 13px, Line height: 18px, #555555

Helvetica, Regular, font size: 11px, Line height: 16px, #555555

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

Helvetica, font size: 28px, Line height: 34px, #333333
Primarly used for page headers (e.g. H1)

Helvetica, Regular, font size: 14px, Line height: 20px, #0072BC
Links lists: 14px/28px/24px line wrap