Welcome to the Mercer Design System

Introduction

This is the new re-modularized version of the Mercer Digital Styleguide. Each section within this styleguide can be used individually as a component or as a whole.

Click on one of the links in the navigation to get started!

Part of the re-modularization is to allow this site to be a one-stop shop for Content Authors, Content Creators and Developers. Components will include visual examples alongside developer information. From each individual component page developers can also download the source files for that particular component.

Browser Compatibility

Components being developed work for all the browsers currently in use including Chrome, Safari, Edge and Firefox (the only exception being the new scrollable type dropdown where Firefox doesn't support a design change of the scroll bar).

Developer Notes:

The focus state shown for several form elements is designed so that when Web Accessibility is added in the application it should ideally work with keyboard interaction. Currently we have developed it for the showcase to work with mouse cursor interaction. The developer may remove the focus state utilisation if the application doesn't require it, or the Accessibility feature is not being used.

The down state shown for several form elements here, refers to their behaviour when screen size is tablet/mobile and the mouse cursor click is replaced by a finger tap and works only in this way. Currently the down state is being implemented for mouse click also, therefore, developers are advised to use the behaviour as per the requirement.

Changelog

For more information about all major/minor changes please refer to the Changelog page.