Colour

Nucleus uses a colour system to guide our users, create a branded look-and-feel, draw attention to important information, and make content more accessible for everyone.

Principles

Productboard uses functional coloring that supports products designed to be run on workstations. Colour is used to communicate not to decorate. We use colour sparingly and intentionally in order to emphasize important information. The color system facilitates all-day use while minimizing visual fatigue.

 

Utilise colour roles

We offer a curated palette of colours that are intended for specific roles within Productboard. For example, we apply consistent colouring to components such as text, status, buttons, and navigation. This helps users to identify a component and understand its relationship to its environment.

 

Make it accessible

When the colour system is applied, it will be in compliance with colour accessibility standards. We support WCAG 2.1 level AA which requires 4.5:1 contrast for text. We never rely solely on colour for communication in Nord. Accessibility ensures that our product works for people with visual impairments and improves legibility for all users.

 


Colour roles

Colour roles describe the intention behind the colour. For example, colour roles are applied to buttons to differentiate between primary, secondary, warning, or dangerous actions.

Role

Description

🌑 Neutral

Use for default text and secondary UI elements, such as secondary buttons or navigation elements.

🔵 Primary

Use for primary actions or elements that communicate the Atlassian brand.

🔵 Informational

Use for informative UI, such as an information icon, or UI that communicates something is in progress.

🟢 Success

Use to communicate a favorable outcome, such as a success message.

🟡 Warning

Use for UI that communicates caution to prevent a mistake or error from occurring.

🔴 Danger

Use for UI that communicates danger or serious error states.

🟣 Discovery

Use for UI that communicates something new, such as onboarding or new feature information.

Emphasise levels

 

Emphasise

Emphasise

Emphasis determines the amount of contrast a color has against the default surface. Emphasis can range from subtlest to boldest. Bolder colors have more contrast against the default surface, which adds more attention than subtle colors.

 


Applying colours to interface

Common patterns of colour application are used to create consistency and convey meaning. The below sections explain in detail how to use and apply Nucleus Design System’s colours in different contexts.

 

📦 Container

Surface colors affect surfaces of components, such as page, card, sheet, and popover.

 

⌨️ Text

Text always appears on a surface and contains modifiers to indicate hierarchy, status, and importance.

 

✅ Icon

Icon colors should be used when an icon is placed on a surface. If an icon appears on the accent color, use the text-on-accent color in place of the default icon color.

 

Border

Borders can define the edges of a component or separate content areas.

 

1️⃣ Primary

Use primary colors for primary actions like buttons, icons and text on navigation and tabs, and for the background in navigation and tab interactive states.

 

2️⃣ Secondary

Use secondary colours for secondary and tertiary buttons and the background of form elements.

 

Status colours

Colour can be used to highlight important information by giving it a status. For example the green success status indicates a strong positive state.

 

Success

Success colors indicate something positive, like the success of a merchant action or to illustrate growth.

 

Warning

Success colors indicate something positive, like the success of a merchant action or to illustrate growth.

 

Danger

Danger colors are for destructive interactive elements, errors, and critical events that require immediate action.

 

Informational

Highlight colors indicate important elements that don’t require immediate action. They’re used with informational banners and badges, indicators that draw attention to new information, loading or progress bars, and data visualization.

 

Discovery

Highlight colors indicate important elements that don’t require immediate action. They’re used with informational banners and badges, indicators that draw attention to new information, loading or progress bars, and data visualization.

 

Usage

Color

Color can be used to add contrast and reinforce the hierarchy between text.

For example, one way to distinguish between a title and a subtitle is to apply --p-text-color to the title, and --p-text-subdued to the subtitle. Using a lighter color for secondary information provides contrast between the text and helps reinforce hierarchy even when the text is the same size and weight.