Aero UI

Color

Colors help user to distinguish different types of content and data. They help create hierarchies and make it clear what parts of the interface a user can interact with.

RelOrange

Reserved for the Relativity brand and indicating a user’s location in the application as well as what is required.

#f8981d
Indication/requirement bar

Action Blue

Relativity uses blue to present interactive content to users and guide to next steps.

#0075e0
Link color, Primary buttons

Secondary Blue

  • #dcf4f9
  • #99d9ff
  • #1d98fa
  • #00588f
  • #06466f
  • Communicative background, highlight hover
  • Emphasized communicative background
  • hover/pressed state
  • body text, shaded body text

Success Green

Green is used to provide positive feedback upon successful completion of a task.

#1f8b51
Success status/icons

Secondary Green

  • #d1f7e2
  • #176b3e
  • #0f4b2b
  • Communicative background

Warning Red

Red is used to bring users’ attention to an area of the screen that needs immediate attention.

#eb5656
Error status/icons

Secondary Red

  • #ffe2e2
  • #823030
  • #6c2828
  • Communicative background

Alert Yellow

The use of yellow is to draw the users attention but is not a blocker like red.

#f4c009
Alert/warning status/icons

Secondary Yellow

  • #fff5ca
  • #aa8502
  • #846600
  • Communicative background

Neutral

Our neutral color palette is used to highlight and distinguish static, non-clickable elements.

 

  • #fff
  • #f3f8fb
  • #e2ebf3
  • #cddae8
  • #acbfd6
  • #8c93a6
  • #6c7584
  • #485769
  • #3d454e
  • Card background
  • Page background
  • Sidebar Navigation
  • Highlighted table column, Input background, Tertiary button fill
  • Borders, Horixontal/Vertical Rules
  • Passive text/objects, Static icons
  • Secondary text on white
  • Label text, Table Column Headers
  • Base text, Data Cells, Icons