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
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.