Brands
Color
Backgrounds
By default, no color is assigned to the background, there may be sections within a page that require to be highlighted and sometimes alternate rows of a table would require to be highlighted. In such a case, you may use the color below.
Mercer Brand Colors
The colors documented below along with their usage are the only ones to be used for creation of components or any other element that must be added to the Mercer interface.
All accessibility guidelines associated with the usage of these colors can be found in the Links
Primary Colors
Common Usage
Dark Saphire
#002C77
Brand color, Logo, Header, Footer, Page titles, Headings
Saphire 400
#005C96
Focus states - Icons, Links, Buttons Default states if icons, Links & Buttons 35% Lighter - Hover state
Saphire 300
#00ABCB
Banners - Large Text Focus states - Icons, Buttons Shades & Tints in Progress bars
Saphire 300
#00ABCB
Banners - Large Text Focus states - Icons, Buttons Shades & Tints in Progress bars
Secondary Colors
Color C
#00968F
Accent color, Focus state links Shades & Tints in radial progress bar, Sliders, etc.
Shades
#00163B
Mercer Blue 60D
#00235F
Mercer Blue 20D
#041A45
Color A 60D
#041A45
Color A 20D
#003F59
Color B 60D
#007EB3
Color B 20D
#003C39
Color C 60D
#007873
Color C 20D
Tints
#072A71
Mercer Blue 20L
#8096BB
Mercer Blue 60L
#3C67BE
Color A 20L
#9DB3DE
Color A 60L
15% Opacity Color A
A variation of Color A is used for down states, which is 15% Opaque.
#33B1E6
Color B 20L
#33ABA6
Color B 60L
#33ABAG
Color C 20L
#80CAC7
Color C 60L
These colors have specific usage that can be found across components and layouts. The usages have been documented in relevant parts of the style guide. Some examples of the Shades and Tints of the Primary colors are as below:
Visual Example
Semantic Colors
Information
#1E5DDC
Information Background
Text/ Icon color for Error #FFFFFF
Success
#14853D
Success Background
Text/ Icon color for Error #FFFFFF
Warning
#FFBE00
Warning Background
Text/ Icon color for Error #002C77
Error / Alert
#C53532
Error Background
Text/ Icon color for Error #FFFFFF
It is recommended that the semantic colors are not used for any other purpose than to indicate the uses as documented above. Using these colors for any purpose other than these can lead to miscommunication.
The alert notification components have been documented here.
Tertiary Colors
Green 500
#00ac41
Purple 500
#00ac41
Pink 500
#00ac41
Used in gradients in background for thumbnail visuals & Banners.
Gradient
Neutral Colors
White
#FFFFFF
Text color on dark backgrounds.
Refer to Accessibility for guidance on permissible contrast ratios
Onyx Lighter 400
#F0F0F0
Background for alternate rows in tables, Background color to highlight content, Footer
Text/ Icon Color #333333
Onyx Lighter 500
#E6E6E6
Boundaries for text fields (Optional Usage)
Text/ Icon Color #333333
onyx 100
#CCCCCC
Disabled options, Boundaries for text fields (Optional Usage)
Text/ Icon color for Error #333333
Onyx 200
#999999
Disabled options, Boundaries for text fields (Optional Usage)
* Only use #072A71 for text and #FFFFFF for large text and icons on this background.
Onyx 300
#666666
Body Text*
Text/ Icon color for secondary emphasis of send tier content, example - pick-list/ #FFFFFF
Onyx 500
#333333
Body Text*
Text/ Icon color for high emphasis body copy #FFFFFF
* It is preferable to avoid usage of Black (#000000) against a white background. A slightly lighter tint such as Onyx 500 can enable a more comfortable reading experience.