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.
- Design Principles
- Design Process
- Patterns and components
- Suggested Redesigns
- How to Give Design Feedback
Code, status 
Agora adds skin-agnostic CSS styles to MediaWiki, The CSS defines various mw-ui-* classes including
mw-ui-buttonwith 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.
mw-ui-vformfor 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
- 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, green for mw-ui-constructive, red for mw-ui-destructive)
- for some page elements a font stack of "Helvetica Neue", "Helvetica", "Arial", sans-serif.
Note that many browsers and operating systems recognize "Helvetica" and will substitute a close match, often open source. Users can override this font by creating a vector.css subpage of their user page with override CSS.
The CSS will be available in core MediaWiki in release 1.22 in the mediawiki.ui module;. You can use context
->getOutput()->addModuleStyles( 'mediawiki.ui' ) to ensure the CSS is loaded.
The CSS is also available in the Agora extension, together with a test subdirectory with some static HTML pages illustrating its use, for earlier MediaWiki versions.
More details are in Agora/Engineering. All hail Munaf Assaf, and Trevor Parscal, and others who contributed!
April 2013 
put the Agora CSS into core MediaWiki in (
resources/mediawiki.ui) starting with release 1.22wmf2. It also changes the Login form to use Agora mw-ui-buttons and mw-ui-vform to produce a vertical form layout. It's opt-in for now, e.g. http://www.mediawiki.org/wiki/Special:UserLogin?useNew=1
This document is a product of the design team at the Wikimedia Foundation: