Introduction

The Totara Mobile app design guidelines contain the visual and behavioural design specifications for all component and assets found in the app. It is a living document and will be updated as the app evolves.

The design guidelines have been created for developers and designers working on app customisations. Please refer to the latest version when designing and implementing new interfaces and behaviours.

For all the native controls (e.g., switches, status bars etc.) used in the app, please refer to iOS and Android design guidelines:

• iOS
• Android

Colour

Colour theme is applied consistently across all components featured in the app, with the default theme being based on the Totara brand.

Colour variables, as depicted below, follow an abstract semantic framework that is applied in a meaningful manner consistently throughout the app. This enables users to derive meaning via colour, aiding the user experience. Each colour variable is customisable to match the customer's brand and design needs.

Primary

Neutrals

Notifications

Grid

The Totara mobile app's interfaces are based on an eight-pixel grid because it favours consistency and flexibility. The dimensions of the elements and the distances between them will always be multiples of eight: 16, 24, 32, 40, 48, etc. Follow this grid when designing and implementing new layouts in order to maintain a consistent UI.

Spacing

All the design component and elements follow the spaces across the grid. The same principle applies when you stack multiple elements within and between a component. 

Works on different screen sizes

Using the eight-pixel grid allows creating a vertical rhythm. But there are screen sizes which are not compatible with the eight-pixel grid system.

Typography

Typography is used to communicate information in the most efficient way possible through legibility and visual hierarchy. It's a crucial tool to guide users on their tasks. It should be used in a clear and delightful way.

Typefaces

Totara Mobile uses system fonts for both platforms (iOS & Android).

Brand app icons

The app icon appears on the phone home screen and makes you recognise the app on the app store. There is a set of small icons for the home screen and a larger icon for the App Store itself. The App Store and Google Play have different specifications and instructions for mobile icon design.

iPhone

iPad

Android

Buttons

Primary button

The primary button is used to show the main action on a screen. It typically portrays the 'successful' culmination of a task. To convey this, the primary button is styled so as to be prominent and, ideally there should be only one per page.

Basic button design

Button with theme colour

States

The default state indicates that the user can tap the button.

The active state indicates that the user has tapped the button.

The disabled state indicates that the link can't be tapped.

Guide and structure

Height: 50px
Minimum width: 50px
Corner radius: 4px
Left and right minimum padding: 16px
Label: 17px, semibold
Background: Dynamic based on theme colour, default value is #99AC3A
Font colour: Black/white based on theme setting

Background: Dynamic based on accent colour, default value is #C5D39D
Font colour: Black/white based on theme setting

Background: #D2D2D2
Font colour: Black/white based on theme setting

Secondary button

The secondary button is always used to display actions that may not be used and, as such, their visual style is less prominent than the primary button's style. Several secondary actions can be nearby each other.

Design

States

The default state indicates that the user can tap the button.

The active state indicates that the user has tapped the button.

The disabled state indicates that the link can't be tapped.

Guide

Height: 50px
Minimum width: 50px
Radius: 4px
Outline: 1px
Left and right minimum padding: 16px
Label: 17px, semibold
Outline colour: #7D7D7D

Background: #E6E6E6
Font colour: #000000

Background: #FFFFFF
Font colour: #D2D2D2

Tertiary buttons / button links

The tertiary buttons are usually used for less important or less commonly used actions, and are often used along with a primary button or as a standalone button.

Design

States

The default state indicates that the user can tap the button.

The active state indicates that the user has tapped the button.

The disabled state indicates that the link can't be tapped.

Guide

Height: 50px
Minimum width: 50px
Left and right minimum padding: 16px
Label: 17px, semibold
Font colour: #007AFF
Icon colour: #007AFF

Guidance

• Buttons should indicate an action, not a navigation link
• They should be discoverable, easy to identify, and specific
• Always have a text label within the button container - icons are optional
• Make buttons look and feel clickable
• If using multiple buttons, style and label them distinctly

When to use

• Use buttons to emphasise a call to action

Accessibility guidelines

