Resources
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”.
Components – WikimediaUI theme
Components are the building blocks for interfaces.
- 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
- Codex
Codex is the design system for Wikimedia – the successor of the Wikimedia Design Style Guide – and provides a toolkit for building user interfaces. - Demo & Documentation
- Source Code
- OOUI (WikimediaUI theme)
OOUI is the legacy user-interface library of Wikimedia Foundation. - Demo
- Documentation
Icons
- 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
- Template for creating new conforming icons
Find specific template forms – circular, diagonal, long, square and tall – in folder 'resources/WikimediaUI-icon_template_SVG_shapes'. - Download AI
Download Sketch - Download SVG
Base style variables
-
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
Design Style Guide imagery
- Wikimedia Design Style Guide imagery
Following the “open to collaboration” principle, we also share the imagery Sketch file, with all creations by Design team for this guide. - Download Sketch
Illustrations building blocks
- Wikimedia illustrations building blocks
A set of illustrations that can be mixed and matched to communicate core principles or features. - Download Sketch
- Download ZIP of SVGs