Color is a design foundation that expresses style, meaning, and hierarchy. A standardized palette and intentional application ensure a familiar, consistent experience across light and dark themes.
Company desktop products derive default control colors from a base scheme color. Individual components may override these values for a customized scheme.
| Name | Light | Dark | Usage |
|---|---|---|---|
| Primary | Primary buttons, badges, active control borders | ||
| Primary hover | Primary button hover, link hover (light) | ||
| Primary text | Text on primary-colored surfaces |
Background colors indicate depth and layering. Toggle the theme control in the header to compare light and dark swatches.
| UI element | Level | Light | Dark |
|---|---|---|---|
| Base scheme color | — | ||
| Main form title bar, workspace background | 0 | ||
| Panel sub-headers, separator bars | 1 | ||
| Document background | 2 | ||
| Panel, ribbon | 2 | ||
| Dialogs | 3 |
| Preview | Role | Light | Dark | Usage |
|---|---|---|---|---|
| Aa | Primary | Body text, labels, headings | ||
| Aa | Secondary | Captions, helper text, metadata | ||
| Aa | Disabled | Disabled controls, inactive labels |
| Preview | State | Light | Dark |
|---|---|---|---|
| Hyperlink | Default | ||
| Hyperlink | Hover | ||
| Hyperlink | Visited |
Fill and border colors for enabled and disabled form controls.
| Preview | Role | Light | Dark |
|---|---|---|---|
| Control fill | |||
| Border | |||
| Active border | |||
| Disabled fill | |||
| Aa | Disabled text |
Primary, secondary, tertiary, and outline button colors are defined in the palette. See Button for the full state matrix and usage guidelines.
| Variant | Background (light / dark) | Text (light / dark) |
|---|---|---|
| Primary |
|
Aa
Aa
|
| Secondary |
|
Aa
Aa
|
| Secondary hover |
|
— |
| Tertiary |
|
Aa
Aa
|
Company web surfaces use the same palette. Contrast pairings for text on backgrounds are validated for both light and dark modes.
| Surface | Light | Dark |
|---|---|---|
| Page background | ||
| Sidebar | ||
| Code blocks | ||
| Border | ||
| Divider | ||
| Warning |