Color is fundamental to conveying clarity in communication by creating visual patterns that show how things function and make interacting with Docplanner predictable and straightforward.
Maintaining consistent and engaging digital interfaces throughout Docplanner demands extended guidance around color usage. Watson should provide the foundation as we look forward to achieving balance, harmony, and accessible combinations through our user interface design. By defining a color system we can ensure we have a controlled (and consolidated) palette of acceptable colors, consistent and proper usage, and also improve ease of maintenance.
Semantic values
Our palette suggests meaning and usage for each of the colors in our system. For example, from a semantic perspective, the color green is used to reinforce a positive sentiment. The naming structure of our semantic palette reflects the pieces of semantic information to help you understand the purpose and usage of any color:
--w-color-{role}-{sentiment}-{emphasis}-{state}
Role
The role defines where the color is gonna be used. We have three values: foreground, background, and border.
Sentiment
Sentiment refers to the feeling of what is being conveyed with a specific color. We have four values: accent, success, warning, and danger. Neutrals in the grayscale do not have a sentiment.
Emphasis
Emphasis refers to how prominent the color appears in our interfaces. We have: primary, secondary, tertiary, highlight, muted, and inverted.
State
States depict the different conditions of a component related to its interaction. Therefore, we have hover and active values.
Further reading:
- Basic Explanation of Semantic Color in Design System for UI/UX Newbie
- Designing semantic colors for your design system
Foreground
Foreground colors are used in text and icons.
Background
Background colors apply to the surfaces of components or pages.
Border
Borders group or separate content. They’re used primarily on tables, lists, or cards.
Usage
The following examples provide some guidance as we seek to achieve color balance and harmony through our user interface design.
Pairing Tokens
Understanding how our colors can be combined or interact together is the best way to accomplish that.
Pairing foregrounds with their background counterparts, for instance, will help you maintain the necessary contrast regardless of the color sentiments.
Using the -inverted versions of our semantic colors can assist you to highlight the most important item of a view or an interface.
Use primary, raised, and inset backgrounds to differentiate surfaces in your interfaces. For example, to create focal points or depth.
Use neutral foregrounds to reinforce the hierarchy of the components.
Use the primary border to frame your content and the secondary as dividers or to suggest separation among components (e.g.: table rows or lists).
Combining yellow
Semantic colors are built around the concept of consistent luminance and contrast, but following them and establishing a common rule does not work for yellow. This color by definition needs to stay light to keep its meaning and that’s why we break the rule by providing a one-off solution for the yellow shades.
The yellow version does not use a “foreground-warning-inverted” as it wouldn’t reach a similar contrast ratio as the rest of the sentiments. To achieve that ratio, we use “foreground-warning” and its background employs a lighter shade of yellow to avoid browns.
Color tagging
We provide a separate color palette for the purpose of color tagging elements, such as calendars and services. Palette consists of 14 colors with distinct hues.
Foreground
Foreground colors are used for texts and icons.
Background
Background colors are used for surfaces and for representation of the selected color i.e. in a color picker.
Usage
Pairing
Pair foreground and background colors with their respective counterparts to achieve best contrast and color combinations.
Pairing foregrounds with their background counterparts, will help you maintain the necessary contrast regardless of the color sentiments.
Representing the color
Ensure the component using the tagging system represents the user's chosen color clearly. Use this color as a background directly, or add an extra visual element to create a connection.
Calendar event uses --w-background-inverted in the dark theme, and visual bar with --w-background-inverted in the light theme to connect elements with the picked color.
Design resources
All semantic colors are available as part of the Watson Web library in Figma. You will find them as variables, categorized by role, and named after their semantic token.
All color variables are available in the right-side panel
When pairing colors refer to the examples of usage, and in doubt, use Stark’s contrast checker to confirm that your pairing is contrasted enough and accessible. This plugin is installed by default in Docplanner’s organization.
Find it in the Figma Plugins menu > Stark > Contrast Checker.