Pattern Lab

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>