=== Background
In order to build our design system on top of a solid visual foundation that enables the application of consistent, predefined styles, we need to consolidate and document its articulating design guidelines. Visual guidelines have a strong impact on design tokens (T293127), since tokens names and values are directly dictated by said principles.
=== User stories
As a designer, I need to have access to the foundational visual principles of the system, so I'm able to reproduce systematic decisions related to colors, spacing, typography, etc. when designing components and creating other system-compliant designs.
=== Conditions of Satisfaction
All the visual guidelines of the design system are consolidated and documented in the [[ https://www.figma.com/file/mRvSsFD2Kwh8AZNjlx7rIl/%E2%9C%A8-Design-Tokens-%5BWIP%5D?node-id=0%3A1 | Figma library ]].
=== Design spec
| [[ https://www.figma.com/file/mRvSsFD2Kwh8AZNjlx7rIl/%E2%9C%A8-Design-Tokens-%5BWIP%5D?node-id=0%3A1 | Here you can find the Figma library with all visual guidelines and tokens ]] |
=== Done
Consolidate and document [[ https://www.figma.com/file/mRvSsFD2Kwh8AZNjlx7rIl/%E2%9C%A8-Design-Tokens-%5BWIP%5D?node-id=0%3A1 | in Figma ]] the system's tokens for:
[-] Color (T296995)
[ ] Typographic styles and scale (T296998)
[-] Sizing scale (T297000)
[x] Opacity (T297001)
[x] Box Shadow (T297003)
[x] Border (T300562)
[x] Motion (animation & transition) T304443
[-] Breakpoints T303522
[ ] Grids T298198
[x] Cursor
[x] {T302181} Initial addition
[x] {T306396}
**Notes**
It still needs to be decided whether we also want to document the system's visual principles in an external resource (whether that would be the [[ https://doc.wikimedia.org/codex/main/ | system's demo page ]] or the [[ https://design.wikimedia.org/style-guide/index.html | Design style guide ]]).
Defining a Layout grid for the system (see T90687) is out of scope for this particular task due to its blocking complexity.