Design system

Principles

These are our design and engineering principles as it relates to our design system.


The role of Color

When we refer to color we exclude the entire grayscale. The use of color in our system is limited and it is deliberate. Our products focus on the content and the reader experience. Color should always be a minimal distraction and used with intention.


Guidance

Hierarchy and layout structure

Utilize color to separate sections of information and highlight elements of importance.

Example of color to create layout structure

Affordance

Use color to create an affordance to signal interaction, call to action, or a link.

Example of color to create layout structure

System status

Semantic colors represent system status of default, success, or failed states when completing an action or goal.

Example of color to communicate system status

Editorial tone

Color used within the editorial palette to differentiate content with various lines of coverage.

The use of color to show something is live or an opinion

Illustration

Apply color to illustrations and icons to achieve a visual style that varies across editorial tones, product functions, and sub-brand art direction.

Brand recognition

Sub-brands have a unique palette, art direction, visual look, and distinction from The Washington Post brand.

Visual information

Continuous and categorical datasets projected in a chart or map often require color to distinguish types of information and values.


Themes

The theme palette is a level of abstraction that allows the system to assign color across the product with intention. It creates an alias and assigns a color intention.

Primary

Secondary

Cta

Disabled

onPrimary

onSecondary

Cta

onDisabled

Accessible

Subtle

How to use theme

Theme tokens with on(onPrimary or onMessage) in the name are paired with the base alias. One example is onPrimary is used when an element or content is on the primary color token.


Semantic

Semantic colors have assigned meanings and are used consistently throughout our product to convey a system status. These colors help signal to our users a consistent message around system status and actions taken by the user.

Error

Warning

Success

Signal

onMessage


Static

Static colors tokens that do not change value regardless of what theme context they are in (dark or light). These colors remain static to ensure they are accessible when applied on a color where minimum contrast is required or branding requirements are applied. To use a static color add -static at the end of a color token name and it will lock the color in the light value of that token.

Example

Our theme token onCta and semantic color token onMessage both are tied to gray-600-static to ensure they remain with the correct minimal color contrast needed for the element to be accessible.

onMessage on Error

onCta on Error


Accessibility

At The Washington Post, access to information is core to our mission. We are committed to this ideal through not only our journalism but also our engineering and design practices. When it comes to color we want to ensure that visual information required to identify components and states (except inactive components), any text, and or any important signal/message meets a contrast ratio outlined by WCAG 2.0 level AA.

Accessible

One of our theme tokens named accessible is accessible on the target background (gray600 or gray0).

Accessible color on target background

Color tokens >