Page MenuHomePhabricator

[Session] An introduction to Codex: the design system for Wikimedia
Closed, ResolvedPublic


Event Timeline

jhsoby added a subscriber: jhsoby.
Husky added a subscriber: Husky.
bd808 added a subscriber: bd808.

Below you may find the link attached that redirects the user to the corresponding Etherpad:

Nidiah added a subscriber: Nidiah.

Session Notes:

An introduction to Codex: the design system for Wikimedia

Date & time: Friday, May 19th at 14:30 pm EEST / 11:30 am UTC

Relevant links



Roan Kattouw
Bàrbara Martinez


Check the slide deck at
What is a design system? A collection of resuable parts that can be used on different systems
Benefits of using systems:

Reduce frustration, design faster, focus on complex problems (since the simpler ones will have been solved), allows for greater scalability and flexibility (adaptable to different languages and platforms), reduces the load on the user (only have to learn a single system once)

Codex is the new design system for Wikipedia, intended to replace other design systems and libraries.
Managed by the Design Systems Team

Elements of Codex:

Design tokens: use different colors for different meanings (e.g. red for desctructive actions, different shade of red for hover)
Assets (icons) - same library as used before
Components - building blocks for user interactions, like buttons, dialogs, etc.

Codex is available in design (figma) and in code

Figma libraries: Design tokens library, Assets library (icons, illustrations, logos), codex component library
How designers work with figma: enable the tokens & assets libraries in their projects; drag and drop components from menu and resize/tweak as necessary

How to use codex in your code
codex is build with vue.js
different usage in media wiki and outside of it (documentation needs improvement here)
components are extensively documented with code examples

Using CSS only components (non-interactive)
possible for some components but not all; check documentation

Use codex for: client side UI, server side user interfaces, all of your styles
Do not use it for: hybrid server/client-side interaces, things that appear on every page view, but you can use design tokens for these things -- and you should! The goal is to develop a consistent visual standard and ultimately depreciate other icons/styles/design systems


Using codex in mediawiki is not possible now?

    It just looks differently, not everything can be used.  (Code examples in the Codex documentation may include TypeScript and other things that can't be used in a MediaWiki context; what's important to note is that code cannot simply be copy/pasted.) There is a documentation on how to do things in mediawiki, will be added to the main documentation later.

Not include the library everywhere?

Yes, because it is slow to load, when included in too many places

Possible future hackathon project:  develop a way to convert older components & generate HTML