@@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.

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')