Colour

Overview

Colour creates visual impact and distinguishes a brand. It conveys personality, attracts the eye and indicates change.

Our main brand colours are white, purple and green. White is the most dominant colour in our palette and should be the foundation of every page. Purple and green are used to accent white space through buttons, text colour, and links.

All colours used to convey non-redundant information must meet WCAG 2.0 Level AA contrast ratio of at least 4.5:1.

The following colours are specific to digital experiences. For the full guidelines on using colour, including traditional media and other forms of communications, visit BrandHub.

Usage

For Buttons, Links, Headings and Body copy only use the following colours:

Accessible Green

Hex: #248700
Sass: $color-accessible-green

Usage: Primary button backgrounds/outline, text links

TELUS Green

Hex: #66CC00
Sass: $color-telus-green

Usage: Decorative elements (graphs/charts). Use only for decorative items (when it doesn't need to be colour accessible)

TELUS Purple

Hex: #4B286D
Sass: $color-telus-purple

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

Shark

Hex: #2A2C2E
Sass: $color-shark

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

Shuttle Grey

Hex: #54595F
Sass: $color-shuttle-grey

Usage: Colour for default links

White

Hex: #FFFFFF
Sass: $color-white

Usage: Page background, inverted links/buttons

Exceptions

These colours are not part of the TELUS brand colour palette, however are used sparingly, but intentionally to play a functional role and support a positive user experience. Example uses include notifications, errors and messaging.

Cardinal

Hex: #C12335
Sass: $color-cardinal

Usage: Error body text and icons

Lavender Blush

Hex: #FFF6F8
Sass: $color-lavender-blush

Usage: Notification/error messaging background

White Lilac

Hex: #F2EFF4
Sass: $color-white-lilac

Usage: Branded messaging background

Gainsboro

Hex: #D8D8D8
Sass: $color-gainsboro

Usage: Horizontal, vertical and wave dividers

Athens Grey

Hex: #F7F7F8
Sass: $color-athens-grey

Usage: Helper/disabled state background

Panache

Hex: #F4F9F2
Sass: $color-panache

Usage: Success messaging background

Governance

The TELUS digital colour palette is mandated by the TELUS Brand team and should not be adjusted without explicit approval. If you should have any questions regarding implementation, please get in touch with us.

Roadmap

  • v1.0: Basic colour palette implemented as Sass variables
  • Expose colour tokens to JavaScript
  • Expand the colour palette to include more shade/tints of specific hues of colour
  • Adopt a more semantically naming scheme
  • Document and codify accessible colour combinations

results matching ""

    No results matching ""