Design Systems Team

Vision
Provide a comprehensive, reusable, extensible way to design and build front ends on Wikimedia platforms by following a universal Design Style Guide and a shared development kit that codifies the visual and experience principles and guidelines in a library of user-interface (UI) components.

Current state of front-end development

 * Many user-interface libraries used by different teams and projects
 * Redundant effort for designers and engineers
 * Inconsistent designs
 * Inconsistent standards for contribution
 * Challenging to onboard
 * UIs depend on coupled backend logic

Ideal future-state of front-end development
 * Less feature redundancy
 * Consistent user experience across all Wikimedia projects
 * Accessible and multilingual by default
 * Standardized browser and device support
 * Faster onboarding
 * Faster software upgrades
 * Systems thinking: teams make an impact outside of immediate focus area



Wikimedia Design System and Codex UI Library
The Wikimedia Design System is the place where all of the components and patterns that designers use to create products are systematically organized, in such a way that they are easy to find, modify and create new parts. The design system is grounded in a set of principles and guidelines designed with for consistency, efficiency, web accessibility and internationalization by default.

Codex is the frontend development toolkit used for implementing the Wikimedia Design Style Guide in code. Codex provides engineers with UI components that are built in JavaScript (Vue.js), with design tokens to store data for design values, and user-facing documentation.

Front-end Technology
Wikimedia's medium-term Platform Evolution plan set out to prioritize modern engineering practices, performance, and ease-of-use for contributors of varying experience levels. As a result, the Design Systems Team organized the Vue.js Developer Summit 2021 which led to the decision to adopt Vue.js as the official programming framework for MediaWiki.

Team

 * Anne Tomasevich, Senior Software Engineer
 * Bárbara Martínez Calvo, Senior User Experience Designer
 * Christopher Ciufo, Senior Product Manager
 * Eric Gardner, Senior Software Engineer
 * Lauren de Lench, Senior Technical Program Manager
 * Nat Hillard, Senior Engineering Manager
 * Roan Kattouw, Principal Software Engineer
 * Volker E., Lead User Experience Engineer, Design System and Readers Web


 * Sarai Sánchez, User Experience & Product designer (team member from Wikimedia Deutschland)

Introductory Links

 * Current Status - high-level overview of Design Systems Team workstreams
 * FAQs - frequently asked questions
 * History of user-interface libraries and frameworks in MediaWiki - how we arrived here
 * Resources - our "Rolodex" of helpful resources about the Wikimedia Design System, the Design Systems Team (DST), Codex, and front-end technology

Contribution Guidelines
For complete design and engineering contribution guidelines, please visit the Contributing section of the Codex demo site.

We welcome contributions from everyone! There are several ways to contribute:


 * Adding or commenting on tasks in our project management system, Phabricator
 * Contributing to the design process
 * Suggesting new components and design tokens
 * Writing and submitting code
 * Reviewing code
 * Updating and expanding library documentation

Contributions to Codex are covered by the Code of Conduct for Wikimedia technical spaces.