Color

Design tokens

Color tokens that can be applied for specific uses. All colors have a dark and high-contrast mode companion.

See our full palette

Accent primary

Accentuates UI elements such as buttons, links, and focus outlines.

color / accent

#0062fa

#00cadb

primary

color / accent / primary

#0053cb

#61dce9

hover

#0041a4

#a6ecf4

active

rgba(0,98,250,0.08)

rgba(0,202,219,0.08)

deemphasized

#0062fa

#00cadb

selected

High contrast mode

Windows 11 Desert and Night sky examples:

color / accent

#202020

#ffee32

primary

color / accent / primary

#903909

#d6b4fd

hover

#d6b4fd

active

#903909

#d6b4fd

deemphasized

#903909

#d6b4fd

selected

Background color

#ffe8ea

#6e001f

critical

#e2f7ff

#00317e

information

#e1ffe1

#004800

success

#fff4d0

#592b00

warning

#ffffff

#23222b

box

Used for boxes, cards and containers

#f0f0f4

#23222b

info

#ffffff

#1c1b22

canvas

Please use "canvas-v2" instead.

High contrast mode

Windows 11 Night Sky example:

#000000

critical

#000000

information

#000000

success

#000000

warning

#000000

box

Used for boxes, cards and containers

#000000

info

#000000

canvas

Please use "canvas-v2" instead.

Focus outline

focus / outline

#0062fa

#00cadb

color

High contrast mode

Windows 11 Desert and Night sky examples:

focus / outline

#ffffff

color

Link

link

#0062fa

#00cadb

color

link / color

#0053cb

#61dce9

hover

#0041a4

#a6ecf4

active

#0062fa

#00cadb

visited

High contrast

Windows 11 Desert and Night Sky examples:

link

#1c5e75

#8080ff

color

link / color

#1c5e75

#8080ff

hover

#1c5e75

#8080ff

active

#8080ff

visited

Outline

outline / color

#b20037

#ffa0aa

error

High contrast

Windows 11 Desert and Night sky examples:

outline / color

#ffffff

error

Text

text

#15141a

#fbfbfe

color

text / color

rgba(21,20,26,0.69)

rgba(251,251,254,0.69)

deemphasized

Secondary

#b20037

#ffa0aa

error

Critical

rgba(21,20,26,0.4)

rgba(251,251,254,0.4)

disabled

text / color / accent / primary

#ffffff

#15141a

selected

text / color / list / item

#15141a

#fbfbfe

hover

High contrast mode

Windows 11 Desert and Night sky examples:

text

#3d3d3d

#ffffff

color

text / color

#3d3d3d

#ffffff

deemphasized

Secondary

#3d3d3d

#ffffff

error

Critical

#676767

#a6a6a6

disabled

text / color / accent / primary

#fff5e3

#2b2b2b

selected

text / color / list / item

#fff5e3

#2b2b2b

hover