< Design Systems Team

Welcome to our "Rolodex" of helpful resources about the Wikimedia Design System, the Design Systems Team (DST), Codex, and front-end technology. These resources may be useful to you if you are onboarding, or just need a refresher.

This page is NOT for individual pieces without context (e.g., single Phabricator tasks, notes, discussion threads).

Please contribute to this page as you discover more!

🌠 = good overviews if you don't have time for all of it

General resources

Description Link Category Access
Codex demo site:
  • Using Codex
  • Contributing
  • Design Tokens
  • Components
  • Icons

🌠

 https://doc.wikimedia.org/codex/latest/ Guide Public
DST mediawiki page:
  • Mission/Vision
  • Work Streams
  • Team Members

🌠

 Design Systems Team Guide Public
DST Phabricator workboard https://phabricator.wikimedia.org/project/board/5858/ Task tracking Public
DST release timeline Design Systems Team/Release Timeline History Public
DST norms Design Systems Team/Norms Guide Public
DST processes Design Systems Team/Team Processes Guide Public
Design System Governance Model Design Systems Team/Design System Governance Model Guide Public
Vue and Codex for non-Developers Design Systems Team/Vue and Codex for non-Developers
History of user-interface libraries and frameworks in MediaWiki

🌠

 Design Systems Team/History of user-interface libraries and frameworks in MediaWiki History Public
Front-end standards group Front-end standards group Guide Public
Codex Manual Testing Guidelines Manual testing guidelines Guide Public

For designers

Description Link Category Access
Codex design library in Figma https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?node-id=1891%3A4420&t=OosUjj5MSFfqIu8w-0 Guide Public
Wikimedia Design Style Guide https://design.wikimedia.org/style-guide/ Guide Public

For developers

Description Link Category Access
Codex codebase https://gerrit.wikimedia.org/r/admin/repos/design/codex Repo Public
Using Codex in MediaWiki Codex Guide Public
Compatibility Compatibility Guide Public
Using Vue.js in MediaWiki Vue.js Guide Public
Vue.js official documentation https://vuejs.org/guide/introduction.html Guide Public
Vue Mastery tutorials https://www.vuemastery.com/ Training Public

Articles

Description Link Category Access
Diff post 2022 - Creating the Wikimedia Design System https://diff.wikimedia.org/2022/12/22/creating-the-wikimedia-design-system/ History Public
Tech blog Sept 2021: Summit on present & future Vue.js user-interface library and the design system at the Wikimedia Foundation https://techblog.wikimedia.org/2021/09/23/summit-on-present-future-vue-js-user-interface-library-and-the-design-system-at-the-wikimedia-foundation/ History Public
Tech blog Jan 2021: 2020: The Year in Vue https://techblog.wikimedia.org/2021/01/22/2020-the-year-in-vue/ History Public

Planning and presentations

Description Link Category Access
DST Roadmap - 2022-23 https://miro.com/app/board/uXjVOka6mI4=/ Guide Public
Design System Product Deep Dive - Aug 2022

🌠

 https://docs.google.com/presentation/d/16v8cl7qPIDhgvM-kReJJDayPRYSmB3j5zagAkYKS1Os/edit#slide=id.g1171d73bf25_1_318 Deck Public
DST OKRs - Aug 2022 draft https://docs.google.com/document/d/1yvqFkNtUbbjYi4G48x9oFLxUjK5FZ3oLSLqDm7E54qM/edit History DST
Front-end Pathways -May 2022 https://miro.com/app/board/uXjVO5llKW0=/ History Public
Design System Product Deep Dive - Feb 2022 https://docs.google.com/presentation/d/1T8bF35ezJzSGcfLlFmLeVfVe1zFKZCy55BfHd1bgLSs/edit#slide=id.g1171d73bf25_1_318 History WMF staff
Vue.js Developer Summit - 2021 Design Systems Team/Vue.js Developer Summit 2021 History Public
Demo tool evaluation - 2021 https://docs.google.com/presentation/d/1WqIvBvUv8fI7i4l1ID-zKOfmbfi1nbODL_7Y1T3Rtto/edit#slide=id.p Deck/History Public
Wikimedia Design System Governance Model flowchart Design Systems Team/Design System Governance Model Guide Public
DST shared Google Drive https://drive.google.com/drive/folders/0AL-RvziklGTLUk9PVA File sharing DST
This article is issued from Mediawiki. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.