@@include('../../templates/modules/components/DocumentationPageHeader.html')

Color

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.

Theme colors

Use theme colors in wayfinding, navigation, and key interactions like primary actions and current or selected indicators.

{{#each ThemeColorsModel.items}} {{> Color this }} {{/each}}

Neutral Colors

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.

{{#each NeutralColorsModel.items}} {{> Color this }} {{/each}}

Accent Colors

Fabric also includes accent colors from the Microsoft color palette.

{{#each AccentColorsModel.items}} {{> Color this }} {{/each}}

Message Colors

Use these colors when you need to communicate the system's status, such as in a notification or error message.

{{#each MessageColorsModel.items}} {{> MessageColor this }} {{/each}}
@@include('../../templates/modules/components/DocumentationPageFooter.html')