• The button text and background colour must meet the minimum contrast requirement.
• If an icon button is used, an accessible label must be provided that indicates the purpose of the control. Avoid using the words “image” or “icon” in the description label.
• If an icon is used alongside the text button, the icon should not provide any text alternative for screen readers. The button’s text will serve as the accessible name, and the icon may be considered redundant or decorative.
• Use an aria-controls prop to add the aria-controls attribute to build the relationship between button and element which is managed by it. Aria-controls runs only with a single ID of an element.
• Use area expands prop to add aria-expands to indicate to screenreaders, that element controlled by button-through aria-controls is expanded or not.
• Use a disabled prop to indicate to users that a button is inactive and they can’t interact with it.
• Use the title to add aria-label when you need to add extra information to screen readers, or there are no children presented to be used as a label.

Cards

Cards are a UI component that display content and actions on a single subject.

When you have lots of information, combining it into appropriate groups can help users to navigate it all. Cards are excellent for assembling a lot of related data into one block to organise it.

Design

Guide and structure

1) The course, program or certification image is displayed here (the default image is used if none is specified).
2) The due/overdue date is optionally displayed.
3) The course, program or certification title is displayed here.
4) An optional description presents more information about the learning content.

1) The course, program or certification image is displayed here (the default image is used if none is specified).
2) The course, program or certification title is displayed here.
3) An optional description presents more information about the learning content.

Empty state

Empty states may occur at any time. The purpose of an empty state guideline is to provide appropriate advice to the user on any relevant actions to take ( e.g. guide them to the next step to take to get to their desired goal).

1) The illustration adds visual context.
2) The title describes the status of the screen.
3) The call to action provides the option to leave the screen.

Icons

Icons draw attention and convey the meaning of specific actions and information, using semantic glyphs.

They can help to clarify a feature’s primary purpose or draw attention to a commonly understood action.

Font Awesome icons

Custom icons

Custom icons - activity status

Icon sizes used based on screen resolutions:

• @1x - 24/24 px
• @2x - 48/48 px
• @3x - 72/72 px

Illustrations

Illustrations can help to communicate information in an engaging and visual way.

Humans process visual information faster than text. Illustrations could help most people, but might not help everyone. You need to make sure the content is accessible to everyone by presenting all essential information in text form and not just visuals.

Guide and structure

1) The illustration adds context to the message.

Border width: 3px
Border colour: #000000

Examples

List

Lists present repetitive data groups that are related to each other. There is a common visual layout for lists.

1) The list heading provides context for the list.
2) Supporting action.
3) A list item.
4) The icon/status badge visually supports the list item content.

List heading: Headline (22px), bold
List item: Regular (17px)

Modal

Use modals to complete subtasks or provide critical information while maintaining the context of the underlying page. 

1) The illustration visually supports the message.
2) The title explains the context. This should be concise and to the point.
3) The description provides more information. This should also be concise.
4) The primary call to action initiates the required action.
5) The secondary call to action closes the modal.

Overlay background: Neutral-08
Opacity: 40%

Tab

Tabs keep related content in a single container and allows users to navigate between them quickly while remaining in the page's context.

Design and structure

1) Tab content should be short.
2) Selection indicator shows which tab is currently selected.

States

The default state is shown when a tab is not selected.

The pressed state is shown when the user taps on the tab.

The active state is shown when the user has selected the tab.

Guide

Height: 50px
Minimum width: 50px
Left and right minimum padding: 16px
Active label font: #000000, 15px, bold
Default label font: #7D7D7D, 15px, medium

Guidance

• Should have the similar content and labels should be clear

• Order the tabs based on user needs

Text links

Guide and structure

1) The text describes the purpose of the link.
2) The icon visually supports the link (optional).

Text size: Inherit the size from the parent
Font colour: #007AFF
Icon colour: #007AFF

Guidance

• Text links enable users to navigate to another part of your app or an external location (e.g. another website).

• The target of the text link should be clear from its label.

• Do not use text links for submitting actions. Use buttons instead.

Text input

Design

Guide and structure

Field label font: 13px, regular, #7D7D7D
Content text font: 17px, regular, #000000