WPDS Documentation & Resources

red

spark

orange

mustard

gold

yellow

green

teal

blue

purple

pink

gray

100

200

300

400

500

600

700

13.04

8.89

5.87

4.66

3.80

2.54

1.77

1.28

1.18

14.71

6.52

4.73

3.32

2.72

2.29

1.58

1.27

1.07

9.21

5.83

3.73

2.85

2.75

2.08

1.59

1.26

1.12

8.50

5.02

3.02

2.21

2.37

1.90

1.54

1.26

1.12

8.38

5.04

3.06

2.23

2.40

1.91

1.55

1.25

1.13

1.21

1.06

9.22

5.92

3.83

3.07

2.82

2.10

1.61

1.25

1.08

12.55

8.56

5.68

2.63

3.73

2.52

1.76

1.28

1.06

13.04

8.90

5.87

4.54

3.81

2.54

1.77

1.27

1.15

12.50

8.47

5.61

4.18

3.69

2.51

1.75

1.26

1.13

12.46

8.43

5.61

3.14

3.69

2.50

1.76

1.26

1.16

21.00

18.88

14.35

9.00

7.00

4.74

2.32

1.48

1.21

1.14

1.07

1.00

General Concepts

Color themes and device color modes aren't synonymous; themes are tailored to apps, while modes are system-wide settings that impact device theming.

Color

Used generically to refer to named colors (e.g., blue).

Tint

A lighter value of a color.

Shade

A darker value of a color.

Tone

A less saturated version of a color. Alternatively used as a synonym for tints or shades.

Contrast Ratio

The measurable difference in lightness between two comparative using the WCAG relative luminance formula.

Target contrast ratio

The desired contrast ratio between two color values when one of the color values is generated by a color tool. 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. WPDS strives to maintain AAA (contrast ratio of 7:1). See WCAG for details.

Semantic Structure

The following is the semantic structure of our theme tokens.

Color modes

It's important to differentiate between color themes and device color modes. Color themes reflect specific design preferences, whereas device color modes are part of the operating system settings that influence the entire device's appearance. Typically, devices offer two modes: light mode and dark mode.

Theme Tokens

The theme palette is an abstraction that assigns color across the product with intention, creating an alias for color use. In our design framework, "on" colors are used on top of primary, secondary, surface, background, or error colors. For example, "on primary" is a color used over a primary color. These colors are mainly for text, icons, and strokes, though they can be used on surfaces as well.

Primary (-hover)

onPrimary

onPrimary-hover

onPrimary-subtle

onPrimary-subtle-hover

Secondary (-hover)

onSecondary

onSecondary-hover

onSecondary-subtle

onSecondary-subtle-hover

Cta (-hover)

onCta

onCta-hover

ctaContainer

onCtaContainer

onCtaContainer-hover

onCtaContainer-subtle

onPortal-subtle-hover

Opinions (-hover)

onOpinons

onOpinons-hover

opinionsContainer

onOpinionsContainer

onOpinons-hover

Background

onBackground

onBackground-hover

onBackground-subtle

onBackground-subtle-hover

Background-forSurfaces

onBackground

onBackground-hover

onBackground-subtle

onBackground-subtle-hover

Surface

onSurface

onSurface-hover

onSurface-subtle

onSurface-subtle-hover

Surface-highest

onSurface

onSurface-hover

onSurface-subtle

onSurface-subtle-hover

Portal

onPortal

onPortal-hover

onPortal-subtle

onPortal-subtle-hover

errorContainer

onMessage

onMessage-hover

onMessage-subtle

onMessage-subtle-hover

Use error token only for non text elements when used on semantic container

successContainer

onMessage

onMessage-hover

onMessage-subtle

onMessage-subtle-hover

Use success token only for non text elements when used on semantic container

warningContainer

onMessage

onMessage-hover

onMessage-subtle

onMessage-subtle-hover

Use warning token only for non text elements when used on semantic container.

signalContainer

onMessage

onMessage-hover

onMessage-subtle

onMessage-subtle-hover

Use signal token only for non text elements when used on semantic container.

outline

Use outine token for borders on cards

outline-subtle

Use outine-subtle token for borders on cards

Surfaces

The relationship between surface, elevation and shadow. Surface, background, and portal colors typically don't represent brand: Surface and portal colors affect surfaces of components, such as cards, and menus, but will change in dark mode to create elevation & hierarchy. The background color appears behind scrollable content. The baseline background, surface, and portal color is gray700.