canmove, Confirmed users
7,088
edits
Websites/Taskforce/Proposals/Common Color Palette: Difference between revisions
Websites/Taskforce/Proposals/Common Color Palette (view source)
Revision as of 16:53, 25 April 2011
, 25 April 2011no edit summary
No edit summary |
No edit summary |
||
| (9 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
'''Color Palette''' | '''Color Palette''' | ||
''Note: this may fit in to the brand toolkit project as part of a [https://bugzilla.mozilla.org/show_bug.cgi?id=652271 visual palette guide].'' | |||
=Problem= | =Problem= | ||
[[File:Collage-of-colors.png|thumb|300px|A collage of blue headers, green buttons, shades of red, yellow, orange, and light blue. All collected at different Mozilla websites (mostly controlled by Mozilla, or believed to be).]] | [[File:Collage-of-colors.png|thumb|300px|A collage of blue headers, green buttons, shades of red, yellow, orange, and light blue. All collected at different Mozilla websites (mostly controlled by Mozilla, or believed to be).]] | ||
[[File:Collage-of-clippings.png|thumb|300px|A collage clippings from websites showing the similar but different colors used on a selection of Mozilla websites.]] | |||
Websites in the Mozilla universe often look very different from each other. Granted, these websites all have different goals and purposes. However, by using a common color palette, these different sites could have their unique look, while still be more recognizable as Mozilla sites. | Websites in the Mozilla universe often look very different from each other. Granted, these websites all have different goals and purposes. However, by using a common color palette, these different sites could have their unique look, while still be more recognizable as Mozilla sites. | ||
| Line 9: | Line 14: | ||
=Solution= | =Solution= | ||
A solution would be to develop a common color palette to be used as a basis for Mozilla's websites. As apparent in the image above, dark blue, red, orange, yellow, light blue, and green are all common colors in the Mozilla universe. Preferably 6 (or more if needed) "Mozilla Colors/Gradients" would be developed and implemented to enhance the connection between the websites in the Mozilla universe, and to strengthen the Mozilla brand. | A solution would be to develop a common color palette to be used as a basis for Mozilla's websites. As apparent in the image above, dark blue, red, orange, yellow, light blue, and green are all common colors in the Mozilla universe. Preferably 6 (or more if needed) "Mozilla Colors/Gradients" would be developed and implemented to enhance the connection between the websites in the Mozilla universe, and to strengthen the Mozilla brand. | ||
==Proposal== | |||
Below is a table of proposed colors. These colors are currently (as of February 2011) used in the "Nova" theme of Mozilla.com and [http://support.mozilla.com/army-of-awesome Army of Awesome]. | |||
(N.b., the gradients in the table below are only visible in browsers supporting -moz-linear-gradient). | |||
<table cellspacing="2" cellpadding="5" border="0" style="clear: both; width: 100%; empty-cells: show; background: #eee;"> | |||
<tr> | |||
<th style="width: 150px;">Name</th> | |||
<th style="width: 80px;">Solid</th> | |||
<th style="width: 80px;">Gradient</th> | |||
<th>Hex values</th> | |||
</tr> | |||
<tr> | |||
<td>Header Blue</td> | |||
<td style="background: #33589f; height: 40px;"></td> | |||
<td style="background: -moz-linear-gradient(270deg, #3b69b1, #2a4187);"></td> | |||
<td>Solid: #33589f<br>Gradient: #3b69b1 to #2a4187</td> | |||
</tr> | |||
<tr> | |||
<td>Aside Blue</td> | |||
<td style="background: #cce2f3; height: 40px;"></td> | |||
<td></td> | |||
<td>Solid: #cce2f3</td> | |||
</tr> | |||
<tr> | |||
<td>Link Blue</td> | |||
<td style="background: #447bc4; height: 40px;"></td> | |||
<td></td> | |||
<td>Solid: #447bc4</td> | |||
</tr> | |||
<tr> | |||
<td>Button Green</td> | |||
<td style="background: #74ba32; height: 40px;"></td> | |||
<td style="background: -moz-linear-gradient(270deg, #84c63c, #57a21f);"></td> | |||
<td>Solid: #74ba32 <br>Gradient: #84c63c to #57a21f</td> | |||
</tr> | |||
<tr> | |||
<td>Accent Red</td> | |||
<td style="background: #b41b00; height: 40px;"></td> | |||
<td></td> | |||
<td>Solid: #b41b00</td> | |||
</tr> | |||
<tr> | |||
<td>Accent Orange</td> | |||
<td style="background: #f66408; height: 40px;"></td> | |||
<td></td> | |||
<td>Solid: #f66408</td> | |||
</tr> | |||
<tr> | |||
<td>Accent Yellow</td> | |||
<td style="background: #ffbc00; height: 40px;"></td> | |||
<td></td> | |||
<td>Solid: #ffbc00</td> | |||
</tr> | |||
</table> | |||
=Scope= | |||
In discussions with David Boswell the initial proposition is to include websites on the mozilla.org domain and [[Websites/Taskforce/Proposals/Domain_Name_Strategy|websites that are planned to be moved to the mozilla.org domain]] as well as *.mozillalabs.com and *.mozillamessaging.com. | |||
In addition, the list excludes [[Websites/Taskforce/Proposals/Abandoned_Sites#Implementation|abandoned websites decided to be retired or archived]]. | |||
==Websites that should be included== | |||
''If any of these should not be included for some reason, please move the link to "Websites that should not be included" below. Please add a comment to why this is the case.'' | |||
===Sites on *.mozilla.org/*=== | |||
* https://addons.mozilla.org/ | |||
* http://air.mozilla.com/ | |||
* http://blog.mozilla.com/ -- contains various blogs with different themes | |||
* http://bonsai.mozilla.org/ | |||
* http://browserchoice.mozilla.com/ | |||
* http://build-graphs.mozilla.org/ | |||
* http://byob.mozilla.com/ | |||
* https://communitystore.mozilla.org/ | |||
* http://crash-stats.mozilla.com/ | |||
* http://creative.mozilla.org/ | |||
* https://developer.mozilla.org/ | |||
* https://doctor.mozilla.org/ | |||
* http://donate.mozilla.org/ | |||
* http://etherpad.mozilla.com/ | |||
* http://feeds.mozilla.org/ | |||
* http://firefoxlive.mozilla.org/ | |||
* http://graphs.mozilla.org/ | |||
* http://guides.mozilla.org/ | |||
* http://hacks.mozilla.org/ | |||
* http://input.mozilla.com/ | |||
* http://krakenbenchmark.mozilla.org/ | |||
* http://l10n.mozilla.org/ | |||
* http://landfill.mozilla.org/ | |||
* https://lists.mozilla.org/ | |||
* https://litmus.mozilla.org/ | |||
* https://localize.mozilla.org/ | |||
* https://mail.mozilla.org/ | |||
* http://www.mozilla.com/ | |||
* http://www.mozilla.org/ | |||
* http://www.mozillamessaging.com/ | |||
* http://mpl.mozilla.org/ | |||
* http://mxr.mozilla.org/ | |||
* http://nightly.mozilla.org/ | |||
* http://pastebin.mozilla.org/ | |||
* http://planet.mozilla.org/ | |||
* http://pulse.mozilla.org/ | |||
* http://quality.mozilla.org/ | |||
* http://releases.mozilla.org/ | |||
* http://services.mozilla.com/ | |||
* http://status.mozilla.com/ | |||
* http://store.mozilla.org/ | |||
* http://studentreps.mozilla.org/ | |||
* http://summitbook.mozilla.org/ | |||
* http://support.mozilla.com/ | |||
* http://support.mozillamessaging.com/ | |||
* http://tbpl.mozilla.org/ | |||
* http://tinderbox.mozilla.org/ | |||
* http://tools.mozilla.com/ | |||
* http://videos.mozilla.org/ | |||
* https://wiki.mozilla.org/ | |||
===Sites outside *.mozilla.org/*=== | |||
* http://www.drumbeat.org/ | |||
* http://www.mozillalabs.com/ and subdomains | |||
===Websites up for discussion for inclusion=== | |||
* http://www.bugzilla.org/ | |||
* http://www.getfirebug.com/ | |||
* http://www.getpersonas.com/ | |||
* http://www.rockyourfirefox.com/ | |||
* http://www.spreadfirefox.com/ | |||
* http://www.spreadthunderbird.org/ | |||
===Websites that should not be included=== | |||
''Websites from the list above that should not be included should be moved below. Please add a comment to why this is the case as well, e.g. "technical reasons".'' | |||
* http://viewvc.svn.mozilla.org/ (code repository browser, third-party tool. --[[User:Wenzel|wenzel]]) | |||
* http://bzr.mozilla.org/ (repository browser) | |||
* http://hg.mozilla.org/ (repository browser) | |||
* http://svn.mozilla.org/ (repository browser) | |||