Codex
On this page

Design tokens ​

Design tokens are the smallest stylistic pieces of our design system.

We use tokens:

  • To maintain a scalable and consistent visual system for user-interface (UI) development in a single source of truth instead of hard-coded style values or single-use variables
  • To ensure that only systematic decisions are used to style components and features

Tokens can be used in several formats: CSS custom properties, Less variables, SCSS variables, and JSON files.

Each token category has a demo page where you can see each token's name and value, a demo of the token, and information about where the token value comes from.

Using design tokens ​

Figma ​

Enable the Codex design tokens Figma library in your Figma projects to use all the design tokens that were translated into Figma styles.

NPM package ​

Learn how to use Codex design tokens via the @wikimedia/codex-design-tokens package.

In MediaWiki ​

Learn how to use Codex design tokens in MediaWiki.

Resources ​