Color

Color isn't just about aesthetics. It's a powerful tool we use to guide you effortlessly through our products, strengthen our brand identity, and highlight the information that matters most.

Overview Core Product Colors Data Visualization Color Tokens

#Overview

#Color has purpose

At Siteimprove, color does more than just look good. It's a strategic tool used to:

Guide users: Color clarifies interactions and helps users navigate effortlessly.
Reinforce our brand: Our color choices create a consistent, recognizable Siteimprove experience.
Direct attention: Color highlights the most critical information for quick comprehension.

A card displays DCI scores for Quality Assurance (green, 95/100), Accessibility (orange, 50/100), and SEO (red, 15.7/100), illustrating how color effectively communicates success, potential issues, and critical errors.

Use color to communicate meaning clearly. For example, color can signify success, potential issues, or key actions.

A card displays DCI scores for Quality Assurance (pink, 95/100), Accessibility (purple, 50/100), and SEO (teal, 15.7/100), where the colors, while visually distinct, do not inherently indicate success or failure, emphasizing that color should always have a functional meaning.

Don't

Use color purely as decoration. It should always serve a functional purpose.

#Colour has impact

Color should be used thoughtfully to maximize its effect. Consider the following:

Highlight what matters: Vivid color draws the user's eye to the most critical elements and actions.
Establish a clear hierarchy: Use a range of shades within color families to guide users through complex information.

Reserve bold colors for essential actions or urgent messages.

Don't

Overuse color. A focused approach ensures that the most important elements truly stand out.

#Colour is accessible

Our color choices always prioritize accessibility, ensuring everyone can easily understand and use our products. Our palettes offer sufficient contrast to:

Aid in readability: Text must be easily legible against any background color.
Clarify interactions: Buttons, links, and other interactive elements should stand out clearly.

A form shows that the use of accessible color contrast ratios on large text, small text, and UI elements, ensuring readability for all users.

Refer to our Accessibility Checklist for specific color contrast guidelines, ensuring your designs meet WCAG standards.

A form shows that the use of poor color contrast ratios on large text, small text, and UI elements, sacrificing readability for visual design.

Don't

Sacrifice clarity for aesthetics. Accessibility is paramount.

To ensure brand consistency across all Siteimprove products, prioritize these core colors. While Fancy's design system offers a broader palette, these core product colors should be your default choice for building interfaces.

#Content

These define the core colors used for text, icons, and other UI elements, ensuring readability and visual hierarchy.

Swatch	Role	Hex	Usage examples
ColorGrayDarker	Content Primary	`#202124`	Used for the most important textual content.
ColorGrayDark	Content Secondary	`#4D4D50`	Used for less prominent text, such as labels or support text.
ColorGray	Content Tertiary	`#767676`	Used for the least emphasized text, such as hint text.
ColorBlue	Content Link	`#0d4cd3`	Used to highlight links and interactive elements.

#Interactive

These colors guide user interactions by providing visual feedback on hover, active, selected, and disabled states for interactive elements like buttons and links.

#Primary

