CTUS-15 Colour Palette

Owned by Derek Matthew
Last updated: Mar 27, 2020 by Uni (Hwa Young) Oh
1 min read

Add your comments directly to the page. Include links to any relevant research, data, or feedback.

Status

READY TO DOCUMENT

Impact

MEDIUM

Driver

 

Approver

 

Contributors

@Uni (Hwa Young) Oh @Joseph McLarty @Sara Greenwood @Derek Matthew

Informed

 

Due date

Outcome

  • All Colours (reference palette) should only be visible to admins

  • The design tokens are to be used by developers

    • Design tokens will be created for each component as needed

Background

https://toronto.atlassian.net/browse/CTUS-15?jql=project%20%3D%20%22CTUS%22%20AND%20component%20%3D%20%22Colour%22

Relevant data

Colour Palette

All Colours

 

Options considered

Main Colour

Black #000000

White #ffffff

Primary blue #165788

Primary light blue #337ab7

Light blue #f1f6fa

Grey blue #ecedee

Grey #e5e5e5

Light grey #f8f8f8

Accent Colour

Gold #ec9f09

Link Colour

Default primary light blue #337ab7

Hover primary blue #165788

Border Colour

Light border #d0d3d5

Dark border #6e757c

 

Note 1. Update toronton.ca border #dddddd to #d0d3d5, right nav border #e5e5e5 to #d0d3d5

Note 2. Use the same accordion grey/border colour for tab

$grey0: Update #f9f9f9 to #f8f8f8 (current tile menu hover)

$blue0: Update #e7eef3 to #f1f6fa (current right menu bg)

Fix color-primary-dark #165788 to #09263b 

Add button-primary-dark: #2c699c

Add link colour

Update margin:

  • -Paragraph margin bottom: 12px

  • -margin-xsmall: 10px;

  • -margin-samll: 20px;

  • -margin-default: 30px;

  • -margin-large: 40px;

Action items

Outcome