== Preamble
Coming from {T288383}, we've settled on agreements in the Vue.js designer workshop and the sequential task force for our tokens architecture.
This task is about designing and defining a set of "design tokens" for the Wikimedia Design System.
Design tokens are the smallest pieces of our design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
=== User stories
- As an engineer, I need design tokens defined for our system so that I can build assets, components and patterns at a sustainable scale (without having to manually define this repeated specs) while securing consistency across our platforms.
- As a designer, I need repeatable design elements (such as UI colors and spacing) defined, so that I can use them in my mockups and communicate how they should be implemented to engineers.
=== Requirements
These token definitions should be for desktop and mobile web platforms.
=== Testing Instructions
TBD - a protocol should be written for a new engineer and designer who are trying to use tokens for the first time in their respective workflow.
== Done
[ ] **Identify and define tokens** T288383
[ ] **Integrate tokens in Components Overview Figma file **- all of the token names, values and examples per component/pattern T295606
[x] **Implement Codex tokens sub-package**- continuously updated tokens representing the design Figma components overview definitions. Created, further general Codex packaging discussion at T294993
[ ] **Add choice (global) tokens to Codex token package**
[ ] ** Provide and clearly mark “legacy” design tokens** T288110
[ ] **Add base tokens** to Codex token package
[ ] **Move component-specific tokens into the Codex tokens package** and out of the component styles
[ ] **a protocol** – for designing future tokens (after these are shipped) (aka governance model) T295603
[ ] **documentation for tokens** – for [[ https://doc.wikimedia.org/codex/main/ | designers and engineers ]] on definition and usage T295605
[ ] **List/visualize design tokens in Codex's demo site** (task missing)
The workflow for finding and using a token is tested with designers and engineers.