Design Systems Team/Projects/Design and define design tokens

Project Overview & Background
Design tokens represent systematic design decisions upon which the style and behavior of components and patterns are exclusively based. In the words of the W3C Design tokens community group: “Design tokens are a methodology that allows sharing stylistic pieces of a design system at scale”.

Over the course of a few years, architectural decisions on the use of centralized style(sheet) variable definitions (starting as WikimediaUI Base variables, now referred to as design tokens) have accumulated in a number of tasks and places in MediaWiki and Wikimedia resources.

Goals of design tokens

 * Consistent values in development
 * Set of predefined, centralized, limited and traceable design decisions
 * Single source of truth for design to development handover

A nice write-up on design tokens can be found at CSS-Tricks, featuring this summary from term creator Jina Anne:"With design tokens, you can capture low-level values and then use them to create the styles for your product or app. You can maintain a scalable and consistent visual system for UI development."

Timeline
Project phases come from Wikimedia Foundation's Inclusive Product Development playbook.


 * Codex design tokens* in MediaWiki core are enabled as of v1.41.0 via


 * Codex design tokens are now available for use in MediaWiki as Less variables - Codex


 * Codex design tokens published to Figma


 * Codex design-tokens patch released on NPM with version 0.4.0 and internally in MediaWiki's foreign resources registry (the latter only includes the LESS variables for now)
 * Project page created

How to Engage
We welcome and encourage your participation in this initiative. Here are some ways to engage:


 * Add this page to your watchlist
 * Add your questions, concerns, and ideas to the talk page
 * Subscribe to relevant Phabricator tasks, linked above
 * For Wikimedia Foundation staff: join the #talk-to-design-systems-team Slack channel