Update low engagement articles

Author: samantharamon

docs/design/add-in-design.md

@@ -1,7 +1,7 @@
 ---
 title: Design the UI of Office Add-ins
-description: Learn the best practices for the visual design of Office Add-ins.
-ms.date: 10/18/2022
+description: Apply best practices and design principles to create engaging Office Add-in experiences across all platforms.
+ms.date: 01/06/2026
 ms.topic: best-practice
 ms.localizationpriority: high
 ---
@@ -19,19 +19,31 @@ Office applications follow a general set of interaction guidelines. The applicat
 
 Follow the Office design principles to create positive add-in experiences.
 
-- **Design explicitly for Office.** The functionality, as well as the look and feel, of an add-in must harmoniously complement the Office experience. Add-ins should feel native. They should fit seamlessly into Word on an iPad or PowerPoint on the web. A well-designed add-in will be an appropriate blend of your experience, the platform, and the Office application. Apply document and UI theming where appropriate. Consider using Fluent UI for the web as your design language and tool set. The Fluent UI for the web has two flavors.
+### Design explicitly for Office
+
+The functionality, as well as the look and feel, of an add-in must harmoniously complement the Office experience. Add-ins should feel native across all platforms, whether in Word on an iPad or PowerPoint on the web. A well-designed add-in will be an appropriate blend of your experience, the platform, and the Office application. Apply document and UI theming where appropriate.
+
+#### Use Fluent UI for the web as your design language
+
+Consider using Fluent UI for the web as your design language and tool set. The Fluent UI for the web has two flavors.
+
+- **For React projects:** Use [Fluent UI React](../quickstarts/fluent-react-quickstart.md), a React front-end framework designed to build experiences that fit seamlessly into a broad range of Microsoft products. It provides robust, up-to-date, accessible React-based components which are highly customizable using CSS-in-JS. To get started, see [Use Fluent UI React in Office Add-ins](../quickstarts/fluent-react-quickstart.md).
+
+- **For non-React projects:** Use **Fabric Core**, an open-source collection of CSS classes and Sass mixins for colors, animations, fonts, icons, and grids. (It's called "Fabric Core" instead of "Fluent Core" for historical reasons.) To get started, see [Fabric Core in Office Add-ins](fabric-core.md).
 
-  - **For non-React UIs:** Use **Fabric Core**, an open-source collection of CSS classes and Sass mixins that give you access to colors, animations, fonts, icons, and grids. (It's called "Fabric Core" instead of "Fluent Core" for historical reasons.) To get started, see [Fabric Core in Office Add-ins](fabric-core.md).
-  
   [!INCLUDE [alert-fluent-ui-web-components](../includes/alert-fluent-ui-web-components.md)]
 
-  - **For React UIs:** use **Fluent UI React**, a React front-end framework designed to build experiences that fit seamlessly into a broad range of Microsoft products. It provides robust, up-to-date, accessible React-based components which are highly customizable using CSS-in-JS. To get started, see [Fluent UI React in Office Add-ins](../quickstarts/fluent-react-quickstart.md).
+### Favor content over chrome
+
+Allow the customer's page, slide, or spreadsheet to remain the focus of the experience. An add-in is an auxiliary interface. No accessory chrome should interfere with the add-in’s content and functionality. Brand your experience wisely. We know it's important to provide users with a unique, recognizable experience but avoid distraction. Strive to keep the focus on content and task completion, not brand attention. For guidance on effective branding, see [Branding patterns](branding-patterns.md).
+
+### Make it enjoyable and keep users in control
 
-- **Favor content over chrome.** Allow customers’ page, slide, or spreadsheet to remain the focus of the experience. An add-in is an auxiliary interface. No accessory chrome should interfere with the add-in’s content and functionality. Brand your experience wisely. We know it's important to provide users with a unique, recognizable experience but avoid distraction. Strive to keep the focus on content and task completion, not brand attention.
+People enjoy using products that are both functional and visually appealing. Craft your experience carefully. Get the details right by considering every interaction and visual detail. Allow users to control their experience. The necessary steps to complete a task must be clear and relevant. Important decisions should be easy to understand. Actions should be easily reversible. An add-in is not a destination—it's an enhancement to Office functionality.
 
-- **Make it enjoyable and keep users in control.** People enjoy using products that are both functional and visually appealing. Craft your experience carefully. Get the details right by considering every interaction and visual detail. Allow users to control their experience. The necessary steps to complete a task must be clear and relevant. Important decisions should be easy to understand. Actions should be easily reversible. An add-in is not a destination – it’s an enhancement to Office functionality.
+### Design for all platforms and input methods
 
-- **Design for all platforms and input methods**. Add-ins are designed to work on all the platforms that Office supports, and your add-in UX should be optimized to work across platforms and form factors. Support mouse/keyboard and touch input devices, and ensure that your custom HTML UI is responsive to adapt to different form factors. For more information, see [Touch](../concepts/add-in-development-best-practices.md#optimize-for-touch).
+Add-ins are designed to work on all the platforms that Office supports, so your add-in UX must be optimized to work across platforms and form factors. Support mouse/keyboard and touch input devices, and ensure that your custom HTML UI is responsive to adapt to different form factors. For more information, see [Optimize for touch](../concepts/add-in-development-best-practices.md#optimize-for-touch).
 
 ## See also
 

docs/design/add-in-typography.md

@@ -1,25 +1,37 @@
 ---
 title: Typography guidelines for Office Add-ins
 description: Learn what typefaces and font sizes to use in Office Add-ins.
-ms.date: 08/18/2023
+ms.date: 01/06/2026
 ms.topic: best-practice
 ms.localizationpriority: medium
 ---
 
 # Typography
 
-Segoe is the standard typeface for Office. Use it in your add-in to align with Office task panes, dialog boxes, and content objects. [Fabric Core](fabric-core.md) gives you access to Segoe. It provides a full type ramp of Segoe with many variations - across font weight and size - in convenient CSS classes. Not all Fabric Core sizes and weights will look great in an Office Add-in. To fit harmoniously or avoid conflicts, consider using a subset of the Fabric Core type ramp. The following table lists Fabric Core's base classes that we recommend for use in Office Add-ins.
+Segoe is the standard typeface for Office. Use it in your add-in to align with Office task panes, dialog boxes, and content objects. [Fluent UI React](../quickstarts/fluent-react-quickstart.md) and [Fabric Core](fabric-core.md) give access to the Segoe typeface and its variations on font weights and sizes.
+
+## Typography in Fluent UI React
+
+For guidance on font weights, sizes, and customization provided by Fluent UI React, see [Fluent UI React Typography](https://developer.microsoft.com/fluentui#/styles/web/typography).
+
+## Typography in Fabric Core
+
+The following table lists Fabric Core's base classes that we recommend for use in Office Add-ins.
 
 > [!NOTE]
 > Text color isn't included in these base classes. Use Fabric Core's "neutral primary" for most text on white backgrounds.
->
-> To learn more about available typography, see [Web Typography](https://developer.microsoft.com/fluentui#/styles/web/typography).
-
-|Type |Class |Size |Weight |Recommended Usage |
-|------ |----- |---- |------ |----------------- |
-|Hero|.ms-font-xxl |28 px | Segoe Light |<ul><li>This class is larger than all other typographic elements in Office. Use it sparingly to avoid unseating visual hierarchy.</li><li>Avoid use on long strings in constrained spaces.</li><li>Provide ample whitespace around text using this class.</li><li>Commonly used for first-run messages, hero elements, or other calls to action.</li></ul> |
-|Title|.ms-font-xl |21 px |Segoe Light | <ul><li>This class matches the task pane title of Office applications.</li><li>Use it sparingly to avoid a flat typographic hierarchy.</li><li>Commonly used as the top-level element such as dialog box, page, or content titles.</li></ul> |
-|Subtitle|.ms-font-l |17 px |Segoe Semilight | <ul><li>This class is the first stop below titles.</li><li>Commonly used as a subtitle, navigation element, or group header.</li><ul> |
-|Body|.ms-font-m |14 px |Segoe Regular |<ul><li>Commonly used as body text within add-ins.</li><ul>|
-|Caption|.ms-font-xs |11 px | Segoe Regular |<ul><li>Commonly used for secondary or tertiary text such as timestamps, by lines, captions, or field labels.</li><ul>|
-|Annotation|.ms-font-mi |10 px |Segoe Semibold |<ul><li>The smallest step in the type ramp should be used rarely. It's available for circumstances where legibility isn't required.</li><ul>|
+
+|Type|Class|Size|Weight|Recommended Usage|
+|----|-----|----|------|-------------|
+|Hero|.ms-font-xxl|28 px|Segoe Light|<ul><li>This class is larger than all other typographic elements in Office. Use it sparingly to avoid unseating visual hierarchy.</li><li>Avoid use on long strings in constrained spaces.</li><li>Provide ample whitespace around text using this class.</li><li>Commonly used for first-run messages, hero elements, or other calls to action.</li></ul>|
+|Title|.ms-font-xl|21 px|Segoe Light|<ul><li>This class matches the task pane title of Office applications.</li><li>Use it sparingly to avoid a flat typographic hierarchy.</li><li>Commonly used as the top-level element such as dialog box, page, or content titles.</li></ul>|
+|Subtitle|.ms-font-l|17 px|Segoe Semilight|<ul><li>This class is the first stop below titles.</li><li>Commonly used as a subtitle, navigation element, or group header.</li><ul>|
+|Body|.ms-font-m|14 px|Segoe Regular|<ul><li>Commonly used as body text within add-ins.</li><ul>|
+|Caption|.ms-font-xs|11 px|Segoe Regular|<ul><li>Commonly used for secondary or tertiary text such as timestamps, by lines, captions, or field labels.</li><ul>|
+|Annotation|.ms-font-mi|10 px|Segoe Semibold|<ul><li>The smallest step in the type ramp should be used rarely. It's available for circumstances where legibility isn't required.</li><ul>|
+
+## See also
+
+- [Color guidelines for Office Add-ins](add-in-color.md)
+- [Branding patterns](branding-patterns.md)
+- [Layout](add-in-layout.md)