The evolution of the TELUS brand continues! The brand new Universal Design System is now available and all teams are encouraged to transition their applications to UDS components in order to better reflect the latest vision of the TELUS brand.
TDS Core and TDS Community will continue with limited support and restrict new feature requests.
While diving into this documentation, you’ll notice some new updates:
- We’ll provide direct links to corresponding UDS components from either tds-core / tds-community
- We’ll provide notice about deprecated components (that may not be implemented on UDS in the near future)
Contact us for more information on how to get support. And join our TELUS Slack channel for updates.
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:
TELUS Brand colour palette
TELUS Purple
Hex: #4B286D
JS: colorTelusPurple
Usage: Headings, secondary button background/outline, chevron links
TELUS Green
Hex: #66CC00
JS: colorTelusGreen
Usage: Decorative elements (graphs/charts). Use only for decorative items (when it doesn't need to be colour accessible)
Accessible Green
Hex: #2B8000
JS: colorAccessibleGreen
Usage: Primary button backgrounds/outline, text links
White
Hex: #FFFFFF
JS: colorWhite
Usage: Page background, inverted links/buttons
Grey colour palette
Shark
Hex: #2A2C2E
JS: colorGreyShark
Usage: Sub headings (H3, H4), body text
Shuttle Grey
Hex: #54595F
JS: colorGreyShuttle
Usage: Colour for default links
Raven Grey
Hex: #71757B
JS: colorGreyRaven
Usage: Form input border
Gainsboro
Hex: #D8D8D8
JS: colorGreyGainsboro
Usage: Horizontal, vertical and wave dividers
Athens Grey
Hex: #F7F7F8
JS: colorGreyAthens
Usage: Helper/disabled state background
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.
Nofitication colour palette
Lavender Blush
Hex: #FFF6F8
JS: colorLavenderBlush
Usage: Notification/error messaging background
Panache
Hex: #F4F9F2
JS: colorPanache
Usage: Success messaging background
White Lilac
Hex: #F2EFF4
JS: colorWhiteLilac
Usage: Branded messaging background
Cardinal
Hex: #C12335
JS: colorCardinal
Usage: Error body text and icons
Dark Rajah
Hex: #8C5415
JS: colorRajahDark
Usage: Warning notification alert icon
Rajah
Hex: #FACA69
JS: colorRajah
Usage: Warning notification border
Light Rajah
Hex: #FFF9EE
JS: colorRajahLight
Usage: Warning notification 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.