We use „Dark ink“ for headlines and table text. „Body text“ for Color for paragraphs and buttons. If you have some subtext that isn’t highly important, use the “Subtext” color. Use “inactive” for the non-active states of the tabs text, legend (when used as a filter), or as a subtext in tooltips.
Primary (Signal) Colors
The primary colors are used for the menu elements, buttons, links, borders or icons, and charts.
The dark colors are used for the hover state of the primary colors, text colors for labels, charts. The light colors are for disabled state and backgrounds of labels and banners.
Colors should be used logically:
– use green for success indicators, confirmations, positive changes
– use red for negative changes, errors, dangerous actions that might significantly affect the project
– use yellow for warnings and suboptimal performance indicators
– use blue for the neutral information
– “grey-60” is used for example within the card elements to highlight the blocks of content.
– “grey-50” is used everywhere in Tool as an interface background.
– “grey-40” is used for lines, shadows and other subtle effects, often in combination with opacity.
The signal colors green, red, yellow and their darker values are used in reports, where the reader’s special attention is needed.
Default chart colors:
Above mentioned colors are used for most of the informative charts – bar chart, line chart, heat map. We use darker colors for bigger (stronger) values. For the distribution chart we add 2 more colors derived from existing ones:
Example distrubution palette:
Darker colors should represent bigger values here as well.
If we need additional colors for charts:
GSC color palette:
These color palettes are used for a Google Search Console (GSC) chart. They are based on the original GSC colors to retain the similarity for the users and adjusted for 5 steps. 4 main colors are marked with “*”.
* Chart blue 1: clicks
* Teal: impressions
* Sea blue: CTR (clicks / impressions)
* Purple: position
To create the palette a general rule was used, in HSL mode, from left to right:
Minor adjustments were made to individual colors to enhance the contrast. The final palette shows sufficient contrast in grayscale as well, which is important for accessibility:
The resulting graph:
Same graph in grayscale: