Wikimedia Foundation Design
This style guide is outdated. Current styles can be seen at https://tools.wmflabs.org/styleguide/.
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:
- Develop Mediawiki.ui an easy-to-use UI and behavior toolkit (like Bootstrap, but for MediaWiki)
- Develop Wikifont a specialized and unique icon set delivered as a font
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/Mediawiki.ui library elements and their behavior , see also earlier Patterns and components
- Suggested redesigns
- How to give design feedback
- Project status and roadmap a @ Foundation User Experience Trello board
Core engineering work[edit | edit source]
See MediaWiki.ui Trello board for status of individual controls.
Agora / Mediawiki.ui styles[edit | edit source]
Explore the Agora styles in the MediaWiki desktop living style guide.
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.
People[edit | edit source]
This document is a product of the Design team at the Wikimedia Foundation