Color variables
Each color scheme defines the following CSS variables. CSS in consuming applications should always reference these CSS variables instead of hard--coding values for colors in our design system.
See this page for more details on working with colors.
info
Except when suffixed with -rgb, color variables must reference valid CSS color values. These can be referenced by any CSS property that accepts color values.
info
Variables suffixed with -rgb must reference comma-separated RGB values. For example:
--color--dscout-rgb: 10, 115, 235;
They can only be referenced in CSS color functions that accept comma-separated RGB values. For example:
color: rgba(var(--color--dscout-rgb), 0.3);
Original color palette
The original color palette describes most colors semantically, communicating what the colors are intended to represent in our system.
Monotone color palette
--color--main--color--main-rgb--color--invert--color--invert-rgb--color--none--color--black--color--black-rgb--color--gray-1--color--gray-1-rgb--color--gray-2--color--gray-2-rgb--color--gray-3--color--gray-3-rgb--color--gray-4--color--gray-4-rgb--color--gray-5--color--gray-5-rgb--color--gray-6--color--gray-6-rgb--color--white--color--white-rgb
Primary color palette
--color--dscout-light--color--dscout-outline--color--dscout--color--dscout-rgb--color--dscout-dark--color--dscout-darkest--color--alert-light--color--alert-outline--color--alert--color--alert-rgb--color--alert-dark--color--alert-darkest--color--coachmark-light--color--coachmark-outline--color--coachmark--color--coachmark-rgb--color--coachmark-dark--color--coachmark-darkest
Secondary color palette
--color--close-light--color--close--color--close-rgb--color--close-dark--color--close-darkest--color--success-light--color--success--color--success-rgb--color--success-dark--color--success-darkest--color--archive-light--color--archive--color--archive-rgb--color--archive-dark--color--archive-darkest--color--note-light--color--note--color--note-rgb--color--note-dark--color--note-darkest--color--marker-light--color--marker--color--marker-rgb--color--marker-dark--color--marker-darkest--color--test-light--color--test--color--test-rgb--color--test-dark--color--test-darkest--color--scout-light--color--scout--color--scout-rgb--color--scout-dark--color--scout-darkest
Part colors
--color--part-0--color--part-0-rgb--color--part-1--color--part-1-rgb--color--part-2--color--part-2-rgb--color--part-3--color--part-3-rgb--color--part-4--color--part-4-rgb--color--part-5--color--part-5-rgb--color--part-6--color--part-6-rgb--color--part-7--color--part-7-rgb--color--part-8--color--part-8-rgb--color--part-9--color--part-9-rgb
Product color aliases
--color--live--color--live-rgb--color--live-dark--color--live-darkest--color--diary--color--diary-rgb--color--diary-dark--color--diary-darkest--color--screener--color--screener-rgb--color--screener-dark--color--screener-darkest--color--shadow--color--shadow-rgb
Updated color palette
A new color palette is being developed. It provides names that describe the color instead of describing its semantic usage, and uses a numeric scale to represent how light or dark a color is.
Monotone color palette
--color--gray-25--color--gray-25-rgb--color--gray-50--color--gray-50-rgb--color--gray-100--color--gray-100-rgb--color--gray-200--color--gray-200-rgb--color--gray-300--color--gray-300-rgb--color--gray-500--color--gray-500-rgb--color--gray-800--color--gray-800-rgb
Primary color palette
--color--green-100--color--green-300--color--green-500--color--green-500-rgb--color--green-600--color--green-700--color--green-900--color--green-925--color--green-950--color--red-50--color--red-100--color--red-300--color--red-500--color--red-500-rgb--color--red-600--color--red-700--color--purple-100--color--purple-300--color--purple-500--color--purple-500-rgb--color--purple-600--color--purple-700--color--blue-50--color--blue-100--color--blue-300--color--blue-500--color--blue-500-rgb--color--blue-600--color--blue-600-rgb--color--blue-700
Secondary colors
--color--sea-100--color--sea-300--color--sea-500--color--sea-500-rgb--color--sea-600--color--sea-700--color--sky-100--color--sky-300--color--sky-500--color--sky-500-rgb--color--sky-600--color--sky-700--color--caribbean-100--color--caribbean-300--color--caribbean-500--color--caribbean-500-rgb--color--caribbean-600--color--caribbean-700--color--amethyst-100--color--amethyst-300--color--amethyst-500--color--amethyst-500-rgb--color--amethyst-600--color--amethyst-700--color--rose-100--color--rose-300--color--rose-500--color--rose-500-rgb--color--rose-600--color--rose-700--color--tomato-100--color--tomato-300--color--tomato-500--color--tomato-500-rgb--color--tomato-600--color--tomato-700--color--gold-100--color--gold-300--color--gold-500--color--gold-500-rgb--color--gold-600--color--gold-700--color--sand-100--color--sand-300--color--sand-500--color--sand-500-rgb--color--sand-600--color--sand-700--color--jungle-100--color--jungle-300--color--jungle-500--color--jungle-500-rgb--color--jungle-600--color--jungle-700--color--lime-100--color--lime-300--color--lime-500--color--lime-500-rgb--color--lime-600--color--lime-700
AI colors
--color--ai-purple-50,--color--ai-purple-100,--color--ai-purple-300,--color--ai-purple-500,--color--ai-purple-600,--color--ai-purple-700,--color--ai-purple-800,--color--ai-pink-50,--color--ai-pink-100,--color--ai-pink-300,--color--ai-pink-500,--color--ai-pink-600,--color--ai-pink-700,--color--ai-pink-800,
AI gradients
The colors below are available via utility classes only as a background color.
--gradient--ai-light-a--gradient--ai-a--gradient--ai-reverse-a--gradient--ai-light-b--gradient--ai-b