- splash page image interface
- background image
- interface colors
- most icon and button images

The Splash
Portrait (mobile & tablet)
Landscape (tablet)
Asset | PSD Template File | Required Size | Format |
Portrait Splash Page | Splash Portrait (Mobile&Tablet).psd |
1536 Width x 2192 Height px |
PSD*, PNG |
Landscape Splash Page | Splash Landscape (tablet).psd |
2192 Width x 1536 Height px |
PNG |
Background Image
A background image appears behind most interfaces in the app, and will be visible most of the time if you have the Visual Style set to Transparent. As background images are displayed behind other interface elements, it is best to make them unobtrusive so that they do not visually compete with icons and text.
Portrait (mobile)
Asset | PSD Template File | Required Size | Format |
Portrait (mobile) | bg_portrait_mobile.psd* |
707 Width x 1096 Height px |
JPG, PNG |
Portrait (tablet) | bg_portrait_tablet.psd* |
1080 Width x 1920 Height px |
JPG, PNG |
Landscape (tablet) | bg_landscape_tablet.psd* |
1600 Width 1400 Height px |
JPG, PNG |
Event Logo
The Event Logo is the image used at the top of the navigation menu as well as at the top of the Activity Feed feature to identify the event.
An image added here will appear as the event icon in a event app, will be displayed at the top of the 9 icon navigation menu and can be configured to appear at the top of the slide-out navigation menu, Activity Feed, and survey results reports. The logo will never be cropped, but it may be proportionally scaled depending on the device, and note that it supports transparency (the background shows through in those areas of the logo that are designated as transparent).
To define the Logo image, click the Select an image button and use the file browser to select a .png image 640 x 200 pixels in size.
Asset | PSD Template File | Required Size | Format |
Event Logo | event_logo.psd |
640 Width x 200 Height px |
PNG |
Icons
Icons are divided into two groups: component icons, which are the component-specific icons that appear in the main menu, and system icons, which typically appear in other interfaces (although some may appear in the main menu as well). Note that the App Manager shows component icons associated with all components, including those that are not part of your app. Even if you intend to complete rebrand your interface, it is unlikely you'll need to change all icons.
To define a given icon, click the icon and use the file browser to select an appropriate image. The image must be a .png image 200 x 200 pixels in size.
Asset | PSD Template File | Required Size | Format |
Component Icon | icon_main_{component name}.png |
200 Width x 200 Height px |
PNG |
Visual Style
Select Transparent to make text boxes semi-transparent, revealing the Background Image beneath, or Opaque for opaque text boxes with the Background Image showing around the sides.
Transparent | Opaque |
The background image is blurred. | The background image is not blurred. |
Not all colours are fully customisable on mobile devices and tablet; the titles, sub titles, and body text on the listing and the detail page will be skinned white and displayed on semi transparent black cards | Full control over the colour palette in this mode. All colours will be pulled from the colour palette chosen on the QP |
Colour Schemes (Opaque Visual Style)
You can customise your app’s colour palette. See below for an example of how your colour selections will be applied in “Opaque” visual style.
Color Schemes (Transparent Visual Style)
You can customise your app’s colour palette. See below for an example of how your colour selections will be applied in “Transparent” visual style. Not all colours are fully customisable on mobile devices and tablet: the titles, sub titles, and body text on the listing and the detail page will be skinned white and displayed on semi-transparent black cards. However, selecting “Transparent” visual style
Reveiwed and Approved by Product Team