- About
- Submit
- Tools
- Guides
- Equity, Diversity and Inclusion guide
- Multimedia Consent Guide
- Formal studio portraits
- SFU News
- Brand guide
- Communication strategy
- Editorial style guide
- Media guide
- Project management
- Self-recorded video
- Social media
- Website content guide
- Website project guide
- Website Design Guide
- What makes a good story?
- URL request guidelines
- Blog
- C&M staff
Web applications
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.
Colours
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.
Medium grey
Use medium grey for hyperlinks.
HEX #6D6F71 or RGB R109/G111/B113
Light red
Use SFU light red for buttons, navigation bars, and hyperlink hover states.
HEX #CC0633 or RGB R204/G6/B51
Dark red
Use SFU dark red for minor non-navigational accents such as separation lines and progress bars.
HEX #A6192E or RGB R166/G25/B46
Buttons
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.
Typography
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.
Iconograpy
Please refer to our iconography guidelines.
Logo
Version
Use the “SFU” institutional logo block, in colour. Do not use the institutional logo with “Simon Fraser University”.
Size
For digital applications, the minimum size of the SFU logo is 80 pixels wide.
Placement
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.
DO
• Maintain consistency.
• Minimize the colour palette and fonts used.
• Test your application.
DON'T
• Flood the screen with colour, especially light and dark red.
• Use rounded corners.
Sample application
This mock-up demonstrates our web application guidelines.
Not sure if your app is on brand? Email sfu-brand@sfu.ca for consultation or review.