Tokens

Below is a list of the most useful tokens available in the design system. See here for more details on the Arc color system.

Token nameDescriptionLight modeDark mode

Utility colors

$danger

The danger color. Used to communicate danger within the interface. This is something that is critical for the user to pay attention to and is common for error states.

$red500

var(--__arc--colors-dmRed100)

$primary

The primary color

$purple500

var(--__arc--colors-dmPurple100)

$publish

The publish color. Used to communicate publish within the interface. We purposefully disconnect from Green = Go within Arc, and instead prefer Green = Publish.

$green600

var(--__arc--colors-dmGreen100)

$success

The success color. Used to communicate success within the interface.

$blue500

var(--__arc--colors-dmBlue100)

$warning

The warning color. Used to communicate warning within the interface. This is something the user should pay attention to at some point, but it is not urgent.

$orange500

var(--__arc--colors-dmOrange100)

Text colors

$text

The default text color

$gray900

var(--__arc--colors-dmGray100)

$textDanger

The text color to indicate danger.

$red600

var(--__arc--colors-dmRed100)

$textLight

Light text color. For when you need less emphasis.

$gray500

var(--__arc--colors-dmGray200)

$textPublish

The text color to indicate publish.

$green600

var(--__arc--colors-dmGreen100)

$textSuccess

The text color to indicate success.

$blue600

var(--__arc--colors-dmBlue100)

$textWarning

The text color to indicate warning.

$orange600

var(--__arc--colors-dmOrange100)

Background colors

$bgLight

A light version of the background color.

$gray300

var(--__arc--colors-dmBackground300)

$bgLighter

A lighter version of background color.

$gray200

var(--__arc--colors-dmBackground200)

$bgLightest

A lightest version of background

$gray100

var(--__arc--colors-dmBackground100)

Focus

$focus

The default focus border color.

$purple500

var(--__arc--colors-dmPurple200)

$focusDanger

The default focus danger border color. This is used to communicate form fields that have errors associated with them.

$red500

var(--__arc--colors-dmRed100)

$focusSuccess

The default focus success border color. Used in helper text to communicate a successful form value.

$green600

var(--__arc--colors-dmGreen100)

Buttons and Links

Text links

$linkColor

Color for links

$purple500

var(--__arc--colors-dmPurple100)

$linkColorHover

Hover color for links.

$purple500

var(--__arc--colors-dmPurple100)

Default buttons

$buttonDefaultBackground

The background color for general buttons.

$gray100

var(--__arc--colors-dmGray100)

$buttonDefaultBackgroundHover

The background color on hover, for general buttons.

$gray300

var(--__arc--colors-dmGray200)

$buttonDefaultFocusColor

$purple500

var(--__arc--colors-dmPurple100)

$buttonDefaultText

The text color of general buttons.

$gray900

var(--__arc--colors-black)

$buttonDefaultTextHover

The text color on hover, for general buttons.

$gray900

var(--__arc--colors-black)

Ghost buttons

$buttonGhostBackground

The background color for ghost buttons.

transparent

transparent

$buttonGhostBackgroundHover

The background color on hover, for ghost buttons.

$gray300

var(--__arc--colors-dmGray200)

$buttonGhostBorder

The border color for ghost buttons.

$gray400

var(--__arc--colors-dmGray200)

$buttonGhostBorderHover

The border color on hover, for ghost buttons.

$gray400

var(--__arc--colors-dmGray200)

$buttonGhostText

The text color for ghost buttons.

$gray900

var(--__arc--colors-white)

$buttonGhostTextHover

The text color on hover, for ghost buttons.

$gray900

var(--__arc--colors-white)

Outline buttons

$buttonOutlineBackgroundHover

$gray300

var(--__arc--colors-dmGray200)

$buttonOutlineBackgroundTextHover

$white

var(--__arc--colors-white)

$buttonOutlinealertBackgroundHover

$gray300

var(--__arc--colors-dmGray200)

$buttonOutlinealertBackgroundTextHover

$black

var(--__arc--colors-black)

Publish buttons

$buttonPublishBackground

The background color for publish buttons.

$green600

var(--__arc--colors-dmGreen100)

$buttonPublishBackgroundHover

The background color on hover, for primary buttons.

$green900

var(--__arc--colors-dmGreen300)

$buttonPublishFocusColor

$green600

var(--__arc--colors-dmGreen100)

$buttonPublishText

The text color for publish buttons.

$white

var(--__arc--colors-black)

$buttonPublishTextHover

The text color on hover, for publish buttons.

$white

var(--__arc--colors-black)

Primary buttons

$buttonPrimaryBackground

The background color for primary buttons.

$purple500

