Color

Direct people’s attention, highlight important information, and spark emotions.

Color

Maturity

Beta

FYQ2 target

RC

Repository

Overview

Following our gentle principle, most of our content is built up with neutral color tones, avoiding being attention-grabbing without a purpose.

Semantic colors are intended to draw attention to essential experience elements and, through specific sentiments, assign them a particular meaning that facilitates their differentiation.

Swatches - Awake

Awake · Blue
Interactive, active, and working as intended.

Swatches - Critical

Critical · Red
A critical and unexpected situation.

Swatches - Success

Success · Forest
The achievement of a goal.

Swatches - Dormant

Dormant · Neutral
Inactive, asleep, or suspended.

Swatches - Warning

Warning · Amber
Cautionary advice about a potential problem.

Swatches - Featured

Featured · Lavender
Highlighted for special attention or treatment, neither good nor bad.

Related content


How to use

Hierarchy

Our three-level emphasis system

Our three-level emphasis system

We have created a holistic emphasis system to create focus and hierarchy in our designs. We use color in combination with other visual properties. But there must be a direct relationship between the visible and the semantics to guarantee a good experience. Our system uses purpose as the cornerstone of our visual decisions.

Related content

Semantic sentiments

Color sentiments enhance the coherence and understanding of our communication. However, we should avoid using semantic sentiments as mere decoration to ensure they serve their intended purpose effectively.

#f0faff
Awake
Interactive, Active, and working as intended
When to use
  1. Signify an interactive element.
  2. Something is active and working as intended
Purpose
Encourage action or indicate progress.
Example
  1. "This is what you can do"
  2. "Everything is on track"
  3. "Live"
#f8f8fb
Dormant
Inactive, asleep, or suspended
When to use
Something’s not available or locked.
Purpose
State something’s unavailable and inform why (when needed/possible).
Example
  1. "We want to let you know that this is unavailable."
  2. "Disabled"
  3. "Pro" (only available in the Pro plan)
#fff6f8
Critical
A critical or unexpected situation
When to use
  1. Something’s not working and requires immediate action because of its importance and severity; regardless if it’s a person’s error or a system error.
  2. A problem happened, or a person made a mistake that prevented them from finishing their task or a process.
  3. Indicate actions that are destructive and can’t be undone—they require confirmation.
Purpose
Clearly state what’s going on and provide an actionable solution.
Example
  1. "We’ve got a problem, and we need to act now."
#fff7f1
Warning
Cautionary advice about a potential problem
When to use
Informs about/indicates an action that can be taken to prevent errors or unwanted things from happening.
Purpose
Clearly state what’s going on and provide an actionable solution.
Example
  1. "We’re letting you know about a potential problem."
  2. "Unverified"
#ebfcfa
Success
Achievement of a goal
When to use
When things are done or went accordingly to plan.
Purpose
Inform about success.
Example
  1. "This is done; everything went well."
  2. "Enabled"
#f9f7ff
Featured
Highlighted for special attention, neither good nor bad
When to use
Provides valuable information to people about something important or out of the ordinary, essential to understand the context and making a decision.
Purpose
Neutrally inform people.
Example
  1. "We’re letting you know about…"
  2. "New"
  3. "Beta"
  4. "AI"
When something is awake, everything is working as expected.

When something is awake, everything is working as expected.

When something is featured, it’s out of the ordinary and needs attention.

When something is featured, it’s out of the ordinary and needs attention.

How is awake different from success?

We use awake to indicate a task or a process is in progress.

We use awake to indicate a task or a process is in progress.

We use success to indicate the task or process is completed.

We use success to indicate the task or process is completed.

How is dormant different from warning?

Dormant informs that something’s unavailable.

Dormant informs that something’s unavailable.

Warning informs about a potential problem coming.

Warning informs about a potential problem coming.

When something is dormant, our primary goal is to inform people that something’s unavailable. In the case of a required upgrade, we want to convince people that something (access or feature) is valuable and desired.

When something is dormant, our primary goal is to inform people that something’s unavailable. In the case of a required upgrade, we want to convince people that something (access or feature) is valuable and desired.

