- Brand guide
- Communication strategy
- Editorial style guide
- Media guide
- Project management
- Self-recorded video
- Social media
- Website content guide
- Website project guide
- What makes a good story?
- URL request guidelines
- C&M staff
Web-based platforms and tools present unique constraints and opportunities to express our brand. Follow these guidelines to give our community a consistent, clear, and familiar user experience.
Shades of grey
Use white and light greys for application backgrounds and large content containers, including pop-up windows. If night-mode is supported, it is acceptable to use black and dark shades of grey for dominant background areas.
Use medium grey for hyperlinks.
HEX #6D6F71 or RGB R109/G111/B113
Use SFU light red for buttons, navigation bars, and hyperlink hover states.
HEX #CC0633 or RGB R204/G6/B51
Use SFU dark red for minor non-navigational accents such as separation lines and progress bars.
HEX #A6192E or RGB R166/G25/B46
For buttons, use sharp-edged rectangular shapes set in SFU light red with white text. If the web application has numerous buttons on a single screen, minimize the appearance of red by setting buttons with a light red outline and light red text. Text should be in all caps. See sample application below.
Web applications are often platform-based, with a restricted set of available fonts. For consistency with other digital applications of the SFU brand, choose the web-safe sans serif font Trebuchet for all typography. If Trebuchet is not available choose Arial or Helvetica. Avoid serif fonts in web applications.
Please refer to our iconography guidelines.
Use the “SFU” institutional logo block, in colour. Do not use the institutional logo with “Simon Fraser University”.
Wherever possible, the SFU logo block should touch the left or top edge of the screen.
When not possible, centre the logo horizontally and vertically in the available space.
For digital applications, the minimum size of the SFU logo is 80 pixels wide.
• Maintain consistency.
• Minimize the colour palette and fonts used.
• Test your application.
• Flood the screen with colour, especially light and dark red.
• Use rounded corners.
This mock-up demonstrates our web application guidelines.
Not sure if your app is on brand? Email firstname.lastname@example.org for consultation or review.