Wikimedia Foundation Design
This styleguide is outdated. Current styles can be seen at https://tools.wmflabs.org/styleguide/.
- 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[edit | edit source]
- design Principles
- design Process
- Agora library elements and their behavior , see also earlier Patterns and components
- Suggested redesigns
- How to give design feedback
Core engineering work[edit | edit source]
Agora styles[edit | edit source]
Explore the Agora styles in the MediaWiki desktop living style guide.
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-constructive mw-ui-big' for a large green button for the completed action of a form such as "Submit", and 'mw-ui-button mw-ui-destructive mw-ui-quiet' for a less obvious button that appears red on hover and click for a destructive action such as "Cancel".
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 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
mediawiki.ui.button CSS module.
You can use context
->getOutput()->addModuleStyles( 'mediawiki.ui' ) to ensure the CSS is loaded. If you only need the buttons, add only the
Now we need UX standardization
Typography refresh[edit | edit source]
The Typography refresh 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[edit | edit source]
This document is a product of the Design team at the Wikimedia Foundation