The Wikimedia Design Style Guide does provide principles and guidelines to help answer interaction design questions.
Its resources enable designers and developers from our communities build on top, saving valuable time. The files are provided in format of original software (here Sketch and Adobe Illustrator), and also as copy in an open format for use in license-free software.
Several listed resources are also hot linked from the related sections, all binary files are part of the GitHub repository in main 'resources' folder.
User-interface resources, which are aligning to the Design Style Guide principles are labelled “WikimediaUI”.
- WikimediaUI components overview
Sketch library features all WikimediaUI icons and colors as symbols as well and auto-notifications on official updates.
- Download Sketch
Import as Sketch library (RSS)
- Download SVG
- Collection of all “WikimediaUI” icons
The ZIP file contains all single SVGs, find them also in folder 'resources/WikimediaUI-icons-SVGs'.
- Browse Figma
- Download ZIP
WikimediaUI Base style sheet variables
For products that are technically bound to other UI libraries or frameworks, we also provide base style variables to implement a “WikimediaUI” look and feel. It includes all generalizable component like complete color palette or best-practice interaction values for animations and transitions. It is for example used for OOUI's main theme.
- Phabricator repo
- GitHub mirror