Design/Interfaces for Human Knowledge

The Visual Design Language for Wikimedia

Built in public, shaped over time, Wikimedia is human. Alive with change, present, layered, living. In motion and in progress. Our design language reflects this.

The visual design language described here is an evolution, not a departure. It grows from what has already been defined and decided, and respects the work that got Wikimedia here. But it also acknowledges that the work is never finished. This language will change as Wikimedia changes — as new environments emerge, as understanding deepens, and as the community that builds and uses these interfaces continues to shape what they become.

Introduction

Designing for Wikimedia means designing for one of the largest collective acts of human knowledge ever attempted.

Wikimedia runs on MediaWiki, built across many technologies: JavaScript, PHP, HTML/CSS, and Vue. Across those technologies, design systems vary or are absent entirely. The result is an ecosystem of interfaces shaped by different constraints, teams, and moments in time, each one a little disconnected from the rest. That fragmentation isn't a failure; rather it's what happens when something read by billions of people gets built this openly since the early 2000's.

A shared visual design language is the connective tissue between them. Not uniformity, but cohesion. A common foundation simple enough that any environment can meet it, and honest enough to work within the ones that can't fully. The goal is for Wikimedia to feel like one thing, regardless of where or how it is built.

That coherence matters because it builds trust. When someone moves through a connected experience across Wikimedia, they feel that this place has been cared for. Their time feels valued, and so does the knowledge they came to find. Wikimedia is defined by relationships: editor and reader, teacher and pupil, contributor and community, human and machine, the old and the new. A design language worth its place honors all of that.

A Language, Not a Library

This visual design language belongs to no particular system or team. It is a foundation that Codex, OOUI, and other environments draw from.

Codex may be its most complete expression. But it is an expression, not the source.

Principles of Visual Design and Graphical Decision-Making

Visual design is where philosophy becomes visible. These principles, derived from the Codex Design Principles and adapted for visual design, don't prescribe every choice, but instead orient the designer toward thoughtful considerations. They ask you to look backward at what shaped Wikimedia, outward at the people who use it, and inward at the discipline of design.

Graphical elements carry meaning, functionality, and distinction. The design language avoids ornamentation for its own sake. An element receives additional stylistic attributes only when needed to differentiate it from something similar. It honors the origins of the Internet through stylistic characteristics and honest awareness of historical design constraints.

Design with Others

We collaborate with others through means of inclusion of ideas, research sessions, and working as openly as possible.

Consider Cultural Context

People arrive at Wikimedia from every corner of the world, carrying with them the visual languages of thousands of cultures. The internet has developed its own culture too, with its own conventions of meaning, color, and form. These two worlds are sometimes in tension, sometimes in harmony. When making visual design choices, consider the full range of people who might encounter them, and what those choices might mean to each.

Honor the Internet

Wikimedia helped define the early web. That era was expressive through constraints such as 216 web-safe colors, resolution-dependent shape rendering, and HTML-limited interactivity. These weren't limitations to overcome. They were a design language of their own. Wikimedia was never meant for the printed page. It was born on a screen. When making visual design choices, honor the constraints that shaped the Internet.

Color

Wikimedia is intentionally monochromatic. Honor that. Reserve the iconic blue for links, the single most important element in the interface, and use all other colors purposefully and thoughtfully. Color communicates meaning, status, selection, and interactivity, but it cannot work alone. To meet accessible standards, changes in shape, weight, and iconography reinforce what color implies, ensuring that a status, warning, or selection is never conveyed exclusively by hue.

For Curious Humans

We welcome and consider a universal audience, striving to remove barriers to accessing knowledge which satisfies human curiosity.

Subtraction Over Addition

When something feels incomplete, the instinct is to add. Another color, another detail, another element. But refinement more often comes from removal. A simpler design choice is usually a stronger one. A simpler interface is also a more welcoming one, with fewer obstacles between a person and what they came to find. Before adding, try taking something away.

Iconography

Icons communicate meaning at a glance, so keep them simple. Restrained in roundness, light on detail, unburdened by overthought symbolism. They help users predict what will happen next, often before they consciously register why. Take directional icons for example, like how an arrow, chevron, or caret imply a response: physical movement, the expansion or collapse of an element, or forward progress. Too many icons in a single interface can create noise rather than clarity, particularly without an accompanying text label. Use them where they genuinely help, and leave them out where they don't.

Trustworthy

We design to enable the sharing and greater understanding of trustworthy knowledge, while maintaining the integrity of people's privacy.

Delight Through Craft

Trust is built in the details. When someone senses the care behind a design, they feel at home. That feeling doesn't happen by chance. It is the accumulation of intentional, considered decisions. Design with that care visibly present, and the interface becomes a place people want to return to.

Signals of Intent

Context is the primary signal for action. A labeled input field, a button at the end of a form. These tell the user what to do without additional decoration. When two elements share similar characteristics like size, color, or a label, shape becomes the differentiator. Roundness distinguishes an interactive button from a passive tag: containers, tables, and cards are sharp, while inputs and buttons carry a slight roundness to indicate they can be acted upon. Exceptions exist and should be respected, such as when an interactive card earns its roundness, and small tags naturally tend toward a fuller curve regardless of interactivity. On native mobile apps, defer to established system patterns, which may differ from the web.

Status and Interaction

Status tells a user what to do next. An error shows them how to recover, a warning asks them to pause. States set expectations in the same way. A hover, press, or focus each tells someone that something is about to happen. Communicate both clearly and through more than one channel: an icon alongside a label, intentionally low contrast to signal something is disabled, a clear but understated shift between states. Touch and keyboard users arrive at the same states differently, and design must account for both. Never rely on a single attribute alone.

Division and Place

The feeling of place comes from separation. A border grounds an element when a strong background is absent. Indentation creates hierarchy when color cannot. Space itself becomes structural. Pulling an element away from the primary text alignment is enough to signal that it deserves a person's attention. When elements appear above other content, like menus, dialogs, and toasts, use strong solid lines and overlays to create focus and establish hierarchy between layers.

Content First

We aim for content to be at the center of Wikimedia projects, and to facilitate its comprehension and use.

In Service of Content

Content is what brings people to Wikimedia, and what sends them away having learned something. Text, images, and other multimedia are the substance of every Wikimedia project. Design is in service of that substance. No matter the language, device, or context, the content should remain clear, present, and unobstructed. It is always the most important element in the interface. Every design decision should serve it. A dark overlay behind a dialog, a muted palette in dark mode. These choices exist to keep the content in focus, not the interface around it.

Typography

Content is the heart of Wikimedia. Use native operating system font families and styles, as they are optimized for legibility across devices and languages, and are immediately familiar to the people using them.

Summary

Impactful design for Wikimedia is design that serves the content, honors the user, and quietly carries the weight of something much larger than itself. That is the standard. That is the feeling we are designing toward.