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”.

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.

Size

For digital applications, the minimum size of the SFU logo is 80 pixels wide.

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.