Web Style Guide

This page outlines basic web styles used across the UNBC website. The title of this page "Web Style Guide" is our h1 heading.

Find our logos and graphic standards on the Communications website.

Heading 3

Here is an example of text under an h3 heading.​

Heading 4

Here is some text relating to the heading 4. Since heading 4 is subordinate to heading 3, then this text should also relate to heading 3.


This is some paragraph text. Here are the details:

  • Font size: 16px
  • Colour: #29292a
  • Line-height: 25px
  • Font-family: Helvetica Neue, Arial, Verdana, sans-serif

Helvetica Neue is our official font. We use Arial when Helvetica Neue isn't available.


This is a link


Action button

Text styles

Bold and italic text styles are used to draw emphasis and should never be used together. They should be used as little as possible to be most effective. Consider that if everything is emphasized, then nothing is emphasized. 

Bold: Heavy emphasis and best choice.

Italic: Gentle emphasis. Use sparingly since sans serif fonts don't stand out much when italicized.

Underline: We do not use underlined text on the UNBC website since it can be confused with hyperlinks.

ALL CAPS: We do not use all caps on the website.

Bulleted list

  • bulleted list item 1
  • bulleted list item 2
  • bulleted list item 3

Numbered list

  1. numbered list item 1
  2. numbered list item 2
  3. numbered list item 3

Horizontal rule

2px solid #eae7e5

Web accessibility

UNBC is working towards making the website fully compliant with the Web Content Accessibility Guidelines (WCAG). Here are some important guidelines we follow:

  • Provide text alternatives for non-text content such as images and videos
  • We only use images of text as pure decoration and supported by "Alternate text"
  • Ensure text sizes and colour contrasts are accessible
  • Headings are used to describe a topic or purpose
  • Headings are clear and concise and the structure of the information is reflected in the structure of the headings
  • Links are descriptive of their destination

Image Sizes

The optimal ratio for horizontal images is 16:9.

Pixel dimensions by image type:

  • Webpage content: 1088 x 612
  • Featured links, rotators, cover images (stories and events): 1792 x 1008
  • Profile pictures: 640 x 816

Image naming standards

  • Always include the original name for reference so we can find the original image in our database
  • No spaces or underscores (Drupal will strip those out)
  • Use dashes (-) to separate words
  • Include a descriptor after the original file name. Ex: dsc12345-ftlink.jpg, dsc7890-studentname.jpg

Web colours


  • #006464
  • Hover: #000

Official UNBC colours

  • Gold #b79527
  • Green #035642

Secondary colours

  • #88381d
  • #c05800
  • #977000
  • #5e8200
  • #617633
  • #3d5728
  • #9b208e
  • #8c1741
  • #550737

Accent colours (not accessible as text)

  • #3fc6c8
  • #89b631


  • #151415
  • #29292a
  • #3e3d3f
  • #525154
  • #777677
  • #9e9c9d
  • #c4c1c1
  • #eae7e5
  • #f4f4f4