Workspace theme and graphics

The workspace theme and branding will define how the app or web app looks to the users.

This article will explain what exactly can be changed to match your brand identity, and how. You'll find:

• Information on setting the workspace theme. 
  By "workspace theme", we are referring to the appearance of the app. This includes the colors used in the app as well as the app logo.
• Information on workspace graphics. This includes a list of those elements, with definitions, recommendations and template files/icon libraries.
  By "workspace graphics" we refer to the images, banners, and icons used in the workspace.

Workspace theme

Choose the workspace colors

You can use the Theme editor wizard to easily incorporate your brand or organization colors into the workspace:

Below are some of the main elements you can modify in the theme editor:

1- Tab bar in web app and title bar in app.
2- Profile and workspace name text colors.
3- App menu icon and link icon colors.
4- App menu text colors and separators.

Workspace logo

In the Theme editor, go to the Graphics tab, where you can upload or change the In-App icon:

- The in-app icon shown here is also for the event registration page design.
- The in-app icon will also appear in the notification list and notification page once opened.
- The in-app icon does not appear as the icon of the push notification. This is managed at the app container level.

Important: The app loading screens need to be added via part of the app container. 
You can also configure how the loading message and progress bar will look on mobile apps. You'll want to ensure that the loading message and progress bar does not cover/hide any important information on your loading screen images.

Workspace graphics

In addition to the items mentioned in the Workspace theme section, you can use a variety of personalized graphics such as banners and icons in the workspace.

Below, we'll show you how these graphics can be used in the different sections of the workspace, and how they look on the web app and the mobile app.

For each graphic element you'll find links to definitions, size and format requirements, tips on how they should be used, as well as template files that you can download to help you create your own images.

Home page

 

1- User picture / 2- Menu banner / 3- App menu icons and link icons / 4- App menu separators (color modified via theme editor) / 5- Home feed banner / 6- Feed post with image.

Agenda

1- Session banner (uses the same image as session page banner below) / 2- Session tags (modified via the Sessions module) / 3- Buttons (colors modified via theme editor) / 4- Speaker pictures.

Session page

1- Session page banner (uses the same image as session banner above) /  2- Page tool bar icons (these icons are by default, colors can be changed via the theme editor) / 3- Session tags (modified via the Sessions module).

Sponsor list

1- Sponsor logos / 2- Sponsor levels (modified via Sponsors module).

Sponsor page

1- Sponsor page banner / 2- Sponsor levels (modified via Sponsors module).

Page 

1- Page banner / 2- App content link icons (colors modified via theme editor).

Graphics information

Below you'll find the full details for each graphic element used in the workspace.
A condensed checklist version of this asset list is available that can also help you gather these items.

Workspace logo

	Web app & mobile apps
What is it?	Square logo used to represent the workspace in the list of events in the app container, and when sending notifications or posting on behalf of the workspace. This is different to the app container logo.
Size/format	512 × 512px (1:1 ratio) - JPG or PNG.
Tips	These are uploaded via the Graphics tab in the Theme editor. Keep the design simple and limit text. App icons will be resized automatically depending on where they are displayed.
Template	See template file

Workspace loading screen (mobile app only)

Important: The app loading screens now need to be added via part of the app container.

	Mobile apps only
What is it?	Image displayed when the workspace is starting/loading. This is different to the app container loading screen. For in-person events, two versions of the loading screens are needed one for the phone and one for the tablet.
Size/format	1242 x 2208px (phone) (9:16 ratio) - JPG or PNG. 2048 x 2048px (tablet) (1:1 ratio) - JPG or PNG.
Tips	Ensure that content on the loading screen images is not hidden by the loading messages (that are configured in the theme editor options). The app loading screens now need to be added via part of the app container.
Templates	See template file

User or speaker pictures

	Web app & mobile apps
What is it?	Visible when accessing a user or speaker profile, or when a user interacts with the app (posts, chats, etc). For web app users, the picture is always visible in the top left of the page, below the menu banner.
Size/format	400 x 400px minimum (1:1 ratio) - JPG or PNG. (larger files will be resized automatically)
Tips	For user pictures, always name the file fp_ext_id.jpg, where fp_ext_id corresponds to the ID of the user, to facilitate uploading the images en-masse to the workspace.
Template	See template file

Menu banner

	Web app & mobile apps
What is it?	Rectangular horizontal banner located in the top left of the web app (behind the user's profile picture) or at the top of the app menu page for mobile and tablet:
Size/format	2040 × 680px (3:1 ratio) - JPG or PNG.
Tips	This can be a picture, a pattern or color background, or even a GIF.
Template	See template file

App menu icons

Although we recommend that you use the icon libraries that are already available in Backstage, you can also upload your own personalized icons.

Important: App menu icons need to be transparent so that the workspace theme colors can be applied to them.

	Web app & mobile apps
What is it?	These are the icons that will be used in the app menu.
Size/format	72 x 72px (1:1 ratio) - PNG only with transparent background Important! App menu items need to be transparent so that the workspace theme colors can be applied to them.
Tips	The icon within the image needs to be 40 x 40px, with a 16px transparent margin around all edges.
Template	See template file and icon library

Link or app content icons

Although we recommend that you use the icon libraries that are already available in Backstage, you can also upload your own personalized icons.

	Web app & mobile apps
What is it?	These are the icons that will be used for links to content present in the app pages, feed, etc. They are usually slightly larger than the app menu icons, and can include a background.
Size/format	300 x 300px (1:1 ratio) - PNG, backgrounds can be used. GIFs are also supported.
Tips	No margin is needed. You can use a light background for your icons.
Template	See template file and icon library

Home feed banner

	Web app & mobile apps
What is it?	Rectangular horizontal banner visible at the top of the home screen/feed.
Size/format	2000 x 1000px (2:1 ratio) - JPG or PNG - for all platforms. GIFs are also supported.
Tips	Usually displays standard information such as the logo and name of the app, or the place and dates of the event.
Template	See template file

Feed post image

	Web app & mobile apps
What is it?	These are images that can be added to a feed post, whether posted by the workspace or the app user.
Size/format	We recommend that you use images that have a 4:3 ratio, with 2000 x 1500px. Maximum file size is 5MB.
Tips	In the feed preview, thumbnail images are cropped to 4:3 rectangle. Images below that ratio will be fully displayed. Images above that ratio are cropped.
Template	See template file

Session banner

	Web app & mobile apps
What is it?	Rectangular horizontal banner located at the top of a page. This banner must use the same image as the one used in the Session banner in the agenda.
Size/format	1000 x 150px (20:3 ratio) - PNG or JPG - for events on all platforms. GIFs are also supported.
Tips	All page banners (standard page, session page, sponsor page, activity challenge page, etc.) use the same size banners. (600 x 150px format is optimal for events with mobile apps only).
Template	See template file

Sponsor logos

	Web app & mobile apps
What is it?	Picture visible in the sponsors list, or when interacting with a sponsor
Size/format	400 x 400px (1:1 ratio) - PNG or JPG. GIFs are also supported.
Tips	Sponsor logos can be overlaid with sponsor level information if this is configured in the workspace. Make sure that the sponsor level information does not cover any important information visible in the logo.
Template	See template file

Sponsor page banner

	Web app & mobile apps
What is it?	Banner located at the top of the sponsor's page.
Size/format	1000 x 150px (20:3 ratio) - PNG or JPG for events on all platforms. GIFs are also supported. Maximum file size is 100kB
Tips	Sponsor banners can be overlaid with sponsor level information if this is configured in the workspace. Make sure that the sponsor level information does not cover any important information visible in the banner. (600 x 150px format is optimal for events with mobile apps only).
Template	See template file

Page banner

	Web app & mobile apps
What is it?	Rectangular horizontal banner located at the top of a page.
Size/format	1000 x 150px (20:3 ratio) - PNG or JPG for events on all platforms. Maximum length should be no more than 1200px for full page images. GIFs are also supported. Maximum file size is 100kB
Tips	All page banners (standard page, sponsor page, activity challenge page) use the same size banners. (600 x 150px format is optimal for events with mobile apps only).
Template	See template file

 

Speaker background banner ("bust" component image)

	Web app & mobile apps
What is it?	Rectangular horizontal banner located at the top of a speaker profile/page, behind the profile picture, and uploaded via the speaker display template, in the "bust" component.
Size/format	1920 x 400px - PNG or JPG for events on all platforms. Maximum file size is 100kB. Important: The banner is automatically resized according to the device or the window size that the viewer is using. This can result in the image being cropped horizontally or vertically in the app. The speaker profile image will also by default hide a part of the banner (in the lower center). We therefore recommend that you use an banner image that will accommodate the potential cropping as well as the speaker profile picture's position, and that you do not display any important textual information in these banners.
Tips	To avoid issues with a cropped image or information being hidden by the speaker profile picture, you can easily use an automatically generated blurred image created from the profile picture (as in image above. Keep in mind that this banner will appear behind the speaker profile picture, and therefore any content placed in the bottom-center of the image will be hidden (see image above).
Template	See template file

 

Registration page banner

This is the banner for the registration page.

What is it?	Rectangular horizontal banner located at the top of the two public registration pages.
Size/format	PNG, JPEG. Max file size 10MB. Recommended resolution 2880 x 692 px. Please note that GIFS are not supported.

 

Registration page images within the description

What is it?

These are images that can be inserted or copy-pasted into the description section of the registration landing page. The space available for the description images is 1370 px wide. Images that are less that 1370 px wide will keep their file dimensions (like in the example below). If you intend to use the full width for your image, we recommend that you use an image that is 1370 px wide for the best result. In Backstage: In the registration page preview:

Size/format

PNG, JPEG. Max file size 10MB.

Graphics template files and icon libraries

Download a single template file (.psd ), containing all the templates you need for creating personalized graphics. This includes all the size recommendations, safe zones, and margins when applicable.

Download a full raw icon library file (.zip), that contains all the icons present by default in Backstage. This can be used/edited, together with the icon templates, to create your own personalised icons for the app menu or link/app content icons.

Download the content icon catalogue (.pdf), that contains an overview of all content icons with their respective titles and categories.