Color examples

Use colors to support creating distinction between elements, such as define primary and secondary actions. See color usage for reference and appropriate tokens.

Use color as a sole indicator of information. Color-only changes do not work well for those who may be color blind or have low vision; always supply an icon or text label for context.

Use colors purposefully as it can convey meaning in multiple ways. Our extended color palette is used for communicating status or enhancing illustrations when needed. See color usage for reference.

Repurpose colors. Using colors for their intended meaning supports good comprehension and avoids usability and accessibility issues.

Use extended colors to emphasize brand moments and reinforce Pinterest's style when appropriate to a specific use case without breaking an actual product UI pattern (e.g., onboarding, marketing announcements). Please reach out to the Core Brand team for guidance.

Apply alternative colors modifying Gestalt components or UI patterns as it can create inconsistency and cognitive issues.

Use the established typography and iconography color tokens so users can quickly scan and identify sentiment.

Apply alternative colors to text and icons. Always refer to color usage for the appropriate color pattern.

Use the appropriate color tokens to switch between themes (light and dark mode). It ensures consistency and avoids accessibility issues.

Apply alternative colors not specified in our color tokens when switching between themes. If a new color value is needed for a specific use case, let the Gestalt team know and we will evaluate.

Use designated elevation color values and styles on light and dark mode themes. See elevation guidelines for guidance.

Apply colors and styles not available in our elevation tokens to elevate surfaces as it can create inconsistency, and eye strain. If a different color value is needed for a specific elevation use case, let the Gestalt team know and we will assist.