Colors

Cosmos Work color palette

Consistency of color is critical to maintaining a coherent family of products, and accurately communicating the nature of specific content within an application.

Colors are also used to distinguish where on the screen particular content resides, such as on mobile devices where users need to be able to see visual breaks while scrolling.

Primary palette

  • #000

    Content
  • #252B32

    Main nav
  • rgba(0,0,0,.8)

    Labels
  • #8396AB

    Input border
  • #CBD3DC

    Dividers
  • #E9EEF3

    App bkg
  • #0076D1

    Interactive
  • #69BEFF

    Interactive (Dark mode)
  • #FFF

    Card background

Secondary palette, reserved for statuses and badges

  • #A6020D

    Urgent text
  • #D91C29

    Urgent banner
  • #FFD9DB

    Urgent background
  • #C04503

    Warn text
  • #FD6000

    Warn banner
  • #FEEDE2

    Warn background
  • #006624

    Good text
  • #20AA50

    Good banner
  • #D4F7D5

    Good background
  • #681FC3

    Wait text
  • #AC75F0

    Wait banner
  • #F1E9FB

    Wait background
  • #4C5967

    Info text
  • #8396AB

    Info banner
  • #E9EEF3

    Info background

Last updated: Apr 2020