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
 * Style
 * Size and layout
 * Color usage
 * Typography
 * Iconography
 * Whitespace (spacing and indentation)
 * Writing style
 * 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
 * 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: 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.
 * 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 (the Beta Features change to the Vector skin implements the font change)

The CSS is available in core MediaWiki in release 1.22 in the mediawiki.ui 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.

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.

We generate the CSS styles from Sass  files using Compass, see the  subdirectory. You don't need Compass to use the CSS. is to convert the module to use LESS instead of Sass.

More details are in Agora/Engineering.

November 2013

 * UX standardization effort begun; more than just the CSS, also using the Ooui toolkit.
 * Vector skin typography improvements will be available as a BetaFeatures preference.

October 2013

 * Tweaks to Agora colors and buttons (e.g. slimmer button option) in Flow (user-to-user discussions), see Flow Portal/Design/Iteration 5.
 * Add "vform" style to HTMLForm for compact vertically-stacked forms using Agora styles.

September 2013
Work progresses on new Agora design spec (see draft) incorporating the revised buttons and input focus from the Flow prototype, and more. This will involve
 * to implement this in
 * also update MobileFrontend to use it
 * eventual goal to generate desktop and mobile CSS from same LESS files.

Other work
 * Typography and left-hand nav changes in Vector skin
 * Decision to use LESS rather than Compass/sass to generate CSS. The ResourceLoader can generate CSS from LESS source files on the fly.

July 2013
Prototyping extensions to Agora design
 * Agora-style checkboxes.
 * Pau Giner designs with revised button colors and underscore on hover.
 * Flow prototype with revised buttons and bar for input focus rather than glow.

June 2013
Began Design audit, categorizing screenshots that show UX elements and/or UI inconsistencies.

May 2013
The Echo, Getting Started, and Guided Tour extensions use Agora styles.

adds a 'vform' display format to HTMLForm, a form framework used by many Special pages and extensions.

April 2013
put the Agora CSS into core MediaWiki in  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. [ Special:UserLogin?useNew=1]

builds on this to convert the Create account form to a vertical form layout, also opt-in, e.g. [ Special:UserLogin?type=signup&useNew=1]

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


 * Jared Zimmerman
 * Brandon Harris
 * Vibha Bamba
 * Pau Giner
 * May Galloway
 * Kaity Hammerstein
 * Moiz Syed