Codex is the design system for Wikimedia. Codex contains:
- Design tokens: for writing styles consistent with the Codex Design Style Guide for Wikimedia
- UI components: for building usable, accessible, translatable applications.
- Icons: a collection of icons with language and directionality variants.
- Wide-ranging support for internationalization and global usage
- Web accessibility baked in
- Comprehensive browser and device support
Read our guiding principles for details.
Usage and contributions
Visit usage to learn how to use this library.
If you'd like to contribute, head over to the contributing section to learn about ways you can contribute, our processes, and how to develop this library.
Codex is maintained by the Design Systems Team of the Wikimedia Foundation. It is designed and developed by contributors from the Wikimedia Foundation, Wikimedia Deutschland, and the Wikimedia volunteer community.
To contact us or to learn more about current and future work, visit our task tracking board and file a task or add a thread on Codex's Talk page on mediawiki.org. See also the how to stay up-to-date section.
Who we're serving
Set high accessibility, internationalization, and browser/device coverage standards
Wikimedia intends to serve everyone. We will follow Wikimedia's accessibility principles and aim to support many languages.
Codex follows MediaWiki's browser support matrix. Codex supports the subset of the “Modern” support list, with the difference being that only ES6-compatible browsers are supported. This excludes Internet Explorer 11 and Safari 9 and 10.
Components should be thoughtfully designed and developed to work across device widths.
Designed and built for the wider MediaWiki ecosystem
We intend to serve those working both within MediaWiki (core, skins, and extensions) and in the wider ecosystem, including web-based tools, static web applications, Jamstack applications, and some of our mobile apps. Platform-agnosticism will enable us to use this library as we continue expanding this ecosystem.
To keep our code flexible, we will aim to avoid entirely MediaWiki-specific components. When they can't be avoided, we will clearly denote and separate out the MediaWiki-specific parts.
Prioritize developer experience of library users
We want to make building user interfaces straightforward, fast, and enjoyable. We aim to serve users of varying experience levels and to reduce barriers to onboarding new users. When possible, we will prefer to house complexity in the library code rather than exposing it to the library user.
We work in the open and aim to provide consumers as much information as possible about what we're working on and how we're prioritizing that work.
Enable rather than enforce
The Codex maintainers welcome contributions from everyone and wish to collaboratively build resources to enable others to easily contribute to the library.
Knowledge sharing rather than knowledge silos
Contributors should have support and access to resources that allow them to understand and influence the system's workflows, methodologies, standards, and infrastructure.
Code design patterns
Composition over complexity
Smaller components are easier to understand and more reusable.
Clarity over brevity
It's better for code to be easily understandable than to be as short or as clever as possible.
Use existing patterns
Sticking to patterns established in the wider front-end community enables more people to contribute. Following consistent patterns within the library makes the code easier to write, review, and maintain.
Keep the template simple