Color

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

Color

Maturity

Beta

FYQ2 target

RC

Repository

Overview

Color is a powerful tool for directing people’s attention, highlighting important information, and evoking emotions. Our eyes naturally gravitate towards it. We use it strategically to guide people and enhance their experience.

Having small touches of color makes it more colorful than having the whole thing in color.
— Dieter Rams

Related content


Our principles in practice

Our identity principles guide how we define our foundations to create a better experience for everyone. Here’s how they apply to color:

  1. Coherent: We have assigned specific semantic sentiments to colors to establish a coherent meaning throughout the experience, making it more predictable and easier to understand.
  2. Empowering: Color is a powerful tool for directing people’s attention, highlighting important information, and evoking emotions. Our eyes naturally gravitate towards it. We use it strategically to guide people and enhance their experience.
  3. Clear: Color is a crucial experience guiding element. We use it to highlight important elements, details, words, etc. Overusing color can distract people and defeat that purpose.
  4. Inclusive: Our color system provides a good contrast level in every context. Contrast defines how easily a person distinguishes one element from an adjacent one: higher contrast means higher visibility and legibility. Color contrast can be measured numerically using the standard defined in the WCAG 2.1 guidelines.
We combine color and iconography in the product to make it more inclusive.

We combine color and iconography in the product to make it more inclusive.

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.

But using color alone to convey information can be exclusive for colorblind people—approximately 4.5% of the world. We reinforce the differences between elements using icons.

Further reading

Color scales

Each color has eight luminance steps, with two additional lighter and darker values for the Neutral. Each step was designed for at least one specific use case. Here’s a simplified overview:

Step

Product use case

Marketing use case

000 (Neutral only)

App background

onExtra content

(Inverted) Primary content

Main background

100

Surface

TBD

200

Surface hovered

Surface Light

300

Surface pressed

TBD

400

(Inverted) Secondary content

TBD

500

Extra

onSurface Light

600

Extra hovered

Secondary content

TBD

700

Extra pressed

TBD

800

(Inverted) App background

Surface Dark

900 (Neutral only)

Primary content

Primary content

Core color palette

Core colors are the joint base for the App and Marketing. They have generic names and the full color scale. On top of this, we can use specific libraries that simplify their use for particular purposes—as in the App—which target these Core values.

Primary colors

Blue

Maze Blue is our primary color and represents an essential part of our brand personality. It plays a vital role in our designs, both in product and marketing.

Blue

blue100
#f0faff
blue200
#ceeeff
blue300
#9ad6ff
blue400
#3b9fec
blue500
#0568fd
blue600
#034fd6
blue700
#0138a9
blue800
#012577

Neutral

Neutral is the base color for content both in product and marketing.

Neutral

neutral000
#ffffff
neutral100
#f8f8fb
neutral200
#e8e8f1
neutral300
#cdcedd
neutral400
#9597b0
neutral500
#6c718c
neutral600
#535a74
neutral700
#3d425a
neutral800
#282d40
neutral900
#000000

Secondary colors

They are used as a complement, to differentiate and draw attention to specific elements, or as decoration, especially in marketing communications.

Lavender

lavender100
#f9f7ff
lavender200
#e7e7ff
lavender300
#cccaff
lavender400
#928bff
lavender500
#6b5bee
lavender600
#5247c8
lavender700
#3a30a4
lavender800
#1f1c7f

Rose

rose100
#fff6fe
rose200
#ffe0fc
rose300
#fcb9f7
rose400
#e46ada
rose500
#bb3db0
rose600
#982d8e
rose700
#7a1070
rose800
#56054f

Amber

amber100
#fff7f1
amber200
#ffe4d1
amber300
#fcc489
amber400
#d2891a
amber500
#ac5f00
amber600
#8c4a00
amber700
#6b3500
amber800
#4b2200

Cyan

cyan100
#defffe
cyan200
#bbf4f3
cyan300
#81dde7
cyan400
#2ba7b8
cyan500
#147e90
cyan600
#016479
cyan700
#024a5a
cyan800
#02323d

Lila

lila100
#fcf7ff
lila200
#f3e3ff
lila300
#e5c2fe
lila400
#c576f9
lila500
#9c48e0
lila600
#7c2fc7
lila700
#6215a0
lila800
#450773

Red

red100
#fff6f8
red200
#fee3e5
red300
#fcc0c3
red400
#f86c74
red500
#cc3f4d
red600
#a4313c
red700
#7d222b
red800
#57151f

Forest

forest100
#ebfcfa
forest200
#b8f5ee
forest300
#87ded6
forest400
#38a9a2
forest500
#15807b
forest600
#006760
forest700
#024c48
forest800
#013430

 

Accessible pairings

Pairings

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.