PASIprep UI Guidelines

The purpose of this document is to outline guidelines and templates for the user interface of PASIprep. These guidelines will change over time as new releases of PASIprep are developed.

UI Guideline Checklist

Tool when designing and testing a PASIprep page: PASIprep UI Guidelines Checklist

GOA UI Library

PASIprep will follow these GOA UI Library guidelines to the best of its ability; this guidelines will state any deviations from the GOA guidelines, as well as define rules, look-and-feel and components that is not found in the GOA guidelines.

Angular Material Guidelines

PASIprep will be built using Angular Material; for more information on Angular Material please see

Angular Material is an implementation of Google's Material Design Guidelines:

If a style/widget is not defined in the GOA UI Library, the styling of a widget should follow the Angular Material standard (or the Material Design guidelines if it's not defined in Angular Material) as much as possible, unless there is a reason for the customization.

myPass UI Guidelines

If there are situations not covered by the GOA UI Library guidelines, (Angular) Material Design nor this UI guidelines, patterns/widgets from the myPass User Interface Guidelines can be used as possible options/ideas for addressing the situation.


The high-level goals and desired outcomes for PASIprep are:

  • Accessible through touch and desktop devices
  • Responsive layout to accommodate, at minimum, a tablet resolution in landscape orientation
  • Consistent navigation patterns and layouts throughout the application
    • It is highly recommended that components are designed to be shared and reusable, especially if the component displays Business Objects / Data Elements that are utilized in multiple areas of the application.

Supported Browsers

Like myPass, PASIprep should follow the standard from Architecture Services and support the 'common'1) browsers' current version, and current version - 12).

Data Format Guidelines

For data display formats, please refer to the common Data Format Guidelines. The Data Format Guidelines should be followed on all screens; in an exception case where the screen deviates from the Data Format Guidelines, it should be clearly noted in the screen documentation how and why the format deviates from the guidelines.

Table of Content

It is recommended that the Page Layout & Template Guidelines be reviewed first to gain an understanding of the various screen layout components of PASIprep.

Page Layouts, Templates and Page Components

Page Content Templates

Dialog Templates

UI Patterns


Specialized/Common Controls

Analytics Guidelines

Language/Writing Guide

Visual Guidelines

These guidelines complements what is described in the GOA UI Library.

  1. Text
    1. Sub-text font size: 12px
    2. Field Label font: bold version of the body font
    3. Heading 1 font: 1.6em bold
    4. Heading 2 font: 1.4em bold
    5. Heading 3 font: 1.33em bold
    6. Heading 4 font: 1.2em
    7. Heading 5 font: 1.0em bold
    8. Heading 6 font: 1.0em italic
  2. Button/Link/Tap targets
    1. All 'clickable' controls should have a minimum height/width of 48dp (generally equivalent to 48 CSS px)
    2. Less-frequently used controls can be reduced to 32px
    3. Adjacent controls should be spaced 2mm (~13px) apart.
  3. Button/link styles
    1. Most buttons should use the “Flat” button style from Angular ( except the text is coloured in the GOA UI library secondary color (green)
      1. The exception to this rule is Primary action buttons (e.g. [Save]) - they should use the “Raised” style with the background coloured in the GOA green.
    2. Links should appear similar to “Flat” buttons (i.e. green text) except it should not have the same padding/margins as a button (to blend with surrounding text)
  4. Icons

User should be able to get a permalink URL for any 'views' of PASIprep. The browser URL should always display the URL that leads to the view the user is currently viewing.

Internet Explorer, Edge, Chrome, Firefox, Safari
if this version is still officially supported