Complete color system for Microsoft Fluent 2 Web design language
Primary background
Secondary background
Tertiary background
Card backgrounds
Hover states
Pressed states
Primary text
Secondary text
Tertiary text
Disabled text
Default borders
Strong borders
Disabled borders
Primary actions
Hover state
Pressed state
Selected state
Brand text/icons
Hover text
Pressed text
Success surface
Success text
Success borders
Warning surface
Warning text
Warning borders
Error surface
Error text
Error borders
Info surface
Info text
Info borders
Urgent/Error states
Important warnings
Warnings
Caution
Almost success
Success/Good
Information
Primary/Selected
Creative
Attention
Highlight
Neutral
Subtle
Warm neutral
Every color has light and dark variants. Use theme-aware colors to ensure proper contrast and readability across themes.
Use semantic colors (Success, Warning, Error, Info) for status and feedback to maintain consistency.
Neutral colors create visual hierarchy. Use Background-1 through Background-6 for layering and depth.
Brand colors (#0078D4) should be used for primary actions and key interactive elements.
All color combinations meet WCAG AA standards for contrast ratios. Use the appropriate foreground/background pairs for optimal readability.