All pages in myPass should have consistent look-and-feel and visuals to promote ease of use. This includes using the same palette, fonts, visuals, and similar manner in laying out and distinguishing content.

The look-and-feel guidelines should drive the structure of the stylesheets implemented so that updates to these guidelines can be easily applied to the site.

The following is the recommended palette for styling; it should be used for coloring layout and content elements.

In addition to the Color Palette, special content and statuses should be highlighted with conventionally known colors (e.g. red for errors)

myPass will implement the Google Web Font Lato as the primary font. The font stack will be Lato, Arial and Helvetica.

As per responsive guidelines, it is recommended to implement sizes in em instead of pt or px.

Refer to the Color section for the actual colors used.

• Body fonts:
  • Body (Default Font) (1.0em (12pt), Grey Color 2)
  • Sub Text / Description (0.83em (10 pt), Grey Color 1)
• Heading fonts:
  • Heading 1 (h1) (1.83em (22pt), Primary Color 3)
  • Heading 2 (h2) (1.58em (19pt), Italic, Grey Color 1)
  • Heading 3 (h3) (1.33em (16pt) Ultra Bold (900), Primary Color 2)
  • Heading 4 (h4) (1.33em (16pt) Italic, Complementary Color 2)
  • Heading 5 (h5) (1.0em (12pt) Ultra Bold (900), Complementary Color 1)
  • Heading 6 (h6) (1.0em (12pt), Ultra Bold (900) Italic, Primary Color 3)
• Special fonts:
  • Homepage Tile Title font (1.17em (14pt), Ultra Bold (900), #FFFFFF)
  • Heavy Emphasis (Ultra Bold (900), {keep same colour as surrounding text})
  • Monospace (font-family: ‘Courier New’, Courier, monospace;)
  • Links ({keep same font as surrounding text}, underlined, #1122cc)
    • Remove underline when the link is on the header, navigation menus, footer, or student connection selector. Design documents may also state areas in the page content that do not need underlined links.
  • Error Text ({keep same font as surrounding text}, Error Dark Shade)
  • Warning Text ({keep same font as surrounding text}, Warning Dark Shade)
  • Success Text ({keep same font as surrounding text}, Success Dark Shade)
  • Information of interest ({keep same font as surrounding text}, Complementary Color 2)

PNG files for the icons that appears in this document will be available here: http://engage/pasi/team/Team%20Documents/Forms/AllItems.aspx?RootFolder=%2Fpasi%2Fteam%2FTeam%20Documents%2FBA%20Team%2FReference%2FUI%20Guidelines%2FIcons

Bootstrap also offers Glyph icons that can be utilized.

The large resolution version should use the Alberta Government signature logo, as prescribed in GoA Identity Manual

PNG file can be found here http://engage/pasi/managementteam/Operational%20Documents/Forms/Sort%20by%20Document%20Type.aspx?RootFolder=%2Fpasi%2Fmanagementteam%2FOperational%20Documents%2FDocument%20Templates&FolderCTID=0x0120000B2A89284BAF4340B857D58E74DBB3EA&View=%7bD4B6C059-6137-4F08-9CB3-2562244FE7F5%7d.

The branding should follow the same guideline as the large resolution version, except the logo is replaced with the smaller ‘Alberta Signature’ version due to the smaller screen real estate.

PNG file can be found here http://engage/pasi/managementteam/Operational%20Documents/Forms/Sort%20by%20Document%20Type.aspx?RootFolder=%2Fpasi%2Fmanagementteam%2FOperational%20Documents%2FDocument%20Templates&FolderCTID=0x0120000B2A89284BAF4340B857D58E74DBB3EA&View=%7bD4B6C059-6137-4F08-9CB3-2562244FE7F5%7d.

PNG file can be found under here: http://engage/pasi/team/Team%20Documents/Forms/AllItems.aspx?RootFolder=%2Fpasi%2Fteam%2FTeam%20Documents%2FBA%20Team%2FReference%2FUI%20Guidelines%2FIcons

PNG files for tiles are available here: http://engage/pasi/team/Team%20Documents/Forms/AllItems.aspx?RootFolder=%2Fpasi%2Fteam%2FTeam%20Documents%2FBA%20Team%2FReference%2FUI%20Guidelines%2FIcons

• Disabled Tile will have Grey Color #5 as its background instead.