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