When something is featured we want to call attention to something neither good nor bad but essential to understand the context and—sometimes—decide on something available.

When something is featured we want to call attention to something neither good nor bad but essential to understand the context and—sometimes—decide on something available.

How is critical different from warning?

In critical, the damage already happened or can’t be undone. People can’t continue until the problem is fixed.

In critical, the damage already happened or can’t be undone. People can’t continue until the problem is fixed.

In warning, we’re providing advice before the unwanted results happen. People can ignore it and continue.

In warning, we’re providing advice before the unwanted results happen. People can ignore it and continue.

Emphasis levels and semantic sentiments

Emphasis and semantic sentiment combinations.

Emphasis and semantic sentiment combinations.

We deliberately limit the use of specific roles at the Primary and Tertiary levels to avoid a too granular—not gentle—use of our system components:

  1. Primary: CTA Buttons.
  2. Secondary: Action Buttons and highlighted information, such as Banners or Badges.
  3. Tertiary: Most of the UI, including Forms or Cards. They are also available in CTA Buttons and Action Buttons.

These combinations pass at least an AA accessibility contrast of 4.5:1.

Related content

Iconography and semantic sentiments

Each semantic color role has a default icon. You can change it to reinforce the associated content.

Each semantic color role has a default icon. You can change it to reinforce the associated content.

Protanopia and deuteranopia make you unable to tell the difference between red and green.

Protanopia and deuteranopia make you unable to tell the difference between red and green.

Protanopia and deuteranopia make you unable to tell the difference between red and green.

Protanopia and deuteranopia make you unable to tell the difference between red and green.

Achromatopsia is a medical syndrome that exhibits symptoms relating to five conditions, most notably monochromacy.

Achromatopsia is a medical syndrome that exhibits symptoms relating to five conditions, most notably monochromacy.

Tritanopia is a rare genetic color blindness that affects a person’s ability to distinguish between blue and yellow colors.

Tritanopia is a rare genetic color blindness that affects a person’s ability to distinguish between blue and yellow colors.

We consistently combine messaging, color, and iconography to establish a coherent and inclusive meaning throughout the experience.

Theming

Two themes applied in the same system mode.

Two themes applied in the same system mode.

A theme is a collection of attributes applied to an entire context or an individual element. Every element in that context applies each supported theme’s attributes when you use a theme.

We shouldn’t confuse themes with system modes. Themes operate at a context level, while system modes operate at the operative system level, like macOS or Windows.

Currently, we don’t support system modes, but we support themes. Each one has a different purpose:

  1. The Default theme is the one we’ll use for most of our user interface.
  2. The Inverted theme allows us to highlight specific key but ephemeral interface elements with high contrast. These elements automatically disappear after a given period.

Styles

Main

The Main colors build the backbone of our interface and are based on different neutral tones. We have a single background color and two foreground colors that will allow us to reduce the emphasis on certain less critical elements, facilitating information scanning.

Default / Main

#000000

Primary

Code token
default.main.primary
Token set
Product/App
#535a74

Secondary

Code token
default.main.secondary
Token set
Product/App
#ffffff

Background

Code token
default.main.background
Token set
Product/App

Inverted / Main

#282d40

Background

Code token
inverted.main.background
Token set
Product/App
#ffffff

Primary

Code token
inverted.main.primary
Token set
Product/App
#9597b0

Secondary

Code token
inverted.main.secondary
Token set
Product/App

Extra

Extra colors emphasize the most important content using the Primary emphasis level within our visual hierarchy. We have six semantic colors to differentiate the content depending on what we want to communicate.

They are typically used as a foreground on top of Surfaces, but they can be used as a background in particular cases.

Default / Extra

#0568fd

Awake

Code token
default.extra.awake
Token set
Product/App
#6c718c

Dormant

Code token
default.extra.dormant
Token set
Product/App
#cc3f4d

Critical

Code token
default.extra.critical
Token set
Product/App
#ac5f00

Warning

Code token
default.extra.warning
Token set
Product/App
#15807b

Success

Code token
default.extra.success
Token set
Product/App
#6b5bee

Featured

Code token
default.extra.featured
Token set
Product/App
#ffffff

