Colors

Tokens

Semantic shortcuts to common color values

Gray

By default, the gray scale flips between light and dark mode, but both scales are available independently where necessary.

• gray-50
• gray-75
• gray-100
• gray-200
• gray-300
• gray-400
• gray-500
• gray-600
• gray-700
• gray-800
• gray-900

Alpha

• gray-alpha-100
• gray-alpha-200

Light

• light-gray-50
• light-gray-75
• light-gray-100
• light-gray-200
• light-gray-300
• light-gray-400
• light-gray-500
• light-gray-600
• light-gray-700
• light-gray-800
• light-gray-900

Dark

• dark-gray-50
• dark-gray-75
• dark-gray-100
• dark-gray-200
• dark-gray-300
• dark-gray-400
• dark-gray-500
• dark-gray-600
• dark-gray-700
• dark-gray-800
• dark-gray-900

Primary

green

The main brand color. Also used for success interactions and the deal status icons.

• green-200
• green-500
• green-600
• green-700
• green-800

Alpha

• green-alpha-100
• green-alpha-200

graphpaper

Used for the workbench deal status icons. Connotes a WIP (graphpaper vibes)

blueberry

Used for informational messages. Also currently earmarked for Feedback status icons

ember

Used for error messages

• ember-200
• ember-300
• ember-500
• ember-600
• ember-700
• ember-800

Alpha

• ember-alpha-100
• ember-alpha-200

acid

Used for warning messages

Secondary

cornflower

Brand surface applications only

ocean

Brand surface applications only

copper

Brand surface applications only

Accents

Categories

Colors intended for use at small scale (to visually “pop”)

• accent-gray
• accent-dark-gray
• accent-purple
• accent-teal
• accent-green
• accent-yellow
• accent-orange
• accent-brown
• accent-pink
• accent-red