📚 Update outdated screenshots and UI labels in the docs (#12753)

* 📚 Update interface, account and plugin screenshots in the docs

Replace screenshots that showed an older UI: the dashboard sidebar
without Sources and Pinned projects, the account sidebar with Access
tokens, and the workspace without the Tokens tab or the grouped
toolbar.

Covers the interface overview (annotated workspace and dashboard),
the account pages, the plugin manager entry points and the access
token dialogs, which now live under Integrations.

Signed-off-by: elhombretecla <delacruzgarciajuan@gmail.com>

* 📚 Update design and design system screenshots in the user guide

Replace screenshots and videos that showed an older UI: the 1.x custom
fonts pages and context menu, the toolbar with separate ellipse and
pencil tools, the sidebar without the Tokens tab, the old Libraries
button, the color picker without the tokens switch and the token menus
with a shorter list of types.

Covers workspace basics, layers, text and fonts, color, export,
assets, libraries, components and design tokens.

Signed-off-by: elhombretecla <delacruzgarciajuan@gmail.com>

* 📚 Match docs text to the current UI labels

Access tokens now live under Your account > Integrations, and the
buttons read "Create new access token" and "Create access token".
The workspace main menu lists Plugins and Help & info. The libraries
panel opens from the "Add library" or "Manage library" button. The
dashboard sidebar names its sections Libraries and Fonts.

Signed-off-by: elhombretecla <delacruzgarciajuan@gmail.com>

---------

Signed-off-by: elhombretecla <delacruzgarciajuan@gmail.com>

docs/technical-guide/integration.md

@@ -67,13 +67,13 @@ Personal access tokens function like an alternative to our login/password authen
 <p class="advice"><strong>Important:</strong> Treat your access tokens like passwords as they provide access to our account.</p>
 
 ### Manage access tokens
-In Penpot, access tokens are configured at user account level. To manage your access tokens, go to Your account > Access tokens.
+In Penpot, access tokens are configured at user account level. To manage your access tokens, go to Your account > Integrations. You'll find them in the Personal access tokens section.
 
 ![Access tokens](/img/tech-guide/access-tokens.webp)
 
 ### Generate access tokens
 
-1. Press the "Generate new token" button.
+1. Press the "Create new access token" button.
 
 ![Creating token](/img/tech-guide/access-tokens-create-1.webp)
 
@@ -83,7 +83,7 @@ In Penpot, access tokens are configured at user account level. To manage your ac
 
 ![Token expiration](/img/tech-guide/access-tokens-create-2.webp)
 
-4. Once you're happy with the name and the expiration date, press "Create token". At this step you will be able to copy the token to your clipboard.
+4. Once you're happy with the name and the expiration date, press "Create access token". At this step you will be able to copy the token to your clipboard. Keep it somewhere safe: once you close the dialog you will not be able to see it again.
 
 ![Token created](/img/tech-guide/access-tokens-create-3.webp)
 

docs/user-guide/account-teams/your-account.njk

@@ -76,6 +76,6 @@ desc: Learn how to import and export files in Penpot, the free, open-source desi
 <h3 id="your-account-accesstokens">Access tokens
   <a class="direct-link" href="#your-account-accesstokens">#</a>
 </h3>
-<p>At the <strong>Asset tokens</strong> section you can manage your access tokens. <a href="https://help.penpot.app/technical-guide/integration/#access-tokens" target="_blank">Read more about access tokens here</a>.</p>
+<p>At the <strong>Integrations</strong> section, under <strong>Personal access tokens</strong>, you can manage your access tokens. <a href="https://help.penpot.app/technical-guide/integration/#access-tokens" target="_blank">Read more about access tokens here</a>.</p>
 
 

docs/user-guide/design-systems/libraries.njk

@@ -24,7 +24,7 @@ desc: Use Penpot's libraries for reusable design elements! Learn to create, mana
 <p>There are two ways to publish a library:</p>
 <ul>
   <li>Using the file main menu.</li>
-  <li>From the libraries panel, that you can launch by clicking on the "Libraries" button that is found at the assets tab.</li>
+  <li>From the libraries panel, that you can launch from the button at the top of the assets tab. It reads "Add library" when the file has no connected libraries and "Manage library" when it has.</li>
 </ul>
 <figure>
   <img src="/img/libraries/libraries-publish-menu.webp" alt="Publish library">

docs/user-guide/designing/workspace-basics.njk

@@ -25,7 +25,7 @@ desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools,
 
 
 <h2 id="workspace-menu">The menu</h2>
-<p>There's a main menu at the workspace where you will find groups with all the actions that you can do at file level. File, View, Edit, Preferences and Help.</p>
+<p>There's a main menu at the workspace where you will find groups with all the actions that you can do at file level. File, Edit, View, Preferences, Plugins and Help &amp; info. If the MCP server is enabled, you'll also find an MCP server entry.</p>
 <figure>
   <img src="/img/workspace-basics/main-menu.webp" alt="Main menu" />
 </figure>

docs/user-guide/first-steps/the-interface.njk

@@ -131,8 +131,8 @@ desc: Discover Penpot's free user guide! Learn the interface, workspace basics,
   <li><strong>Search:</strong> If you are looking for a specific file just type its title at the search box.</li>
   <li><strong>Projects:</strong> A project allows you to group design files. It works pretty much like a folder in a file system. You can create as many projects as you need. If you are going to work with more people in a project, you should create it inside a team.</li>
   <li><strong>Drafts:</strong> The drafts section is where you can find the design files that are not inside any project.</li>
-  <li><strong>Shared Libraries:</strong> In this section you will find all the design files that have been added as shared libraries. That way you will be able to better control the files that are sharing their assets. </li>
-  <li><strong>Custom fonts:</strong> If you have purchased or own personal fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team.</li>
+  <li><strong>Libraries:</strong> In this section you will find all the design files that have been added as shared libraries. That way you will be able to better control the files that are sharing their assets. </li>
+  <li><strong>Fonts:</strong> If you have purchased or own personal fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team.</li>
   <li><strong>Pinned projects:</strong> If you want to keep some projects handy (for instance because you’re currently working on them) you can pin them to make them quickly available at the sidebar.</li>
   <li><strong>User area:</strong> This must be you! Access your <a href="/user-guide/account-teams/your-account"> profile settings</a>, Penpot tutorials, the Penpot Community and more. You can also find here a way to leave us feedback. We’d love to read your thoughts :). </li>
   <li><strong>Comments notifications:</strong> Here you will be able to see if you have unread comments inside the files of the team. There's also a button to mark all notifications as read.</li>