Design/Archive/Wikimedia Foundation Design/Color usage

This is a work in progress

This page describes guidelines for the use of color within projects run by the Wikimedia Foundation.

Philosophy
It should be noted that while Wikipedia (and her sister sites) are ostensibly tools for information retrieval, they should not be designed as such. Social software patterns are to be used to direct the user's attention and workflow where required.

In Wikimedia Foundation applications, the overal color palette shall generally be monochromatic greyscale for all "chrome" elements. Chrome elements are designed to float to the background of the user's consciousness and require little thought or attention.

Within interfaces, color should be used primarily for two things:
 * Attract attention to specific elements, generally affordances, and
 * Convey information to the user

Accordingly,


 * Attraction colors shall be vibrant and intense;
 * Information colors shall be weighted according to their function (e.g., a warning may be intense, while showing an 'okay' status may not be).

Note that color alone should rarely be the only indicator of a state (owing to various accessibility concerns). Texturized and pattern color is acceptable, but should be used sparingly.

General Palette


For discussion:
 * Red #CC0000
 * Dark Blue #0b41b4
 * Green #008740

Link Colors

 * Active link
 * Local link
 * External link
 * Visited Local link
 * Visited External link
 * Redlink (missing/wanted page)

Panel Color

 * Content Panel
 * Control Panel
 * Modal Overlays

Alert Colors

 * Notice
 * Warning
 * Error

Calls-to-Action

 * Primary action
 * Secondary action
 * Side-effect/Danger action - Non-recoverable activity
 * Disabled/Inactive action

Audit

 * Existing usage/coding of colors in the system