Skip to content
Design system

Color

Colors come in two layers. Primitives are the raw palette. Semantic colors give each color a job, and they are the only ones you use.

How to use color

  • Use the semantic colors on this page. Never use a primitive directly.
  • Every semantic color has a light and a dark value. The browser picks one with light-dark(), based on color-scheme. Set data-theme="light" or data-theme="dark" on <html> to force a mode. Without it, the site follows the system.
  • Never use color as the only way to show something. Add text, an icon or a change in shape.

Semantic colors

Backgrounds

Preview Token Light Dark Use
--background-page gray.985#FAFAFA gray.190#141414 The page itself, behind everything else.
--background-surface gray.1000#FFFFFF gray.150#0B0B0B Surfaces that sit on the page, such as cards and form fields.
--background-surface-muted gray.961#F2F2F2 gray.240#1F1F1F A quiet grey area that sets content apart without a border.
--background-surface-prominent gray.920#E4E4E4 gray.300#2E2E2E A stronger grey area, for content that should stand out more than a muted surface.
--background-primary-subtle purple.910#E9D9FF purple.320#42027A A soft tint of the primary color, for example behind marked text.
--background-negative red.960#FEEDEA red.300#4F1B14 Behind error messages.

Text

Preview Token Light Dark Use
--text-default gray.270#262626 gray.720#A4A4A4 Body text.
--text-subtle black-alpha.57oklch(0% 0 0 / 57%) white-alpha.54oklch(100% 0 0 / 54%) Secondary text, such as meta data, help text and placeholders. Still meets 4.5:1.
--text-prominent gray.150#0B0B0B gray.920#E4E4E4 Headings and text that needs the most weight.
--text-negative red.560#D91201 red.720#F47C6B Error messages.
--text-underline-color black-alpha.43oklch(0% 0 0 / 43%) white-alpha.38oklch(100% 0 0 / 38%) The underline of a link.
--text-underline-color-hover purple.590#9742FB purple.630#A05AFF The underline of a link on hover.

Brand and highlight

Preview Token Light Dark Use
--color-primary purple.590#9742FB purple.630#A05AFF The brand color, used for primary actions and accents.
--color-primary-hover purple.550#8625FE purple.710#B483FF The primary color on hover.
--color-on-primary gray.1000#FFFFFF gray.150#0B0B0B Text and icons on the primary color.
--color-highlight yellow.968#FFFF00 yellow.300#303000 Behind highlighted text, like a marker pen.

Focus

Preview Token Light Dark Use
--focus-ring-color purple.590#9742FB purple.630#A05AFF The focus ring around the element that has keyboard focus.

Borders

Preview Token Light Dark Use
--border-color-subtle black-alpha.5oklch(0% 0 0 / 5%) white-alpha.9oklch(100% 0 0 / 9%) Dividers. Decorative, so no contrast requirement.
--border-color-default gray.870#D4D4D4 gray.310#303030 Cards. Decorative, so no contrast requirement.
--border-color-prominent black-alpha.43oklch(0% 0 0 / 43%) white-alpha.38oklch(100% 0 0 / 38%) Buttons, form fields and cards on hover. Meets 3:1 against the page.
--border-color-prominent-hover gray.150#0B0B0B gray.920#E4E4E4 Buttons and form fields on hover.
--border-color-negative red.560#D91201 red.720#F47C6B Form fields with an error.

Shadow

Preview Token Light Dark Use
--shadow-color-hover black-alpha.15oklch(0% 0 0 / 15%) black-alpha.90oklch(0% 0 0 / 90%) The color of the hover shadow.

Contrast

Every pair below is checked in both modes. The check fails, and the site is not built, if a pair with a requirement falls below it.

Text on every background, including marked and highlighted text.

Text: at least 4.5:1 (WCAG 2.2, 1.4.3).

Foreground Background Light Dark
--text-default --background-page 14.43:1 Pass 7.44:1 Pass
--text-default --background-surface 15.07:1 Pass 7.93:1 Pass
--text-default --background-surface-muted 13.45:1 Pass 6.63:1 Pass
--text-default --background-surface-prominent 11.89:1 Pass 5.50:1 Pass
--text-default --background-primary-subtle 11.36:1 Pass 5.56:1 Pass
--text-default --color-highlight 14.03:1 Pass 5.45:1 Pass
--text-subtle --background-page 5.07:1 Pass 5.99:1 Pass
--text-subtle --background-surface 5.13:1 Pass 6.07:1 Pass
--text-subtle --background-surface-muted 4.97:1 Pass 5.71:1 Pass
--text-subtle --background-surface-prominent 4.80:1 Pass 5.13:1 Pass
--text-subtle --background-primary-subtle 4.73:1 Pass 4.67:1 Pass
--text-subtle --color-highlight 5.05:1 Pass 5.07:1 Pass
--text-prominent --background-page 18.84:1 Pass 14.57:1 Pass
--text-prominent --background-surface 19.67:1 Pass 15.53:1 Pass
--text-prominent --background-surface-muted 17.56:1 Pass 12.98:1 Pass
--text-prominent --background-surface-prominent 15.53:1 Pass 10.76:1 Pass
--text-prominent --background-primary-subtle 14.83:1 Pass 10.88:1 Pass
--text-prominent --color-highlight 18.32:1 Pass 10.68:1 Pass

Error messages, inside an error box and on their own.

Text: at least 4.5:1 (WCAG 2.2, 1.4.3).

