Color scheme reference
This page lists all the CSS variables you have access to inside your documentation.
You can read more about using custom CSS here.
Accent colors
You can use the following accent colors in your CSS with this syntax:
style.css
.custom-component .heading {
color: var(--accent-10);
}| Variable | Color |
|---|---|
--accent-1 | 1 |
--accent-2 | 2 |
--accent-3 | 3 |
--accent-4 | 4 |
--accent-5 | 5 |
--accent-6 | 6 |
--accent-7 | 7 |
--accent-8 | 8 |
--accent-9 | 9 |
--accent-10 | 10 |
--accent-11 | 11 |
--accent-12 | 12 |
Grayscale colors
You can use the following grayscale colors in your CSS with this syntax:
style.css
.custom-component {
background: var(--gray-2);
}| Variable | Color |
|---|---|
--gray-1 | 1 |
--gray-2 | 2 |
--gray-3 | 3 |
--gray-4 | 4 |
--gray-5 | 5 |
--gray-6 | 6 |
--gray-7 | 7 |
--gray-8 | 8 |
--gray-9 | 9 |
--gray-10 | 10 |
--gray-11 | 11 |
--gray-12 | 12 |
Contrast colors
You can use the --accent-contrast and --gray-contrast for a color with a high contrast with
mid-scale colors.
style.css
.custom-component .cta-button {
color: var(--accent-contrast);
background-color: var(--accent-10);
}