You can use color to convey meaning or express a mood or emotion. Color can enhance the content within an app. It can provide visual structure to an overall layout. And it can communicate the values and personality of a brand.
Color in Windows is intended to make your app feel energetic and alive. It is saturated, vibrant, and authentically digital, encompassing the full gamut of color that display technology allows. Windows uses mostly flat, solid color, but employs a variety of techniques to create depth, such as transparency, layering, and blending.
In Windows 8.1, system colors and app colors are distinct. A system color is one that the user chooses and that Windows applies to the primary UI surfaces within the system, such as the Start screen background. An app color is a unique color that the developer selects and that is independent of the system color. An app color expresses the app’s brand and identity.
The following image shows different system colors applied to the Start screen.
The following image shows the signature colors of three different apps. The app color is applied prominently throughout the app to promote the brand.
In Windows 8.1, you can uniquely brand your app by choosing colors that reflect the app's personality. You can use additional supporting colors to further energize your brand. Let's look at a few examples.
This Foursquare app uses a consistent color combination of blue and green to reinforce the Foursquare brand and to facilitate easy navigation.
The visual simplicity and bold use of color within the tiles invites exploration. Color also provides intuitive wayfinding through the app’s different levels of information, such as tips, ratings, and trending.
The Reading List app is another great example of how color can infuse personality into an app. In this case, the app’s signature color, red, communicates the age of the content. The color bar at the top of the app becomes progressively darker in relation to the date that the user saved the content. This provides additional information to the user while further extending the personality of the app through the use of color.
- Guidelines and checklist for accessibility
- Supporting high-contrast themes (HTML)
- Supporting high-contrast themes (XAML)