@DAbad I've been discussing with Sarai about these Governance&Guidelines tasks and we need clarification on this task. For now, design guidelines were documented in Figma in this other task T295991. The decision of in which platform (Codex demo or Style guide) we’ll publish the visual foundations of the system is unclear. Is this task about deciding where to publish said guidelines, or strictly implying that the Design Style will be updated with Codex’s guidelines?

Creating visual styles in different places:

• Figma - design implementation
• Codex - only includes tokens

Leave for the future:

• Design Style Guide - explain global styles
  • reduce/remove components section to mitigate
  • if we decide to remove we have to remove the component behavior and recommendations from it - move to Figma? don't include UX views with demo
  • if we have portal it could be similar to: https://doc.wikimedia.org/

Why have 2 sites?

• initially separate from design and OOUI (thus why we have a separate site)
• now we have demos in Codex that are much better represented, but there still may be many different implementations outside of Codex

Decision/Action:

• Focus on updating Figma and Codex, add link to UX recommendations on design style guide from Codex.
• Link to overarching site for design principals for now from Codex.
• Update component acceptance requirements to document UX recommendations in design style guide for each component

Here's a first draft of the section dedicated to Codex's Visual Style guidelines, with links to Figma and an emphasis in the connection between said guidelines and the design style guide. Pinging @Volker_E for an early review.

Pinging @DAbad here too to find out early whether the content of the current draft meets her expectations for the Visual Guidelines documentation section.

@DAbad after a catch up with @Sarai-WMDE we've decided that this Visual styles section should not be an individual section in our Codex documentation and it should be part of our Design Tokens overview for the following reasons:

1. Our tokens are created from the visual styles previously documented in the DSG. For this reason both sections (visual styles + design tokens) should be clearly related so users know the correlation between both sections and easily understand that visual styles were translated into tokens in code.
2. We need designers to understand the relation between styles and tokens so they can communicate with developers with the same language we use in our system. So they need to communicate their styles with the tokens name (e.g. color-destructive instead "color red")
3. We need to explain that our Design Tokens born from our DSG visual styles, for this reason we should explain this info in the Design Tokens overview section and it makes sense to only explain this info once and add it in this section instead of creating a separate section.

Then, we could move the Visual styles info to the Design Tokens overview section and organize this section in the following way:

Design tokens

1. Visual styles and tokens

Here we will explain the difference and relation between visual styles and tokens.

2. Token code structure

Here we will explain info about the tokens in code.

2.1 File organization
2.3 Naming and definition structure
2.3 Further technical notes

@Volker_E @AnneT @egardner @Catrope please add your thoughts about this new organization.

Change 866522 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] docs: Expand Design System Design Tokens overview

https://gerrit.wikimedia.org/r/866522

Change 866522 merged by jenkins-bot:

[design/codex@main] docs: Expand Design System Design Tokens overview

https://gerrit.wikimedia.org/r/866522

Change 867715 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] docs: Amend design tokens overview with latest comments

https://gerrit.wikimedia.org/r/867715

Change 867715 merged by jenkins-bot:

[design/codex@main] docs: Amend design tokens overview with latest comments

https://gerrit.wikimedia.org/r/867715

Change 867727 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.4.0 to v0.4.1

https://gerrit.wikimedia.org/r/867727

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/cb9ffaffec/w

Change 867727 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.4.0 to v0.4.2

https://gerrit.wikimedia.org/r/867727

The Design Tokens overview documentation has been updated in Codex successfully.

The only acceptance criteria item that was not checked in this task is this one. @Volker_E could you verify if this item was already done?

• Access to artifacts should NOT be restricted for viewing by target users (aka remove or update permissions as necessary)

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/cb9ffaffec/w/

In T313933#8466966, @bmartinezcalvo wrote:

The Design Tokens overview documentation has been updated in Codex successfully.

The only acceptance criteria item that was not checked in this task is this one. @Volker_E could you verify if this item was already done?

• Access to artifacts should NOT be restricted for viewing by target users (aka remove or update permissions as necessary)

I've checked the the Figma files permissions so Anyone with the link can view our DS libraries and exploration files.

• Access to artifacts should NOT be restricted for viewing by target users (aka remove or update permissions as necessary)

As all the acceptance criteria for this task have been done, I'm moving the task to Product sign-off since this task could be solved.