Color

Primary Palette

This is the main User Interface color palette. Shades of orange, blue-grey, white and grey are used for backgrounds, buttons and text in the application.

Orange
600#F15C28
Blue Grey
600#15607B
White
N/A#ffffff
Grey
600#222426

Orange is used for primary actions and highlighted information.

Blue-grey is used for secondary actions. Different shades of blue-grey are used for theme backgrounds borders and elements.

White is used for backgrounds and text over colored backgrounds.

Greys are used for titles and body text. Different shades of grey define the importance of information.

Theme Palette

Blue Grey
600#15607B
Different shades of Blue-Grey are used in the interface theme giving each piece its own importance. BlueGrey-600 is used for secondary actions, secondary headings and Icons.
500#97CCDF
BlueGrey-500 is a slightly lighter shade and is used in dark borders
400#D2E8F0
BlueGrey-400 is used for borders and divider lines
200#F5FAFB
BlueGrey-200 is used in Light Background
100#f7f9fa
BlueGrey-100 is our lightest shade of BlueGrey and is used as a hint when hovering actionable elements.

Text & Links

Grey
600#222426

Headings and Primary text is written in Grey-600, the different shades of grey define the importance and readability of information. Paragraphs like this one or any other general copy is written in a lighter shade Grey-500. Links are written in Blue, to ensure they look clickable.

Some text is highlighted in Orange to show importance and stand out. Other text with very low importance such as disabled links in breadcrumbs or hint text are written in Grey-300.

500#4f5459
300#aab0b3
Blue
600#0067B9
Orange
600#f15c28


Secondary Palette

A secondary palette of colors is used to give tone and different importance to messages, copy and icons.

Red
600#c33c48
Red-600 is used for Copy and Icons to represent errors, it is also used for outlining fields and elements that are invalid.
300#ffe9f1
Red-300 a lighter shade of Red is used for error messages backgrounds.

Yellow
600#a07818

Yellow-600 is used for Copy and Icons in warning messages.

300#f9f5cd

Yellow-300 a lighter shade of Yellow is used for warning or informative-warning messages backgrounds.

Green
600#4a7f35

Green-600 is used for Copy and Icons in success messages.

300#d5ebe0

Green-300 a lighter shade of Green is used for success messages backgrounds.

Blue-Grey
600#15607B

Blue-Grey-600 is used for Copy and Icons in info messages.

400#D2E8F0

Blue-Grey-400 a lighter shade of Blue-Grey is used for informative messages backgrounds.