Color
Usage Guidlines
Our system focuses on being intentional with color and utilizes a monochromatic approach to most UI elements. When color is used, it's primary objective is to convey important messaging. Colors can be applied in the following ways:
1. Fills
Color is applied in background fills or blocks on content such as full pages, marketing materials, and buttons.
2. Outline/Stroke
Color is used to define outlines or strokes.
3. Text
Color is also applied on article text, headlines, kicker.
Why do we use color
These are often combined -- eg a red kicker for “live” to set editorial tone and create affordance of interactivity.
1. Heirarchy and Layout
Utilizing color to separate sections of information and higlight elements of importance.
2. Affordance
Elements that a user can interact with are emphasized with color, such as links and call to actions.
3. System Status
Elements change in color to represent default, success or failed states when completing an action or goal.
4. Editorial Tone
Colors within the editorial palette are used to differentiate content with various lines of coverage.
5. Illustration
Color is applied on illustrations and icons to achieve a visual style that varies across editorial tones, product functions and sub-brand art direction.
6. Brand Recognition
An xl sub-brand has its own unique palette, art direction and visual look and feel to separate it from the WP brand.
7. Visualize Information
Continuous and categorical datasets projected in a chart or map often require color to distinguish types of information and values.
Tokens
These are the token names used in our system that represent color value.