@@include('../../templates/modules/components/DocumentationPageHeader.html')
Fabric includes 9 theme colors and 11 neutral colors. Each has helper classes for text, border, background, and hover states. These color classes act as hooks into the suite-wide theming system. When the theming system is enabled and your app or add-in is consuming the suite navigation, these classes pick up the user's chosen theme.
Use theme colors in wayfinding, navigation, and key interactions like primary actions and current or selected indicators.
Neutral colors include black, gray, and white. Use darker shades of gray for primary content, such as text and titles. Use black sparingly for high-impact strings (labels, names) and hover states. Use lighter shades of gray for supporting graphic elements and page areas.
Fabric also includes accent colors from the Microsoft color palette.
Use these colors when you need to communicate the system's status, such as in a notification or error message.