A favicon of Codex

Codex

Build consistent, accessible, and user-friendly interfaces for Wikimedia projects. Access a comprehensive library of components and guidelines.

Visit Codex
A screenshot of CodexVisit

Codex is the official design system for Wikimedia, providing a comprehensive toolkit to build consistent, accessible, and engaging user experiences across its vast ecosystem of projects. It serves as the single source of truth for design, ensuring that platforms like Wikipedia, Wikimedia Commons, and others share a unified visual and interactive language.

Key benefits of using Codex include:

  • Consistency: Establishes a common set of design principles, components, and patterns, leading to a more predictable and harmonious user experience across all Wikimedia sites.
  • Accessibility: Prioritizes inclusivity by embedding accessibility best practices directly into its components and guidelines, making information available to everyone.
  • Efficiency: Offers pre-built, reusable UI components and clear documentation, significantly speeding up the design and development workflow for contributors.
  • Collaboration: Fosters better collaboration between designers, developers, and the wider Wikimedia community by providing a shared vocabulary and set of tools.
  • Brand Cohesion: Reinforces the Wikimedia identity by ensuring a cohesive look and feel, building trust and recognition.

Codex typically includes resources such as a comprehensive component library, design tokens (for colors, typography, spacing), detailed usage guidelines, and accessibility documentation to support its adoption and implementation.

Categories:
Share:

Similar to Codex:

Design cohesive products & digital experiences.
CompanyFigma+3 more
Build consistent digital products and experiences with an open-source system offering working code, design tools, reusable components, and UI guidelines.
Build accessible React UIs with speed and consistency.
FigmaReact
Develop React applications faster with a library of simple, modular, and accessible UI components. Build high-quality web apps and design systems efficiently.
Craft inclusive web apps with a proven design system.
CompanyFigma+1 more
Build intuitive, accessible web experiences at scale. Access UI guidelines, React components, design resources, and dev tools for faster, inclusive development.

Command Menu