Visual design

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

Spacing guidelines

The goal of whitespace is to maximize readability and understanding of content/data. CosmosWork uses a 8px system (multiples of eight pixels) to define relationships with the data.

  • 8px The minimum horizontal padding in an interactive element (e.g., the distance from the border edge of an input field, from the text inside it).
  • 4px (8px * .5): The space between an icon and its related text (e.g., a back button with an image of an arrow and the word “Back”).
  • 16px (8px * 2): The space between rows of data inside the same container, or the inner padding on the container itself.
  • 24px (8px * 3): The space between unique sections of data within a card.

Last updated: Apr 2020

Typography

Open Sans is the foundation type family in all Pega applications. With a wide range of weights, and a large diverse character set, the uniform simplicity and legibility over other font families makes Open Sans a great complement to both local and international applications.

UsageValues
Default14px, 1.43 line-height
H122px bold
H2 (Summary panel tabs)15px
H318px semi-bold
H414px bold
Field label13px semi-bold, 80% opacity
Secondary data13px, 60% opacity
Badge text12px bold, all caps

Last updated: Apr 2020