...
Options considered
...
Option 1:
...
Option 2:
...
Description
...
Pros and cons
...
...
...
Estimated cost
...
| Status | ||||
|---|---|---|---|---|
|
...
Here is the first draft. Please edit or add sections.
Font
Roboto regular (font-weight:400)
Roboto medium (font-weight:500)
Roboto black (font-weight:700)
Alternative fonts: Helvetica Neue, Helvetica, Arial
Font Line Height
Body paragraph line height is 1.4287
Font Size & Colour
| 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 |
Spacing
Margin
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.
Padding
Padding-Small | 10px |
|
|
Padding-Medium | 15px |
| Default? |
Padding-Large | 20px | Accordion, Tab |
|
Note. Current tile padding top/bottom is 10px and padding right/left is 15px
Heading
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 |
Links
| Colour | Text Decoration | Font Weight |
Default | #337ab7 | None | Medium (500) |
Hover | #165788 | Underline | Medium (500) |
Note. There are two hover colours in toronto.ca: #165788, #23527c. Use one hover colour #165788
...