Text and background combination guidance
Use level 100 for text on backgrounds of levels 0-40.
Use level 0 for text (dark mode) on backgrounds of levels 80-100.
neutral
cool
warm
red
orange
yellow
green
cyan
blue
violet
purple
pink
Colorful text on default layers guidance
The following guidance applies to colorful text usage on top of our default layer background colors known as canvas and box.
Canvas is the equivalent of the body background color for in-content pages, as well as for any overlay (e.g. panel, modal) background colors for the chrome.
Box is the equivalent of containers / cards.
On canvas
neutral
cool
warm
red
orange
yellow
green
cyan
blue
violet
purple
pink
On box
neutral
cool
warm
red
orange
yellow
green
cyan
blue
violet
purple
pink
UI graphic element combinations guidance
Use levels 100 on backgrounds 0-40.