Color tokens

Maturity

Beta

FYQ2 target

App color

Guide the experience by highlighting the most relevant information.

Default / Surface

#f8f8fb

Dormant

Code token

default.surface.dormant

Token set

Product/App

#f0faff

Awake

Interactive, Active, and working as intended

Code token

default.surface.awake

Token set

Product/App

#fff6f8

Critical

A critical or unexpected situation

Code token

default.surface.critical

Token set

Product/App

#fff9ed

Warning

Cautionary advice about a potential problem

Code token

default.surface.warning

Token set

Product/App

#ebfcf5

Success

Achievement of a goal

Code token

default.surface.success

Token set

Product/App

#f9f7ff

Featured

Highlighted for special attention, neither good nor bad

Code token

default.surface.featured

Token set

Product/App

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

Default / Background

#ffffff

Base [N0]

Code token

Base [N0]

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

Default / Main

#000000

Primary

Default content

Code token

default.main.primary

Token set

Product/App

#ffffff

Background

Main background

Code token

default.main.background

Token set

Product/App

#535a74

Secondary

Metadata or less important information

Code token

default.main.secondary

Token set

Product/App

Default / Extra

#2d3ca4

Upsell

Upsell icons and text color applied in cases of upgrade prompts and paywalls

Code token

Token set

#0568fd

Awake

Interactive, Active, and working as intended

Code token

default.extra.awake

Token set

Product/App

#6c718c

Dormant

Inactive, asleep, or suspended ⚠️ Use sparingly on text

Code token

default.extra.dormant

Token set

Product/App

#cc3f4d

Critical

A critical or unexpected situation

Code token

default.extra.critical

Token set

Product/App

#ac7000

Warning

Cautionary advice about a potential problem

Code token

default.extra.warning

Token set

Product/App

#158053

Success

Achievement of a goal

Code token

default.extra.success

Token set

Product/App

#6b5bee

Featured

Highlighted for special attention, neither good nor bad

Code token

default.extra.featured

Token set

Product/App

#ffffff

on Extra

Content on any of the Extra colors

Code token

default.extra.onExtra

Token set

Product/App

#1f1c7f

Upsell

Upsell icons and text color applied in cases of upgrade prompts and paywalls

Code token

Token set

#2d3ca4

Upsell

Upsell icons and text color applied in cases of upgrade prompts and paywalls

Code token

Token set

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

Inverted / Main

#282d40

Background

Main background

Code token

inverted.main.background

Token set

Product/App

#ffffff

Primary

Default content

Code token

inverted.main.primary

Token set

Product/App

#9597b0

Secondary

Metadata or less important information

Code token

inverted.main.secondary

Token set

Product/App