operate ˗ˏˋ design ˎˊ-

© 2026 Operate Machine, Co.

Theme

Colors

Tokens

Semantic shortcuts to common color values

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

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

Shadows

  • shadow-none
  • shadow-canvas
  • shadow-elevated

Legacy

Note

  • These shadows should be used alongside border bg-clip-padding.
  • These shadows are not intended for use in new components.
  • shadow-100
  • shadow-200
  • shadow-300
  • shadow-400
  • shadow-500

Fonts

Sans (Muoto)

Font Weight

Whilst Muoto is a variable font — see below — only the following weights should be used:

normal
font-normal
book
font-book
medium
font-medium

Playground

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