Logo
Use the black logo on light backgrounds and the white logo on dark backgrounds. See example above. To ensure visibility and proper spacing, leave a clear margin around the logo equal to at least 50% of its height.
Text
Font
Font for body text: Lato.
Font for titles: Lato
Main titles should be in bold uppercase; subheadings in bold lowercase.
Font colour: #222222
Print Materials
Body text: 12px
Heading size hierarchy: 20px – 18px – 16px – 14px
Web
Body text: 17px
Heading size hierarchy: 32px – 26px – 22px – 18px
Alternative fonts
When original font is not available, like in emails etc.
Font for body text: Arial
Font for titles: Georgia
H1 Heading, font: Lato, 32px
H2 Heading, font: Lato, 26px
H3 Heading, font: Lato, 22px
H4 Heading, font: Lato, 18px
Colours
Grey background: #EEEEEE
Black background: #222222
Lines
2px solid #000000
| Table | A | B |
|---|---|---|
| Gregory Smith | London | UK |
| Petronella Göransson | Stockholm | Sweden |
Buttons
Capitals with black background and hover to 2px #222222 border, or underline border with hover black bakground.
Button 1
Button 2
Bullet List
- Morbi viverra turpis odio, vitae volutpat nulla iaculis sit amet.
- Quisque porttitor augue non tortor posuere, eu tempus felis malesuada.
- Aenean quis felis vitae turpis porttitor imperdiet.
- Nulla sollicitudin quam sit amet augue tristique viverra.
Alternative Bullet List (Grey Square)
- Maecenas non lectus nec eros mollis placerat quis vitae quam.
- Cras et quam vitae metus rutrum sodales.
- Aenean sit amet sem commodo, auctor nulla vel, accumsan est.
- Suspendisse potenti. Aenean lorem enim, iaculis sed massa eget, mollis maximus mauris. Curabitur at porttitor sem.
Quote
Donec sed facilisis nulla. Donec semper orci eget ligula porta… [dummy text continues]
Body Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan ligula quis ex maximus, vitae blandit orci ullamcorper. Vestibulum rhoncus velit elit. Pellentesque ultrices leo quis ligula dictum, a volutpat ipsum aliquet. Sed dapibus metus in dignissim dictum.
Ut sagittis pellentesque urna. Nunc a eros a enim condimentum tempus id vel arcu. Maecenas convallis lorem congue urna tempus, a tempor sapien venenatis. Proin accumsan metus a congue facilisis. Vestibulum sagittis ipsum suscipit risus commodo commodo. Suspendisse potenti. Proin maximus cursus velit, non laoreet ex ullamcorper congue.
Quisque mollis diam leo, viverra suscipit urna fermentum id. Nullam condimentum cursus posuere. Phasellus interdum magna ac dui ullamcorper dictum. Nullam volutpat lacus ante. Ut pharetra erat libero, eu laoreet neque consequat in. Nam rutrum augue quis porttitor rhoncus. Donec sapien odio, aliquam in viverra eget, efficitur et nisl. Suspendisse consectetur risus ac mauris ornare, at finibus nisi blandit. Nullam congue velit quis justo facilisis gravida. Duis vitae metus eget tellus convallis dignissim.
Morbi viverra turpis odio, vitae volutpat nulla iaculis sit amet. Fusce pretium velit eget magna luctus, at placerat sem imperdiet. Sed dapibus lacus ac neque suscipit fermentum. Sed volutpat lacus a massa accumsan, vitae volutpat sem tempus. Maecenas vulputate dolor nisi, in efficitur urna facilisis vitae. Cras condimentum vestibulum lectus eget interdum. Maecenas non lectus nec eros mollis placerat quis vitae quam.
