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

Background

Relevant data

Reference Typography Style:

Interesting:

Here is the first draft. Please edit or add sections.

Roboto regular (font-weight:400)

Roboto medium (font-weight:500)

Roboto black (font-weight:700)

Alternative fonts: Helvetica Neue, Helvetica, Arial

Body paragraph line height is 1.4287

	Desktop	Mobile/Tablet	Colour
Paragraph, Top navigation & I want to menu (first level)	18px on large screens	16px on small screens	Black
Top navigation (second level), Breadcrumb, Right Navigation (In This Section, Related Information, Contact Us), Footer Filter	16px		Black
Photo caption, Disclaimer	14px		Grey (#737373)
H1	36px	32px	Black
H2	28px	26px	Black
H3	22px		Black
H4	19px		Black
H5	18px		Black
Accordion panel heading H2	22px		Black

Margin-Xsmall	10px	Paragraph bottom
Margin-Small	20px	Button, Panel box in form, Table
Margin-Medium	30px	Accordion top, Call to Action bottom, Highlighted Content bottom, Tile, Bullet menu, Banner image bottom	Default?
Margin-Large	40px	Tab top & bottom, Accordion bottom
None	0	Call to Action top, Highlighted Content top

Note 1. When two elements are stacked, the default should be the larger margin. Do not combine the both margin of elements.

Note 2. Current Call to Action margin bottom is 18px

Note 3. Current table margin top & bottom is 15px

Note 4. Current Banner image margin bottom is 36px with paragraph or heading, 40px with tile menu.

Note. Current tile padding top/bottom is 10px and padding right/left is 15px

H1	Margin top: 0 Margin bottom: 10px
H2	Margin top: 30px Margin bottom: 10px First child margin top: 10px
H3	Margin top: 30px Margin bottom: 10px
H4	Margin top: 25px Margin bottom: 10px
H5	Margin top: 10px; Margin bottom: 3px
H3 in accordion	First child margin-top: 15px
H3 in Tab	First child margin-top: 15px

Note. There are two hover colours in toronto.ca: #165788, #23527c. Use one hover colour #165788