Color

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

Maturity

Beta

FYQ2 target

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.

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

Critical · Red
A critical and unexpected situation.

Success · Forest
The achievement of a goal.

Dormant · Neutral
Inactive, asleep, or suspended.

Warning · Amber
Cautionary advice about a potential problem.

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

Related content

Product Expression

The personality, essence, and approach we take when we create experiences.

Color: App

Explore in Figma

How to use

Hierarchy

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

Product Expression

The personality, essence, and approach we take when we create experiences.

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

Signify an interactive element.
Something is active and working as intended

Purpose

Encourage action or indicate progress.

Example

"This is what you can do"
"Everything is on track"
"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

"We want to let you know that this is unavailable."
"Disabled"
"Pro" (only available in the Pro plan)

#fff6f8

Critical

A critical or unexpected situation

When to use

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.
A problem happened, or a person made a mistake that prevented them from finishing their task or a process.
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

"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

"We’re letting you know about a potential problem."
"Unverified"

#ebfcfa

Success

Achievement of a goal

When to use

When things are done or went accordingly to plan.

Purpose

Inform about success.

Example

"This is done; everything went well."
"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

"We’re letting you know about…"
"New"
"Beta"
"AI"

How is awake different from featured?

When something is awake, everything is working as expected.

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 success to indicate the task or process is completed.

How is dormant different from warning?

Dormant informs that something’s unavailable.

Warning informs about a potential problem coming.

How is dormant different from featured?

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.

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

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:

Primary: CTA Buttons.

Secondary: Action Buttons and highlighted information, such as Banners or Badges.

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

Product Expression

The personality, essence, and approach we take when we create experiences.

Iconography and semantic sentiments

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.

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.

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.

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:

The Default theme is the one we’ll use for most of our user interface.

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

#ffffff

Background

Code token

default.main.background

Token set

Product/App

#000000

Primary

Code token

default.main.primary

Token set

Product/App

#535a74

Secondary

Code token

default.main.secondary

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

onExtra is the color we should use as foreground when we use one of the Extra colors as background, for example, in a Primary Call to Action Button.

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

Interaction States

Make the interactive components’ behavior predictable and explicit

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.