on Extra

Code token
default.extra.onExtra
Token set
Product/App

Surface

Surfaces emphasize specific important—but not crucial—elements on top of the main background. They box content using a Secondary emphasis level within our visual hierarchy as a background.

Default / Surface

#f0faff

Awake

Code token
default.surface.awake
Token set
Product/App
#f8f8fb

Dormant

Code token
default.surface.dormant
Token set
Product/App
#fff6f8

Critical

Code token
default.surface.critical
Token set
Product/App
#fff7f1

Warning

Code token
default.surface.warning
Token set
Product/App
#ebfcfa

Success

Code token
default.surface.success
Token set
Product/App
#f9f7ff

Featured

Code token
default.surface.featured
Token set
Product/App

Outline

Outlines help us distinguish two elements from one another, but using too many of them can make the UI feel busy and cluttered. Instead, rely on spacing first, and use outlines as the last resource.

Default / Outline

rgba(5,104,253,0.28)

Awake

Code token
default.outline.awake
Token set
Product/App
rgba(108,113,140,0.28)

Dormant

Code token
default.outline.dormant
Token set
Product/App
rgba(204,63,77,0.28)

Critical

Code token
default.outline.critical
Token set
Product/App

Shadow

Shadows create levels of depth that help us better communicate the interaction of some essential user interface components like controls, menus, and dialogs.

Default / Shadow

rgba(5,104,253,0.08)

Awake

Code token
default.shadow.awake
Token set
Product/App
rgba(108,113,140,0.08)

Dormant

Code token
default.shadow.dormant
Token set
Product/App
rgba(204,63,77,0.08)

Critical

Code token
default.shadow.critical
Token set
Product/App

States

We use a combination of color contrast and shadow effects to signify interactive elements’ states.

Related content

Default / ExtraState

#034fd6

Awake Hovered

Code token
default.extraState.awakeHovered
Token set
Product/App
#0138a9

Awake Pressed

Code token
default.extraState.awakePressed
Token set
Product/App
#a4313c

Critical Hovered

Code token
default.extraState.criticalHovered
Token set
Product/App
#7d222b

Critical Pressed

Code token
default.extraState.criticalPressed
Token set
Product/App

Default / SurfaceState

#ceeeff

Awake Hovered

Code token
default.surfaceState.awakeHovered
Token set
Product/App
#9ad6ff

Awake Pressed

Code token
default.surfaceState.awakePressed
Token set
Product/App
#fee3e5

Critical Hovered

Code token
default.surfaceState.criticalHovered
Token set
Product/App
#fcc0c3

Critical Pressed

Code token
default.surfaceState.criticalPressed
Token set
Product/App

Quality checklist

This element passes the following requirements described in our Component lifecycle.

Maturity

Beta

α · Design tokens

It uses Ariane design tokens.

α · Official assets

It uses the official Ariane assets (e.g., icons and illustrations) in one of the official sizes.

α · Accessible use of color

Its color contrast ratio is at least 4.5:1 for text and interactive areas.

α · Target areas

Its interactive target areas are large enough for users to accurately select them, following the Fitts law.

α · Naming agreement

Its name is agreed upon and shared between design and development.

α · Responsive L1

Is responsive to different viewport sizes.

α · User-triggered states

If the component is interactive, all its possible user-triggered interactive states are defined.

β · Responsive L2

The responsive behavior has been reviewed and validated by the team.

β · State properties

All the possible state attributes are defined.

β · Docs L1

It has essential documentation with at least primary usage.

β · Use cases

All the uses are audited and refined.

RC · Definition agreement

Its naming and properties are audited and aligned in design and code.

RC · Accessible L1

Its accessibility is manually audited, and any significant issues are fixed.

RC · Docs L2

The documentation covers the most common use cases and is expected to be iterated during the Release Candidate phase.

RC · Storybook

Includes a Storybook playground of the component.

Stable · Stable API

The component and its API remain stable, with no breaking changes for at least one month.

Stable · Adaptive

Supports adaptive design via preference queries.

Stable · Docs L3

Detailed documentation exists for design, content, accessibility, and implementation, including do’s and dont’s.