Platform goals and context
- Unified design language across Android, web, iOS and desktop
- Ties color to surfaces, elevation and motion
- Enables dynamic theming (Material You) from a seed color
Color is part of a bigger story including typography, shape, motion and layout.
- Cohesive experience across Windows, Office, Teams and Microsoft 365
- Prioritises productivity UIs: documents, spreadsheets, collaboration
- Integrates with OS-level system colors and themes including high contrast
Color is heavily shaped by word processors, spreadsheets, mail clients and collaboration tools.
Palette structure
Material Design
Classic Material 2 offers per-hue palettes (Red, Blue, Teal, etc.) with steps 50–900 plus accent tones A100–A700.
Material 3 (Material You) uses tonal palettes: for each base color, tones 0–100 across multiple palettes (primary, secondary, tertiary, neutral, error). Roles like primary, onPrimary, surface, onSurface map to specific tones that differ between light and dark themes.
Fluent UI
Fluent defines theme palettes around one or more brand colors plus a rich neutral ramp. Typical tokens include themePrimary, themeSecondary, neutralLighter, neutralPrimary, neutralDark.
Newer Fluent tokens: colorBrandForeground1, colorBrandBackground, colorNeutralForeground1, colorNeutralBackground1, etc.
Instead of many hues, Fluent typically focuses on a single brand hue with tints/shades and a rich neutral ramp tuned for content-heavy UIs.
System colors and roles
- surface, surfaceVariant, background
- onSurface, onSurfaceVariant
- primary, onPrimary, primaryContainer
- secondary, tertiary (with pairs)
- error, onError, errorContainer
- outline, outlineVariant
- inverseSurface, inversePrimary
- colorNeutralForeground1/3, colorNeutralBackground1/3
- colorNeutralStroke1, colorNeutralStrokeAccessible
- colorBrandForeground1, colorBrandBackground
- colorPaletteRedForeground1, colorPaletteRedBackground2
- Legacy: themePrimary, neutralPrimary, neutralSecondary
Fluent system colors correspond closely to Office colors and must work across Windows themes and high-contrast modes.
Light, dark and high-contrast modes
Defines separate light and dark tonal mappings. primary in light is tone 40; in dark it's tone 80. Uses overlays and elevation effects to differentiate surfaces in dark mode.
Supports light, dark and high-contrast (HC) themes. On Windows, system HC colors override app colors. Fluent places extra emphasis on using proper tokens so the OS can swap values, ensuring readability in high-contrast environments.
Visual character
- Bolder colors, accent surfaces with strong hues
- Connected to mobile app metaphors: cards, surfaces, elevation
- Consumer products, media, content apps, Android-first experiences
- Lots of neutrals, thin accents of brand color
- Optimised for toolbars, ribbons, document canvases, data grids
- Enterprise, B2B, productivity tools, Microsoft 365 / Windows ecosystem
Mapping between Material and Fluent
For cross-platform products (e.g. Android app + web/Teams app), a practical mapping process:
Identify your brand hue in Material
Primary tonal palette seed (Material 3) or Blue 500 (Material 2)
Choose a Fluent brand color
Set colorBrandBackground / themePrimary to a close match
Align neutral behavior
Material surface/background ≈ Fluent colorNeutralBackground1/2; Material onSurface ≈ colorNeutralForeground1
Map status colors
Material error → Fluent red tokens; secondary/tertiary → Fluent accent or palette colors
Respect platform idioms
Aim for shared brand hue & semantics with platform-appropriate layout and motion
When to lead with which
Lead with Material if…
- Your primary target is Android / Google ecosystem
- You want guidance for tonal palettes, elevation and cross-platform theming
- Expressiveness and personality are important
Lead with Fluent if…
- Your primary target is Microsoft ecosystem (Windows, Teams, Office, Azure)
- You're building productivity or enterprise tools
- You need excellent behaviour in dense data UIs and high-contrast modes
In many cross-platform products you'll end up with a shared brand palette and separate Material and Fluent implementations that interpret it to suit each platform.