• Skip to main content
  • Skip to footer

Sidney Smith Commons

Online resource for A & S students

  • About
  • What’s On
  • Help Topics
  • Get Involved
  • Resources
  • NAVI

Home > Style Guide

Style Guide

Most styling rules of this website belong to Infinity Pro Genesis WordPress theme by StudioPress
Refer to this page for some of our custom styling and formatting rules.
On dashboard, go to Appearance >> Customize >> Additional CSS for additional custom styling rules.

 

 

Fonts

H1, H2, H3: Raleway

H4: Raleway, uppercase

H6: Raleway

Body: Raleway, 1.6rem

Top Navigation, Button, Accordions: Raleway, uppercase, 1.3rem
Side bar title: Raleway, uppercase, 1.2rem

 

Side bar content: Avant Garde, 2rem

*Note that all font sizes are responsive and were pre-determined by Infinity Pro Theme

 

 

Colour Palette

 

Primary colours

Navy
Hex value: #001f4e

White
Hex value: #ffffff

 

Secondary colours

Blue
Hex value: #00bcde
(used on homepage – top navigation text when hover on top of navy)

Dark red
Hex value: #A32448
(used on top navigation text when hover)

*Note: To satisfy AODA colour contrast requirement, the red we are using in this website (#A32448) is darker than original A&S branding red (#ef3742).

Light Blue
Hex value:: #e5f8f8
(used as Article side bar background color – listings plugin.)

Light Beige
Hex value:: #fff6ed

 

Accent colours

Sky Blue
Hex value: #47a3db

Pink
Hex value: #f6abc9

Orange
Hex value: #fbaa19

Green
Hex value:: #4bb965

 

 

Special Styling

 

  • Link when hovered border-bottom: 1px dotted #000;
    Link example

 

  • Button change colour when hovered

 

  • Numbered list or bullet points
    Make sure to give a title to each bullet point/numberd list item and wrap them in h4 for styling purpose. Example below:

    1. Lorem ipsum dolor sit amet.

      Consectetur adipiscing elit. Sed vitae suscipit nibh, vitae lacinia urna. Fusce vestibulum at erat ut auctor.

    2. In hac habitasse platea dictumst.

      Nullam ut lectus quis augue euismod dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    3. Cras posuere suscipit odio id feugiat.

      Vestibulum tempus sem id augue porta blandit. Cras malesuada eros in pellentesque vehicula. Morbi eu ante orci. Nullam eu imperdiet purus.

 

  • Accordion – Plugin Simple FAQs

 

AODA Compliance

The Accessibility for Ontarians with Disabilities Act (AODA) is a piece of legislation in the Province of Ontario aimed at making the places you work, live and learn as accessible as possible. Please refer to this summary provided by the University to make sure your communications are accessible: aoda.hrandequity.utoronto.ca/communications/

Footer

© University of Toronto, Faculty of Arts & Science | All rights reserved

For feedback about this website, email: ask.artsci@utoronto.ca.

Copyright © 2025