Colour

Overview

Color creates visual impact and distinguishes a brand. It conveys personality, attracts the eye and indicates change. At a minimum; colours use the WCAG 2.0 Level AA contrast ratio of at least 4.5:1.

Brand colours

White is the cornerstone of our palette and the most dominant colour in it, but purple and green are what make it distinctive and memorable. See usage description below.

Buttons/Links/Headings/Body

Accessible Green

$color-accessible-green

#248700

Usage: Primary button backgrounds/outline

Telus Green

$color-telus-green

#66CC00

Usage: Decorative elements (graphs/charts).

* use only for decorative items (when it doesn’t need to be colour accessible)

Telus Purple

$color-telus-purple

#4B286D

Usage: Headings, secondary button background/outline, chevron links

Shark

$color-shark

#2A2C2E

Usage: Sub headings (H3, H4), body text, and focus form objects borders

Shuttle Grey

$color-shuttle-grey

#54595F

Usage: Colour for default links

White

$color-white

#FFFFFF

Usage: Page background, inverted links/buttons

Notifications/messaging/errors

Cardinal

$color-cardinal

#C12335

Usage: Error body text and icons

Lavender Blush

$color-lavender-blush

#FFF6F8

Usage: Notification/error messaging background

White Lilac

$color-white-lilac

#F2EFF4

Usage: Branded messaging background

Gainsboro

$color-gainsboro

#D8D8D8

Usage: Horizontal, vertical and wave dividers

Athens Grey

$color-athens-grey

#F7F7F8

Usage: Helper/disabled state background

Panache

$color-panache

#F4F9F2

Usage: Success messaging background