var(--__arc--colors-dmPurple200)

$buttonPrimaryBackgroundHover

The background color on hover, for primary buttons.

$purple800

var(--__arc--colors-dmPurple300)

$buttonPrimaryFocusColor

$purple500

var(--__arc--colors-dmPurple200)

$buttonPrimaryText

The text color for primary buttons.

$white

var(--__arc--colors-black)

$buttonPrimaryTextHover

The text color on hover, for primary buttons.

$white

var(--__arc--colors-black)

Destructive buttons

$buttonDestructiveBackground

The background color for destructive buttons.

$red500

var(--__arc--colors-dmRed100)

$buttonDestructiveBackgroundHover

The background color on hover, for destructive buttons.

$red800

var(--__arc--colors-dmRed300)

$buttonDestructiveFocusColor

$red500

var(--__arc--colors-dmRed100)

$buttonDestructiveText

The text color for destructive buttons.

$white

var(--__arc--colors-black)

$buttonDestructiveTextHover

The text color on hover, for destructive buttons.

$white

var(--__arc--colors-black)

Disabled buttons

$buttonDisabledBackground

The background color for disabled buttons.

$gray500

var(--__arc--colors-dmBackground100)

$buttonDisabledText

The text color for disabled buttons.

$gray300

var(--__arc--colors-gray300)

Forms

Form border colors

$formBorder

The form border color.

$gray300

var(--__arc--colors-dmGray200)

$formBorderDanger

The danger form border color.

$red500

var(--__arc--colors-dmRed100)

$formBorderDisabled

The disabled form border color.

$gray500

var(--__arc--colors-dmGray200)

$formBorderSuccess

The success form border color.

$green600

var(--__arc--colors-dmGreen100)

Form background colors

$formBackground

The form background color.

$white

var(--__arc--colors-dmBackground300)

$formBackgroundDanger

The form danger background color.

$white

var(--__arc--colors-dmBackground300)

$formBackgroundDisabled

The form disabled background color.

$gray50

var(--__arc--colors-dmBackground100)

$formBackgroundFocused

$white

var(--__arc--colors-white)

$formBackgroundSelected

$purple50

var(--__arc--colors-dmGray100)

$formBackgroundSuccess

The form success background color.

$white

var(--__arc--colors-dmBackground300)

Form label text colors

$formLabelTextColor

The form label text color.

$gray900

var(--__arc--colors-white)

$formLabelTextColorDanger

The form danger label text color.

$gray900

var(--__arc--colors-white)

$formLabelTextColorDisabled

The form disabled label text color.

$gray500

var(--__arc--colors-white)

$formLabelTextColorSuccess

The form success label text color.

$gray900

var(--__arc--colors-white)

Form input text colors

$formInputTextColor

The form text color.

$gray900

var(--__arc--colors-white)

$formInputTextColorDanger

The form danger text color.

$red500

var(--__arc--colors-dmRed200)

$formInputTextColorDisabled

The form disabled text color.

$gray400

var(--__arc--colors-dmGray200)

$formInputTextColorSuccess

The form success text color.

$green600

var(--__arc--colors-dmGreen200)

Form placeholder text colors

$formPlaceholderTextColor

The form placeholder text color.

$gray500

var(--__arc--colors-gray300)

$formPlaceholderTextColorDanger

The form danger placeholder text color.

$gray500

var(--__arc--colors-gray300)

$formPlaceholderTextColorDisabled

The form disabled placeholder text color.

$gray500

var(--__arc--colors-gray300)

$formPlaceholderTextColorSuccess

The form success placeholder text color.

$gray500

var(--__arc--colors-gray300)

Form helper text colors

$formHelperTextColor

The form helper text color.

$gray500

var(--__arc--colors-gray400)

$formHelperTextColorDanger

The form danger helper text color.

$red500

var(--__arc--colors-gray400)

$formHelperTextColorDisabled

The form disabled helper text color.

$gray400

var(--__arc--colors-gray400)

$formHelperTextColorSuccess

The form success helper text color.

$green600

var(--__arc--colors-gray400)

Form interactive fill colors

$formIconsFillColor

The icon fill color for form icons.

$gray700

var(--__arc--colors-white)

$formIconsFillColorDanger

The icon fill color for danger form icons.

$red500

var(--__arc--colors-dmRed100)

$formIconsFillColorDisabled

The icon fill color for disabled form icons.

$gray500

var(--__arc--colors-dmGray100)

$formIconsFillColorSelected

$purple500

var(--__arc--colors-dmPurple100)

$formIconsFillColorSuccess

The icon fill color for success form icons.

$green600

var(--__arc--colors-dmGreen100)