'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Colors · Use the system
Which color token do I use?
Answer the three questions in the sidebar — the system hands you the exact color role, live on your working scheme.
Your token Surface
surfaceContainerHigh Content uses onSurface
On surface 13.97:1 ✓ 11.14:1 ✓
light · tone 92dark · tone 17Copy
bg-surface-container-highWhy this one
Elements that float above content — dialogs, menus — take the higher container steps.
DialogMenu