[All hosts] (UI/UX) Merge content (#5034)

Author: samantharamon

.openpublishing.redirection.json

@@ -394,6 +394,10 @@
             "redirect_url": "/office/dev/add-ins/develop/automatically-open-a-task-pane-with-a-document",
             "redirect_document_id": true
         },
+        {
+            "source_path": "docs/design/design-toolkits.md",
+            "redirect_url": "office/dev/add-ins/design/add-in-design-language"
+        },
         {
             "source_path": "docs/tutorials/powerpoint-tutorial-customize-ui.md",
             "redirect_url": "/office/dev/add-ins/tutorials/powerpoint-tutorial-yo"

docs/design/add-in-design-language.md

@@ -1,7 +1,7 @@
 ---
 title: Office Add-in design language
 description: Learn how to make your Office Add-in visually compatible with Office.
-ms.date: 08/18/2023
+ms.date: 02/11/2025
 ms.topic: overview
 ms.localizationpriority: medium
 ---
@@ -23,3 +23,23 @@ The Office design language is a clean and simple visual system that ensures cons
 Many Office Add-ins are associated with a preexisting brand. You can retain a strong brand and its visual or component language in your add-in. Look for opportunities to retain your own visual language while integrating with Office. Consider ways to swap out Office colors, typography, icons, or other stylistic elements with elements of your own brand. Consider ways to follow common add-in layouts or UX design patterns while inserting controls and components that are familiar to your customers.
 
 Inserting a heavily branded HTML-based UI inside of Office can create dissonance for customers. Find a balance that fits seamlessly in Office but also clearly aligns with your service or parent brand. When an add-in doesn't fit with Office, it's often because stylistic elements conflict. For example, typography is too large and off grid, colors are contrasting or particularly loud, or animations are superfluous and behave differently than Office. The appearance and behavior of controls or components veer too far from Office standards.
+
+## Review guidelines for visual elements
+
+Learn about each visual element that makes up an Office Add-in, including guidelines and recommended practices.
+
+- [Color guidelines for Office Add-ins](add-in-color.md)
+- [Icon guidelines for Office Add-ins](add-in-icons.md)
+- [Layout guidelines for Office Add-ins](add-in-layout.md)
+- [Using motion in Office Add-ins](using-motion-office-addins.md)
+- [Typography guidelines for Office Add-ins](add-in-typography.md)
+
+## Design toolkits for download
+
+To help you get started, we've created toolkits for use with either the [Sketch](https://www.sketch.com/) application for Mac or the [Adobe XD](https://www.adobe.com/products/xd/features.html) application for Windows or Mac. The following downloads include all of our available patterns, along with brief descriptions and layout recommendations.
+
+- [Fluent UI Design Sketch Toolkit](https://aka.ms/fabric-sketch-toolkit)
+- [Fluent UI Design Adobe XD Toolkit](https://aka.ms/fabric-toolkit)
+- [Add-in Sketch Toolkit](https://aka.ms/addins_sketch_toolkit)
+- [Add-in Adobe XD Toolkit](https://aka.ms/addins_toolkit)
+- [Segoe UI and Fabric MDL2 icon font](https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/fabric-website/files/segoeui_fabricmdl2_icon_fonts.zip)

docs/design/design-toolkits.md

@@ -40,6 +40,6 @@ Browse each grouping to get an idea of how you can design your add-in using best
 
 ## See also
 
-- [Design tool kits](design-toolkits.md)
+- [Office Add-in design language](add-in-design-language.md)
 - [Best practices for developing Office Add-ins](../concepts/add-in-development-best-practices.md)
 - [Fluent UI React in Office Add-ins](../quickstarts/fluent-react-quickstart.md)

docs/design/ux-design-pattern-templates.md

@@ -231,8 +231,6 @@ items:
               displayName: first run experience
           - name: Navigation
             href: design/navigation-patterns.md
-      - name: Design toolkits
-        href: design/design-toolkits.md
       - name: Interface elements
         items:
         - name: Overview