Skip to content
Mesh
3.3.0

Colors

We use a combination of whitespace and color to aid usability and deliver clean experiences to end users. Color helps distinguish our brand, and delivers a consistent user experience across our various digital products. These colors have been adjusted from those in our brand guidelines to ensure they are appropriate for digital use, ie. to ensure they meet minimum accessibility standards. Only use these colors - nothing else.

Installation

bash
npm install @nib-components/colors

Color should be pulled from theme for whitelabel designs

While color pulled from the Theme is more limited than shown in this page, it works across all brands. As a result, all whitelabelled designs should pull color directly from the theme to avoid problems.

A review of color is on the DesignOps backlog

A full review of color usage is on the DesignOps backlog to ensure all colors meet minimum accessibility standards and our design aesthetic. You may see other colors ‘in the wild’, however, your first choice should be to use only those colors listed here. If you must use other colors, you must ensure they comply with AA standard contrast ratios. The safest choice for color presently is to pull directly from a Theme, which is slightly more limited but works across all brands for whitelabelled designs.

Usage

This package exports an object of colors which can be accessed as follows:

jsx
import colors from '@nib-components/colors';
const GreenBox = styled.div`
background-color: ${colors.william};
color: ${colors.white};
`;

See the complete list of colors below.

Core colors

These are the primary colors that should be used in all designs and serve to distinguish digital assets associated with our brand. William should be used as the primary brand color, and can be used anywhere to accentuate our brand identity. William should also be used for things like primary buttons, links, and visual success status indicators. Be cautious not to overuse this color.

Snow (White) should be used as the background color as much as possible. If required Sneezy can be used as an alternative background color. Limiting backgrounds to these two colors ensures the best contrast and web accessibility.

Doc should be the first choice for all typography.

William

colors.william

#008a20

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Snow (White)

colors.white

#ffffff

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Tick In Circle AAA Contrast

Sneezy

colors.sneezy

#eee

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Tick In Circle AAA Contrast

Doc

colors.doc

#444444

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Tick In Circle AAA Contrast

Functional colors

These colors should be reserved for functional elements or messaging, such as indicating the outcome of an action or highlighting a success/failure. They should be used sparingly so as not to risk confusing their meaning. These colors are also used for our Alerts.

William should only be used for success alerts.

Malcolm should be used for information alerts.

Kate should be used for warning alerts and as an accent to help prevent the user from making an error.

Julia should be used for error alerts.

Kevin should be the first choice for error messaging or other visual indicators of error states as it meets both normal and large AA contrast requirements.

Malcolm

colors.malcolm

#00abcc

Cross In Circle Large AA Contrast

Cross In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Kate

colors.kate

#ffb400

Cross In Circle Large AA Contrast

Cross In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Julia

colors.julia

#E74C3C

Tick In Circle Large AA Contrast

Cross In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Kevin

colors.kevin

#94040c

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Tick In Circle AAA Contrast

William

colors.william

#008a20

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Shades of grey

If required to group or separate content, the below shades of grey can be used.

Bashful

colors.bashful

#222

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Tick In Circle AAA Contrast

Dopey

colors.dopey

#666

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Grumpy

colors.grumpy

#888

Tick In Circle Large AA Contrast

Cross In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Happy

colors.happy

#ccc

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Sleepy

colors.sleepy

#ddd

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Tick In Circle AAA Contrast

Products

These colors are used on ARHI products to indicate higher or lower levels of insurance cover. These colors should NOT be used elsewhere, unless otherwise indicated.

Greens

These are used for combined hospital and extras products.

William

colors.william

#008a20

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Charles

colors.charles

#0a6d12

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Philip

colors.philip

#005b11

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Tick In Circle AAA Contrast

Blues

These are used for hospital only products.

Tony

colors.tony

#0067b6

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Cross In Circle AAA Contrast

John

colors.john

#18659f

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Harold

colors.harold

#005487

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Tick In Circle AAA Contrast

Purples

These are used for extras only products.

Quentin

colors.quentin

#68367f

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Tick In Circle AAA Contrast

Ninian

colors.ninian

#602f73

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Tick In Circle AAA Contrast

Zelman

colors.zelman

#552c68

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Tick In Circle AAA Contrast

The CheckUp colors

These colors are used to indicate content categories in the CheckUp. They should NOT be used anywhere else.

Active

colors.active

#dde224

Cross In Circle Large AA Contrast

Cross In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Future

colors.future

#3d5afe

Tick In Circle Large AA Contrast

Tick In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Health

colors.health

#ff5722

Tick In Circle Large AA Contrast

Cross In Circle Normal AA Contrast

Cross In Circle AAA Contrast

Community

colors.community

#1de9b6

Cross In Circle Large AA Contrast

Cross In Circle Normal AA Contrast

Cross In Circle AAA Contrast