Colors

Pipeline’s color palette: semantic tokens, gray scales, and brand colors for light and dark mode.

Tokens

Semantic shortcuts to common color values

  • bg
  • canvas
  • elevated
  • foreground
  • border
  • border-opaque
  • info
  • success
  • warning
  • danger
  • brand
  • link

Text

Text-only colors for body copy and the grays around it. They exist as text-* utilities only, so there is no bg-muted or border-muted.

  • text-foreground: primary text, already the page default
  • text-muted: secondary text such as labels, metadata and author names (gray-700)
  • text-subtle: the faintest text, such as timestamps and hints (gray-500). It sits below WCAG contrast minimums, so never put essential information in it.

This is an initial set, used by chat so far. Prefer these over raw text-gray-* values.

  • text-foreground The quick brown fox
  • text-muted The quick brown fox
  • text-subtle The quick brown fox

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

Translucent fills that take the surface beneath them. In dark mode, 100 is stronger than 200.

The 75 step (in every alpha scale) is interim: it exists for the resting fill of Button’s subtle variant and goes away when the alpha scales are re-stepped.

  • gray-alpha-75
  • 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-75
  • green-alpha-100
  • green-alpha-200

graphpaper

Used for the workbench deal status icons. Connotes a work in progress (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-75
  • 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