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 valueable 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.

  • OOUI (WikimediaUI theme)
    OOUI is the main 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'.
  • Download AI
  • Download ZIP

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