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, ES6 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 Figma library to reuse all the design tokens that were translated into Figma styles and variables.

NPM package

See the installation and using design tokens documentation for information about how to use Codex design tokens in your application.

In MediaWiki

Learn how to use Codex design tokens in MediaWiki.

Resources

Read about the definition and structure of the Codex design tokens system
Learn how to contribute or request a new design token

Design tokens ​

Using design tokens ​

Figma ​

NPM package ​