Codex

Appearance

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 ​