Color

Table of contents

• Introduction to Our Color Palette
• Theme and Semantic Tokens
• Color tokens

Note: In the graphic, the number in each color swatch is the contrast against our background color. For accessibility, large text should have at least a 3:1 ratio for AA compliance, and small text should have at least 4.5:1 for AA and 7:1 for AAA compliance. See WCAG for details.

Introduction to Our Color Palette

Our color palette is designed to cater to the diverse needs of our product's design requirements, providing a comprehensive range of colors.

Recommended Usage

While our palette offers a variety of colors suitable for a wide array of applications within our product, we strongly recommend using our theme tokens. These tokens are specifically designed to ensure that colors are applied with the correct intention and assignment, particularly in contexts where light and dark themes are utilized.

How to Reference Color Tokens

Color tokens can be referenced by combining their color group and scale. This system allows for easy identification and application of color values within your projects. For example:

• gray100
• red300
• teal600

Note: The -static modifier preserves the color token's consistency across light and dark contexts. Its usage should be limited within the scope of our product to maintain design coherence.

Using our tokens in code

When you need to apply colors from the WPDS theme to your components, start by importing the theme object from the WPDS UI kit package. This enables you to use the theme's predefined color values in a type-safe manner, ensuring consistency across your application and adherence to the design system. For example:

import { theme } from "@washingtonpost/wpds-ui-kit"; theme.colors.background //Reference to the token

Theme and Semantic Tokens

Our theme tokens follow a semantic and predictable structure comprising three parts:

• Role: This defines the purpose of the token within the UI.
• Modifier (Optional): This denotes a variant, change, or subset of the role, such as -subtle*.
• State (Optional): This indicates the token's state within the UI.

Definition

subtle*: The subtle modifier ensures that the color token remains the same color across light and dark contexts.

Color tokens