Design/Archive/Wikimedia Foundation Design


 * The agora was a central spot in ancient Greek city-states. The literal meaning of the word is "gathering place" or "assembly". The agora was the center of athletic, artistic, spiritual and political life of the city.

This document serves as a style and design specification guideline for Wikimedia Foundation projects. It is not a style guide for the MediaWiki software. This document aims to provide designers a rulebook for color usage, design patterns, and general styles.

In addition, the goals of the Agora project include:
 * Development of an easy-to-use toolkit (like Bootstrap, but for MediaWiki)
 * Development of a specialized and unique icon set

This document is by no means exhaustive, and should be considered a "permanent" work in progress.

Documentation

 * design Principles
 * design Process
 * Agora library elements and their behavior, see also earlier Patterns and components
 * Style
 * Size and layout
 * Color usage
 * Typography
 * Iconography
 * Whitespace (spacing and indentation)
 * Writing style
 * Suggested redesigns
 * How to give design feedback

Core engineering work
See /status for status updates, also see UX standardization

Agora styles
Agora adds skin-agnostic CSS styles to MediaWiki,

The CSS defines various mw-ui-* classes including
 * with many variations, such as 'mw-ui-button mw-ui-primary mw-ui-big' for a large button that will appear in blue in the Vector skin.
 * for a container with a vertical "stacked" layout
 * divs, labels and input fields in this are styled consistently
 * checkboxes and radio buttons within labels with class  align better
 * several utility classes such as

The CSS varies with the user's skin. Users with the Vector skin, which is the default for new users on WMF wikis, see:
 * colored buttons (blue for mw-ui-primary "Progressive", green for mw-ui-constructive, "Constructive" red for mw-ui-destructive "Destructive")

The CSS is available in core MediaWiki beginning with release 1.22 in the mediawiki.ui module; in 1.23 the button styles are separated into a  CSS module.

You can use context to ensure the CSS is loaded.

(AddModuleStyles because you want the CSS loaded even if JavaScript isn't running.) There may be a JavaScript Agora module, load that separately.

A newer iteration of the Agora design is implemented in the Flow discussion and collaboration system.

The CSS styles are written in the LESS stylesheet language and the ResourceLoader generates minified CSS from them on-the-fly.

More details are in Agora/Engineering.

Typography update
The Typography Update updates the Vector skin to to use a san-serif for most text, and serif fonts for headings.

This is currently a Beta feature that you can opt to enable via your Preferences.

People
This document is a product of the Design team at the Wikimedia Foundation