Colors

To see all of our new colors, please visit the Color Studio. To see the old version of this page, please visit Colors archive. If you’d like color guidelines and how color is used in Calypso, visit devdocs.

WordPress.com uses colors purposefully to communicate how things function in the interface. This helps us create visual patterns that can make interacting with our product easier and more predictable for customers.

Design Guidelines

These guidelines are the framework upon which we have built our system for how color is used on WordPress.com.

Principles

Communication over decoration

Although we value an aesthetically pleasing use of color, we place a higher value on clear communication. Our use of color should be purposeful, rational, and should serve to support the purpose of the content.

Color should be accessible

When choosing colors, consider customers who are color blind or who have low vision. Never use color alone to convey information.

Color should focus attention

The use of color should help bring attention to what matters most. Color should support the hierarchy of the page. Use restraint.

Color Studio

Our colors come from Color Studio, the color palette that serves all of Automattic’s products, including WordPress.com. 

Primary and Secondary Colors

The WordPress.com brand utilizes two colors — Product Blue 500 and Product Pink 500. Product Blue is Calypso’s primary color, and Product Pink is the secondary color.
The primary color is the color displayed most frequently across Calypso screens and components.

Product Blue 500
#016087
CSS --color-primary
Android
iOS
PMS

The primary color is best for:

  • Top app bar
  • Links
  • Selected states for navigation drawer and tabs
  • Selected states for text fields
  • Selection controls, like sliders and switches
  • Progress bars

The secondary color provides a way to sparingly accent the UI. It should only be used to draw attention to the most important action, a group of actions, or information on a screen.

Product Pink 500
#d52c82
CSS --color-accent
Android
iOS
PMS

The secondary color is best for:

  • Buttons 
  • Badges
  • Infographics

Status Colors

In addition to primary and secondary colors, Calypso also has three status colors — Success, Warning, and Error (green, yellow, and red respectively). These colors don’t represent the brand, and should only be used for customer communication and messaging (form validation, alerts, confirmation, etc.)

Success, Warning, and Error status colors

Other colors found in Color Studio are rarely used in the product and should be used sparingly. We use these additional colors to indicate the customer’s plan:

  • Free: Gray
  • Blogger: Celadon
  • Personal: Hot Blue
  • Premium: Yellow
  • Business: Orange
  • eCommerce: Hot Purple

Text Contrast

While designing with color, make sure that text is accessible. Text color should have a contrast ratio of at least 4.5 (WCAG 2.1 Level AA). Color Studio makes it easy to determine whether or not white/black and a background color is compliant with Level AA. If white or black in combination with the color passes AA, it’ll show “AA” next to W or B respectively. For most colors, the 500 value provides enough text contrast with white. Gray 500 is the lightest neutral color that still passes AA.

Color Studio showing contrast information

When you need to create a hierarchy in your design, take these guidelines into consideration (assuming the text is on a white background):

  • For text that is secondary, use Gray 500 (e.g. tags, sub-heads, timestamps, etc.).
  • Use caution when using neutrals lighter than Gray 500. These colors should only be used for text elements in the following cases:
    • Inactive UI components
    • Pure decoration
    • Logotypes
    • Part of a picture that contains significant other visual content

Non-text contrast

In order to be compliant with Level AA, contrast of the visual information required to identify a UI component must be 3.1 or greater (ref). Inactive UI components are the exception.

Next up: Patterns