Color Palette

Brand Colors

Light Green
Light mode:
  • Secondary actions
  • MEMS
  • Model buttons hover color
Dark mode:
  • Primary actions
  • MEMS
  • Model buttons hover color
Medium Green
Light mode:
  • Primary actions
  • Daycent
  • Data buttons hover color
Dark mode:
  • Secondary actions
  • Daycent
  • Data buttons hover color
Dark Green
Light mode:
  • Header bar
  • Selected menu/list items
  • Primary button hover color
  • Models (with modifications)
Dark mode:
  • Header bar
  • Models (with modifications)
Amber
Light mode:
  • Warning
  • Loading
Dark mode:
  • Selected menu/list items
  • Primary button hover color
  • Warning
  • Loading
Neutral Dark
Light mode:
  • Text
  • Data
Dark mode:
  • Background
  • Data (with modifications)

Button variants

Badge variants

PrimarySecondaryDataModelsDaycentMEMSDeleteOutline

Background Shades

background
background-50
background-100
background-200

Platform Feature Colors

Data
Brand Color we're using:Light mode - Neutral DarkDark mode - Neutral Dark, but much lighter
Accent color: Medium Green
Models
Brand Color we're using:Dark Green, but slightly lighter and less saturated
Accent color: Light Green
Daycent
Brand Color we're using:Medium Green, but slightly lighter and more saturated
MEMS
Brand Color we're using:Light Green, but slightly lighter