Numeric indicator

The numeric indicator can be used to highlight positive and negative numbers, amounts and percentages.

Design and usage

Structure

• Red (#B10101) is used to convey negative numbers, amounts or percentages
• Green (#3E812C) is used to convey positive numbers, amounts or percentages

• Font-weight is Sans Pro Regular or bold

  • PROHIBITED: Using with light weighting or italics

• Can be applied to any text except heading styles

  • PROHIBITED: Colouring page or section headings (H0, H1, H2, H3, H4, H5 in the markup) with the red or green colour

• Minimum font size the colours can be applied to is 16px regular or bold

  • PROHIBITED: Using red or green colour with small print (14px)

• Green must only appear on white backgrounds to ensure we pass accessibility

  • PROHIBITED: Using green on coloured backgrounds, including grey or accent colours
• If you want to use green or red is used on an accent colour background the copy must amend to white, green and red should not appear on an accent colour

Labels

• Red negative usage must include a negative indicator in addition to the colour. This can be

  • a symbol before the number, like "-"
  • a description to frame the value, like "Decrease of …"
  • a time frame after the number, like "… days"

• In addition to colour, a green positive usage must include a positive marker. This can be

  • a symbol before the number, like "+"
  • a description to frame the value, like "Increase of …" or "It will cost you …"
  • a time frame after the number, like "… days"

Placement

• Green and red text can be applied to most copy wherever needed
• For tables - the green and red should only be used to highlight the positive and negative symbols in the body copy of the table to show increases/decreases in value.

Use case and exception scenarios

• To highlight positive (green) and negative (red) numbers, amounts or percentage. For example:

  • Funds' performance comparisons
  • Policy price changes
  • Payment confirmation or errors