Sign Up

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);
}

Was this page helpful?