...
| Page Properties | ||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||
|
Background
https://toronto.atlassian.net/browse/CTUS-18
...
Roboto regular (font-weight:400)
Roboto medium (font-weight:500)
Roboto black (font-weight:700)
Alternative fonts: Helvetica Neue, Helvetica, Arial
...
Line Height
Body paragraph 1.45 (NEW)
Note. Current default line height is : 1.4287
Font Size & Colour
Use Relative
Base Font (rem) Units <html>(62.5%)
| Desktop | Mobile/Tablet | Colour |
Paragraph, Top navigation & I want to menu (first level) | 1.125rem (18px) on large screens (minimum 1200px) | 1rem (16px) on small screens | Black (#000000) |
Top navigation (second level), Breadcrumb, Right Navigation (In This Section, Related Information, Contact Us), Footer Filter | 1rem (16px) | 1rem (16px) | Black (#000000) |
Photo caption, Disclaimer | 0.875rem (14px) | 0.875rem (14px) | Grey (#737373) |
H1 | 2.25rem (36px) | 2rem (32px) NEW | Black (#000000) |
H2 | 1.75rem (28px) | 1.625rem (26px) NEW | Black (#000000) |
H3 | 1.375rem (22px) | 1.375rem (22px) | Black (#000000) |
H4 | 1.1875rem (19px) | 1.1875rem (19px) | Black (#000000) |
H5 | 1.125rem (18px) | 1.125rem (18px) | Black (#000000) |
Accordion panel heading H2 | 1.375rem (22px) | 1.375rem (22px) | Black (#000000) |
Spacing
Margin
Margin-Xsmall10px | 12px (NEW) | Paragraph bottom Note. Current margin bottom is 10px |
| |
Margin-Small | 20pxButton, 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 | |
No Margin | 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.
Padding
Padding-Small | 10px |
|
|
Padding-Medium | 15px |
| Default? |
Padding-Large | 20px | Accordion, Tab |
|
...
Heading
H1 | Margin top: 0 |
H2 | Margin top: 30px |
H3 | Margin top: 30px |
H4 | Margin top: 25px |
H5 | Margin top: 10px; |
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 (NEW)
...