Foreground Background Light Dark
--text-negative --background-negative 4.61:1 Pass 5.33:1 Pass
--text-negative --background-page 4.99:1 Pass 6.99:1 Pass
--text-negative --background-surface 5.21:1 Pass 7.45:1 Pass

Text on the primary button, including hover.

Text: at least 4.5:1 (WCAG 2.2, 1.4.3).

Foreground Background Light Dark
--color-on-primary --color-primary 4.67:1 Pass 5.06:1 Pass
--color-on-primary --color-primary-hover 5.66:1 Pass 7.15:1 Pass

Why the primary color and the highlight color are never used for text.

No requirement. Shown to explain a rule.

Foreground Background Light Dark
--color-primary --background-page 4.48:1 No requirement 4.75:1 No requirement
--color-primary --background-surface 4.67:1 No requirement 5.06:1 No requirement
--color-highlight --background-page 1.03:1 No requirement 1.37:1 No requirement
--color-highlight --background-surface 1.07:1 No requirement 1.45:1 No requirement

Borders that show where buttons and form fields are, including hover and errors.

Interface parts: at least 3:1 (WCAG 2.2, 1.4.11).

Foreground Background Light Dark
--border-color-prominent --background-page 3.12:1 Pass 3.58:1 Pass
--border-color-prominent --background-surface 3.14:1 Pass 3.52:1 Pass
--border-color-prominent-hover --background-page 18.84:1 Pass 14.57:1 Pass
--border-color-prominent-hover --background-surface 19.67:1 Pass 15.53:1 Pass
--border-color-negative --background-page 4.99:1 Pass 6.99:1 Pass
--border-color-negative --background-surface 5.21:1 Pass 7.45:1 Pass

The focus ring against every surface it can appear on.

Interface parts: at least 3:1 (WCAG 2.2, 1.4.11).

Foreground Background Light Dark
--focus-ring-color --background-page 4.48:1 Pass 4.75:1 Pass
--focus-ring-color --background-surface 4.67:1 Pass 5.06:1 Pass
--focus-ring-color --background-surface-muted 4.17:1 Pass 4.23:1 Pass
--focus-ring-color --background-surface-prominent 3.69:1 Pass 3.51:1 Pass

Dividers and card borders. Decorative, so there is no requirement.

No requirement. Shown to explain a rule.

Foreground Background Light Dark
--border-color-subtle --background-page 1.12:1 No requirement 1.27:1 No requirement
--border-color-subtle --background-surface 1.12:1 No requirement 1.22:1 No requirement
--border-color-subtle --background-surface-muted 1.12:1 No requirement 1.31:1 No requirement
--border-color-subtle --background-surface-prominent 1.11:1 No requirement 1.33:1 No requirement
--border-color-default --background-page 1.42:1 No requirement 1.40:1 No requirement
--border-color-default --background-surface 1.48:1 No requirement 1.49:1 No requirement
--border-color-default --background-surface-muted 1.32:1 No requirement 1.25:1 No requirement
--border-color-default --background-surface-prominent 1.17:1 No requirement 1.04:1 No requirement

Primitives

The raw palette. Only semantic colors point to these values, so a primitive can change without touching a component. The number is the lightness in OKLCH, from 0 (black) to 1000 (white). For the alpha scales, the number is the opacity.

gray

  • --gray-150 #0B0B0B
  • --gray-190 #141414
  • --gray-240 #1F1F1F
  • --gray-270 #262626
  • --gray-300 #2E2E2E
  • --gray-310 #303030
  • --gray-370 #404040
  • --gray-440 #525252
  • --gray-550 #717171
  • --gray-640 #8C8C8C
  • --gray-660 #929292
  • --gray-680 #989898
  • --gray-720 #A4A4A4
  • --gray-800 #BEBEBE
  • --gray-870 #D4D4D4
  • --gray-920 #E4E4E4
  • --gray-961 #F2F2F2
  • --gray-985 #FAFAFA
  • --gray-1000 #FFFFFF

black-alpha

  • --black-alpha-5 oklch(0% 0 0 / 5%)
  • --black-alpha-15 oklch(0% 0 0 / 15%)
  • --black-alpha-43 oklch(0% 0 0 / 43%)
  • --black-alpha-57 oklch(0% 0 0 / 57%)
  • --black-alpha-90 oklch(0% 0 0 / 90%)

white-alpha

  • --white-alpha-9 oklch(100% 0 0 / 9%)
  • --white-alpha-38 oklch(100% 0 0 / 38%)
  • --white-alpha-54 oklch(100% 0 0 / 54%)

purple

  • --purple-320 #42027A
  • --purple-550 #8625FE
  • --purple-590 #9742FB
  • --purple-630 #A05AFF
  • --purple-710 #B483FF
  • --purple-910 #E9D9FF

blue

  • --blue-620 #008BE2
  • --blue-650 #0398E2

yellow

  • --yellow-300 #303000
  • --yellow-968 #FFFF00

red

  • --red-300 #4F1B14
  • --red-560 #D91201
  • --red-720 #F47C6B
  • --red-960 #FEEDEA

Colors in the WordPress editor

Four semantic colors are offered as background colors in the block editor. They are generated into theme.json from the same source, and follow dark mode on the site. They can not be used as text colors.

Preview Name in the editor Token Value in theme.json
Surface muted --background-surface-muted #F2F2F2
Surface prominent --background-surface-prominent #E4E4E4
Primary subtle --background-primary-subtle #E9D9FF
Highlight --color-highlight #FFFF00