Swatch	State	Usage examples
Swatch	Normal	Used for the most prominent actions (primary buttons, links).
Swatch	Hover	Color when hovering over an element (like a button).
Swatch	Active	Color when clicking or pressing an element.
Swatch	Focus	Color of a chosen element (like in a list).
Swatch	Disabled	Color of an unavailable element (like a button you can't click).

#Secondary

Swatch	State	Usage examples
Swatch	Normal	Used for secondary actions (secondary buttons, starred list items).
Swatch	Hover	Color when hovering over an element (like a button).
Swatch	Active	Color when clicking or pressing an element.
Swatch	Focus	Color of a chosen element.
Swatch	Disabled	Color of an unavailable element (like a button you can't click).

#Default

Swatch	State	Usage examples
Swatch	Normal	Subtle interactive elements (input fields, default button borders).
Swatch	Hover	Color when hovering over an element (like a button).
Swatch	Active	Color when clicking or pressing an element.
Swatch	Focus	Color of a chosen element (like in a list).
Swatch	Disabled	Color of an unavailable element (like a button you can't click).

#Destructive

Swatch	State	Usage examples
Swatch	Normal	Destructive actions (delete, permanent changes).
Swatch	Hover	Color when hovering over an element (like a button).
Swatch	Active	Color when clicking or pressing an element.
Swatch	Focus	Color of a chosen element.
Swatch	Disabled	Color of an unavailable element (like a button you can't click).

#Background

These create the foundation of the visual interface, defining the colors for main content areas, cards, and other UI elements, contributing to a clean and organized look.

Swatch	Role	Hex	Usage examples
ColorBackgroundMainPage	Background Main	`#F7F8FD`	The default background color for most screens.
ColorBackgroundStaticPrimary	Background Primary	`#FFFFFF`	Used for elevated surfaces, creating visual separation from the main background (cards, tables, lists).
ColorBackgroundStaticSecondary	Background Secondary	`#F6F6F6`	Used to delineate sections within a page or container without using hard borders (action bars, footers).
ColorBlack	Background Overlay	`#000/50%`	Applied as a semi-transparent overlay on top of other content when using modals, dialogs or sidebars.

#Layering backgrounds

To create visual depth and hierarchy, layer background colors in the following order (from bottom to top):

Background Main: The foundation of your UI. Use it for the overall background of most screens.
Background Primary: Apply to elements that need to stand out from the main background, such as cards, tables, and lists. This creates visual hierarchy and draws attention to these elements.
Background Secondary: Use to subtly separate sections within a page, like footers or headers, or to delineate content areas.
Background Overlay: A semi-transparent overlay for modals and dialogs to focus user attention by dimming the background.

#Sentiment

These colors convey emotions and highlight the importance of information, helping users quickly understand the context and nature of messages or system states.

Swatch	Role	Hex	Usage examples
ColorGreenDarker	Positive	`#216B44`	Signals positive outcomes, completed tasks, and successful interactions.
ColorYellow	Warning	`#FFD31C`	Draws attention to potential issues, errors, or actions requiring caution.
ColorRedDark	Negative	`#BF3A4A`	Reserved for critical errors, high-risk actions, or states that require immediate attention.
ColorBlue	Neutral	`#0d4cd3`	Used for important transactional information that doesn't require user action.
ColorGrayDark	Subtle	`#4D4D50`	The default choice for most text and basic UI elements.

#Data Visualization

Data visualizations make complex information beautifully clear. They transform numbers into charts, graphs, maps, and more, revealing patterns and insights. Color is a crucial tool in effective data visualisation.

#Categorical

This palette provides distinct colors for visualising categorical data where no inherent order or relationship exists between the categories. To ensure optimal contrast, apply the colors in the sequence shown below.

Swatch	Role	Hex
ColorBlue	Chart 1	`#0d4cd3`
ColorTeal	Chart 2	`#1CBCBD`
ColorOrange	Chart 3	`#ff8c54`
ColorPurpleDark	Chart 4	`#5f4eaa`
ColorPink	Chart 5	`#dd4889`
ColorBlueDark	Chart 6	`#0a399e`
ColorTealDarker	Chart 7	`#127474`
ColorYellowDarker	Chart 8	`#806a0e`

#Sequential

This cool-based palette is ideal for relationship charts, trend charts and progress bars where data has a continuous progression. Darker colors denote larger values.

While the warm-based palette has historically been used in some data visualization, e.g progress bar instances, we are transitioning away from its use for progress visualization. For optimal clarity and user motivation in showing progress towards a goal, please use our dedicated Scale Palette (See below). The warm-based palette suffers from poor legibility and makes distinguishing data steps difficult, impacting usability.

Swatch	Role	Hex
ColorHeatCool1	Sequential 1	`#E7EDFB`
ColorHeatCool1	Sequential 2	`#1CBCBD`
ColorHeatCool3	Sequential 3	`#B6C9F2`
ColorHeatCool4	Sequential 4	`#9eb7ed`
ColorHeatCool5	Sequential 5	`#6e94e5`
ColorHeatCool6	Sequential 6	`#3d70dc`
ColorHeatCool7	Sequential 7	`#0D4CD3`
ColorHeatCool8	Sequential 8	`#0A3DA9`
ColorHeatCool9	Sequential 9	`#082E7F`
ColorHeatCool10	Sequential 10	`#051E54`

An example of retention table with this sequential blue-based palette

#Scale palette

Our color scale makes progress tangible. The color transition motivates users, shifting towards green as they approach a goal's completion. The cool scale is used more selectively. It's best suited for illustrating sequential information, such as steps in a workflow, or for visualizing data points that don't inherently represent progress towards a defined outcome.

Swatch	Role	Hex
ColorScaleWarm1	Scale 1	`#42d688`
ColorScaleWarm2	Scale 2	`#ffd31c`
ColorScaleWarm3	Scale 3	`#ff8c54`
ColorScaleWarm4	Scale 4	`#ff4d62`

Examples of DCI score gauges with the scale palette

#Color Tokens

For most Siteimprove product experiences, colors are applied using design tokens. This means rather than choosing a certain shade or value, you’ll choose a design token to apply colors.