chore(website): add theme swapping to design guidelines (#3729)

* chore(website): add theme swapping to design guidelines

* feat: add theme-swapping to design guidelines

* fix: remove updates to theme file

* feat: add more detail to swapping themes

* feat: add detail to theme swapping on Theme page

packages/paste-website/src/pages/introduction/for-designers/design-guidelines/index.mdx

@@ -86,6 +86,14 @@ The following are the main libraries we recommend you have enabled for each Figm
 - [Segment Design Library](https://www.figma.com/file/4tOxLhDIMO2MYvF925RQKc/Segment-Design-Library?type=design&mode=design&t=UNWt1yAShGOocSFf-0) for teams with Segment projects, managed by the Segment team.
 - [File and Cover Sheet Template](https://www.figma.com/file/RfZYRjUH56rZ0qe0veqRJA/File-and-Cover-Sheet-Template)
 
+#### How to swap themes
+
+The main Paste Components Figma library includes variables in our most-used themes as modes. Check out [Figma's documentation on switching modes](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#h_01H3ADKDF7JBTRV1Z5P1X1DZVE) to learn how to swap from the default "Twilio" theme mode to other modes like "Evergreen" for the Segment transition and "Default" for the legacy visual style.
+
+As long as every part of your UI (even the white background fill on your frames) is referencing our design tokens in Figma, swapping between modes (i.e., themes) will work smoothly. Your design files will be 1-to-1 with the components your engineering team uses, which makes upgrading, migrating, and switching visual themes in both code and design effortless.
+
+Switching modes won't work for *detached components* that use raw hex codes, for example, because Figma won't know what to swap them to and you are *no longer using Paste*.
+
 ---
 
 ### Library updates

packages/paste-website/src/pages/theme/changing-theme.mdx

@@ -82,7 +82,9 @@ import {Customization} from '@twilio-paste/core/customization';
 
 The main Paste Components Figma library includes variables in our most-used themes as modes. Check out [Figma's documentation on switching modes](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#h_01H3ADKDF7JBTRV1Z5P1X1DZVE) to learn how to swap from the default "Twilio" theme mode to other modes.
 
-As long as every part of your UI (even the white background fill on your frames) is referencing tokens in Figma, swapping between modes will work smoothly. Switching modes won't work for raw hex codes, for example, because Figma won't know what to swap them to.
+As long as every part of your UI (even the white background fill on your frames) is referencing our design tokens in Figma, swapping between modes (i.e., themes) will work smoothly. Your design files will be 1-to-1 with the components your engineering team uses, which makes upgrading, migrating, and switching visual themes in both code and design effortless.
+
+Switching modes won't work for *detached components* that use raw hex codes, for example, because Figma won't know what to swap them to and you are *no longer using Paste*.
 
 </content>
 </contentwrapper>