[All hosts] (UI/UX) Update low engagement articles (#5440)

Author: samantharamon

docs/design/add-in-color.md

@@ -1,7 +1,7 @@
 ---
 title: Color guidelines for Office Add-ins
 description: Learn how to use colors in the UI of an Office Add-in.
-ms.date: 06/18/2024
+ms.date: 10/28/2025
 ms.topic: best-practice
 ms.localizationpriority: medium
 ---
@@ -12,16 +12,18 @@ Color is often used to emphasize brand and reinforce visual hierarchy. It helps
 
 ![The color scheme for Office, Excel, Word, and PowerPoint. Major colors for Office are black and white, and minor colors are light gray, dark gray, and orange. The dominant color for Excel is green, Word is blue, and PowerPoint is orange.](../images/office-addins-color-schemes.png)
 
+## Use UI component libraries
 [Fluent UI React](../quickstarts/fluent-react-quickstart.md) and [Fabric Core](fabric-core.md) include a set of default theme colors. When these libraries are applied to the components or layouts of an Office Add-in, the same goals apply. Color should communicate hierarchy, purposefully guiding customers to action without interfering with content. Theme colors from Fluent UI React or Fabric Core can introduce a new accent color to the overall interface. These accent colors can conflict with Office app branding and the hierarchy. Consider ways to avoid conflicts and interference. Use neutral accents or overwrite theme colors to match Office app branding or your own brand colors.
 
+## Develop with theming APIs
 In Office applications, customers personalize their interfaces by applying an [Office UI theme](https://support.microsoft.com/office/365-63e65e1c-08d4-4dea-820e-335f54672310). Customers choose between four UI themes to vary styling of backgrounds and buttons in Excel, Outlook, PowerPoint, Word, and other apps in the Office suite. To make your add-ins feel like a natural part of Office and respond to personalization, use our [Theming APIs](/javascript/api/office/office.officetheme). For example, task pane background colors switch to a dark gray in some themes. With the Theming APIs, follow suit and adjust foreground text to ensure [accessibility](../design/accessibility-guidelines.md).
 
 > [!TIP]
 >
 > - To ensure that your add-in applies the correct color combinations in its UI, test it with all four Office themes, including the **Use system setting** option.
 > - For guidance on how to dynamically match the design of your PowerPoint add-in with the current document or Office theme, see [Use document themes in your PowerPoint add-ins](../powerpoint/use-document-themes-in-your-powerpoint-add-ins.md).
 
-Apply the following general guidelines for color.
+## Apply best practices
 
 - Use color sparingly to communicate hierarchy and reinforce brand.
 - Overuse of a single accent color applied to both interactive and non-interactive elements can lead to confusion. For example, avoid using the same color for selected and unselected items in a navigation menu.
@@ -30,3 +32,10 @@ Apply the following general guidelines for color.
 - Ensure that all text is [accessible](accessibility-guidelines.md). Be sure that there is a 4.5:1 contrast ratio between foreground text and background.
 - Be aware of color blindness. Use more than just color to indicate interactivity and hierarchy.
 - To learn more about designing add-in command icons with the Office icon color palette, see [icon guidelines](../design/add-in-icons.md).
+
+## See also
+
+- [Office Add-in design language](add-in-design-language.md)
+- [Accessibility guidelines](accessibility-guidelines.md)
+- [Branding patterns](branding-patterns.md)
+- [Fluent UI React in Office Add-ins](../quickstarts/fluent-react-quickstart.md)

docs/design/branding-patterns.md

@@ -1,17 +1,19 @@
 ---
 title: Branding patterns design guidelines for Office Add-ins
 description: Learn how to brand your Office Add-in while staying compatible with the visual design of Office.
-ms.date: 05/18/2023
+ms.date: 10/29/2025
 ms.topic: best-practice
 ms.localizationpriority: medium
 ---
 
 # Branding patterns
 
-These patterns provide brand visibility and context to your add-in users.
+Implement recommended design patterns in your add-in to promote brand visibility while maintaining seamless integration with Office applications.
 
 ## Best practices
 
+The following table outlines design best practices to enhance your add-in's brand recognition.
+
 |Do |Don't|
 |:---- |:----|
 | Use familiar UI components with applied branding accents like typography and color. | Don't invent new UI components that contradict established Office UI. |
@@ -20,16 +22,26 @@ These patterns provide brand visibility and context to your add-in users.
 | Make your solution recognizable and connect your screens together with consistent visual elements. | Don't hide your solution with unrecognizable and inconsistently applied visual elements. |
 | Build connection with a parent service or business to ensure that customers know and trust your solution. | Don't make customers learn a new brand concept if there's a useful and understandable relationship that can be leveraged to build trust and value. |
 
-Apply the following patterns and components as applicable to allow users to embrace the full utility of your add-in.
+## Design patterns and components
+
+Apply the following patterns and components to allow users to embrace the full utility of your add-in.
 
-## Brand Bar
+### Brand Bar
 
 The brand bar is a space in the footer to include your brand name and logo. It also serves as a link to your brand's website and an optional access location.
 
 ![Brand bar displayed in an add-in task pane of an Office desktop application.](../images/add-in-brand-bar.png)
 
-## Splash Screen
+### Splash Screen
 
 Use this screen to display your branding while the add-in is loading or transitioning between UI states.
 
 ![Brand splash screen displayed in an add-in task pane of an Office desktop application.](../images/add-in-splash-screen.png)
+
+## See also
+
+- [Office Add-in design language](add-in-design-language.md)
+- [Color guidelines for Office Add-ins](add-in-color.md)
+- [First-run experience patterns](first-run-experience-patterns.md)
+- [Accessibility guidelines](accessibility-guidelines.md)
+- [Best practices for developing Office Add-ins](../concepts/add-in-development-best-practices.md)

docs/design/data-visualization-guidelines.md

@@ -1,7 +1,7 @@
 ---
 title: Data visualization style guidelines for Office Add-ins
 description: Get some good practices for how to visualize data in an Office Add-in.
-ms.date: 06/27/2023
+ms.date: 10/29/2025
 ms.topic: best-practice
 ms.localizationpriority: medium
 ---

docs/design/using-motion-office-addins.md

@@ -1,7 +1,7 @@
 ---
 title: Using motion in Office Add-ins
 description: Get best practices for using transitions, motion, or animation in Office Add-ins.
-ms.date: 06/27/2023
+ms.date: 10/29/2025
 ms.topic: best-practice
 ms.localizationpriority: medium
 ---
@@ -34,7 +34,7 @@ We recommend using [Fluent UI](../design/add-in-design.md) to create a visual co
 - [Fluent UI React motion patterns](https://react.fluentui.dev/?path=/docs/theme-motion--page)
 - [Fabric Core motion and animation patterns](https://developer.microsoft.com/fluentui#/styles/web/motion)
 
-Use it to fit seamlessly in your add-in. It will help you create experiences that are more felt than observed. The animation CSS classes provide directionality, enter/exit, and duration specifics that reinforce Office mental models and provide opportunities for customers to learn how to interact with your add-in.
+Use it to fit seamlessly in your add-in. It will help you create experiences that are more felt than observed. The animation CSS classes provide directionality, enter, exit, and duration specifics that reinforce Office mental models and provide opportunities for customers to learn how to interact with your add-in.
 
 ### Best practices
 

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

@@ -1,7 +1,7 @@
 ---
 title: UX design patterns for Office Add-ins
 description: Get an overview of the UI design patterns for Office Add-ins, including patterns for navigation, authentication, first-run, and branding.
-ms.date: 06/27/2023
+ms.date: 10/29/2025
 ms.topic: overview
 ms.localizationpriority: medium
 ---
@@ -36,7 +36,7 @@ The patterns are organized by key actions or experiences that are common in an a
 Browse each grouping to get an idea of how you can design your add-in using best practices.
 
 > [!NOTE]
-> The example screens shown throughout this documentation are designed and displayed at a resolution of **1366x768**.
+> The example screens shown throughout the design pattern documentation are designed and displayed at a resolution of **1366x768**.
 
 ## See also
 

docs/develop/dialog-video.md

@@ -1,14 +1,14 @@
 ---
 title: Use the Office dialog box to play a video
 description: Learn how to open and play a video in the Office dialog box to create engaging user experiences.
-ms.date: 09/25/2025
+ms.date: 10/29/2025
 ms.topic: how-to
 ms.localizationpriority: medium
 ---
 
 # Use the Office dialog box to show a video
 
-This article shows you how to play a video in an Office Add-in dialog box to create more engaging user experiences.
+Play a video in an Office Add-in dialog box to create more engaging user experiences.
 
 Videos in dialog boxes are perfect for:
 
@@ -23,7 +23,7 @@ To play a video in a dialog box with the Office dialog API, follow these steps.
 
 1. Create a dedicated video page that contains an iframe and no other content. The page must be in the same domain as the host page. For a reminder of what a host page is, see [Open a dialog box from a host page](dialog-api-in-office-add-ins.md#open-a-dialog-box-from-a-host-page).
 
-   In the `src` attribute of the iframe, point to the URL of an online video. The protocol of the video's URL must be HTTPS. In this example, we'll call this page "video.dialogbox.html".
+   In the `src` attribute of the iframe, point to the URL of an online video. The protocol of the video's URL must be HTTPS. In this example, we'll call this page **video.dialogbox.html**.
 
    Here's the markup:
 
@@ -34,12 +34,18 @@ To play a video in a dialog box with the Office dialog API, follow these steps.
     </iframe>
     ```
 
-1. Call `displayDialogAsync` in the host page to open "video.dialogbox.html".
+1. Call `displayDialogAsync` in the host page to open **video.dialogbox.html**.
 
-1. Handle dialog close events (optional). If your add-in needs to know when the user closes the dialog box, register a handler for the `DialogEventReceived` event and handle the 12006 event. For details, see [Errors and events in the Office dialog box](dialog-handle-errors-events.md).
+1. (Optional) If your add-in needs to know when the user closes the dialog, handle dialog close events. Register a handler for the `DialogEventReceived` event and handle the 12006 event. For details, see [Errors and events in the Office dialog box](dialog-handle-errors-events.md).
 
 ## See it in action
 
 For a sample of a video playing in a dialog box, see the [video placemat design pattern](../design/first-run-experience-patterns.md#video-placemat).
 
 ![A video playing in an add-in dialog box in front of Excel.](../images/video-placemats-dialog-open.png)
+
+## See also
+
+- [Use the Office dialog API in your Office Add-ins](dialog-api-in-office-add-ins.md)
+- [Best practices and rules for the Office Dialog API](dialog-best-practices.md)
+- [Handle errors and events in the Office dialog box](dialog-handle-errors-events.md)