Theme

Colors

Gray

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

Primary

Implementation details

oklch formula for Primary and Secondary colors

Formulated in OP-696 by Moe and Daniela.

Key	Lightness delta	Usage
-500		Background / Default
-600	-0.05	Border
-700	-0.07	Hover
-800	-0.12	Hover Border

green

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

• green-500, green
• green-600
• green-700
• green-800

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-500, ember
• ember-600
• ember-700
• ember-800

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”)

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

Shadows

• shadow-none
• shadow-100
• shadow-200
• shadow-300
• shadow-400
• shadow-500

Utilities

Accessibility

• focus-ring – resets browser default focus styling and displays a ring when the element is focused
• focus-ring-offset-<color> – changes the offset color of the focus ring to match the background color of its parent