Summary
1. Launch Screen — background and foreground images shown while the app loads.
2. Front Page — choose a home page template (Map View, List View, Slider, Menu, or Tiles) and set up the banner, background image, and poster/video (where applicable).
3. Navigation Bar and Button Colors — set the navigation bar's background/skin color, text tint and button tint, plus CTA button background and label colors.
The app preview on the right side of the screen will give you an idea of what your app will look like once your assets and colors are chosen.
Both Light Mode and Dark Mode need to be reviewed and configured — this can be switched at the top of the Appearance section.
These assets are hard-coded into the app, so they should be chosen carefully. Once you're happy with testing, the app will go live in the app stores. If design changes are needed afterward, the app will need to be republished, and fees will apply.
1. Launch Screen (Splash Screen)
The launch screen appears briefly while the app starts — it's shown for a few seconds while the app loads, before the main menu (front page) appears. It consists of a background and a foreground image.
example of a Launch Screen
2208x2208px PNG background image and PNG front image with transparency
The longer edge of the image needs to be 2208px — it will be adjusted to fit the screen's shape and size
example of a Background image
2208×2208px PNG background image (no transparency) or plain color
example of a Foreground image
2208 x 2208px PNG image with transparent background- can also be partially transparent (in most cases, it’s the app logo or banner)
2. Front Page
2.a) Home Page Templates
The overall layout used for your app's front page — this determines the structure of your main menu and how menu items are displayed.
Choose one of the following front page templates:
Interface A: Map View
A simple template that opens directly to a map view, displaying points of interest, tours, and game locations. Recommended for apps offering only tours or games, or with minimal interaction overall. All menu items remain accessible via the hamburger menu.
- Hamburger menu — accessible from the top-left navigation icon with customizable menu items (icons not supported)
- Switch to list view (list of tours and games)— accessible from the top-right navigation icon
Example: TurfHunt App
Map View Template
Interface B: List View
A template that opens directly to a list view, displaying tours and games with optional categories to help segment them. Recommended for apps with a larger number of tours or games that benefit from browsing by category, or for users who prefer scanning a list over navigating a map.
- Hamburger menu — accessible from the top-left navigation icon, with customizable menu items (icons not supported)
- Switch to map view — accessible from the top-right navigation icon
Example: Demo App
List View Template
Interface C: Slider
This template opens directly to the game or tour's main project page, with a slider that lets users swipe between projects. Recommended for apps with a small number of games or guides, where a simple, direct browsing experience is preferred over a full menu or list.
Example Listasafn Íslands app
Slider Template
Interface D: Menu
A home page featuring menu items alongside a landing image or video. This template supports icons and offers flexibility, like adding as many menu items as you'd like. Recommended for apps with multiple games or guides, local points of interest, and links to other content such as blogs, news, ticketing, websites, chatbot or any other APIs.
Example: Demo App
Menu Template
Interface E: Tiles
A home page with card-style menu items, a banner, and a background image. A modern look, recommended for apps with multiple games or guides, local points of interest, and links to other content such as blogs, news, ticketing, websites, or weather.
- Background image
- Menu with customizable icons and links
Option A — Tiles: Mixed
Features a combination of tile sizes for a dynamic layout. The first four items are displayed as square tiles, followed by landscape (rectangular) tiles. Tiles are positioned directly below the banner and extend across the full width of the screen.
Example: Demo App
Tile Mixed Template
Option B — Tiles: Landscape
Features landscape (rectangular) tiles in a vertical scrolling layout. The banner is square-shaped and positioned on the left side of the screen, while the tiles begin roughly one-third down the page. Users can scroll down to view additional content.
Example: YourStoryGuide App
Tile Landscape Template
2.b) Banner
The top banner appears on the app's front page. It can be a solid color banner, but most often it's a transparent logo placed over the selected skin color or featured image (skin color is explained further in the Navigation Bar section below). The banner usually includes the company logo on a transparent background.
Format: PNG image with a transparent background, or a background color matching the app's skin.
Size: 400 × 100px
Ratio: 5:1
Example: PNG logo banner on background image
Banner
* Tiles Landscape banner size recommended: square-shaped, size: 1024x1024px
📌 For the Map, Slider, List, and Menu templates, the banner sits at the top of the screen with a solid color behind it — this is the same color set in the Navigation Bar Background.
2.c) Background Image (Tiles templates only)
This image plays a key role in your app's overall look, since it forms the visual backdrop behind your entire front page — it's one of the first things users see when opening the app.
Can be an image or a plain color.
Format: 2208 × 2208px PNG background image (no transparency), or a plain color.
Note: This can be the same image used for your launch screen background.
Example: Background image
2.d) Banner Background Color (Tiles templates only, optional)
Applies a plain color under your banner. This is specific to the Tiles template, and optional — we recommend using it if your app relies on plain colors rather than a background image.
2.e) Poster Image (Menu template only)
The default front page background. If a front-page video is added, it plays after the poster image loads.
Example: poster image
2.f) Frontpage Video (Menu template only, optional)
Plays once the app has fully opened — this can serve as a brief introduction to what your app is about. We recommend keeping the video short, as longer videos will increase your app's loading time.
Example: frontpage video
2.g) Menu Item Colors (Tiles and Menu templates only)
- Menu item background color — the background color behind each menu item. Can be a plain color or transparent.
Example of Menu item background color: White #FFFFFF and 50% transparency
-
Menu item text color — the color of the text label for each menu item.
Example of Menu item text color: Dark Blue rgb(42, 78, 95), no transparency
- Menu item icon tint (optional) — applies a single color over your menu item icons. If your icons are plain (single-color), we suggest using a tint to keep them consistent with your branding. If your icons use multiple colors, you may prefer to leave this off to preserve their original look.
Example of Menu item icon tint: None applied as this app uses 2 colors in the menu item icons
📌 To set a color: open the color editor, add the color code in RGB or HEX, then click the arrow to apply your desired level of transparency.
Menu item icons are only available for the Tiles and Menu templates.
3. Navigation Bar and Button Colors
Navigation Bar
Helps users know where they are in the app. This bar appears at the top of the screen when a menu item is opened, showing the menu item's name, a back button, and icons for switching between views (like map and list), where applicable.
This is also referred to as the app's skin color — which is why choosing the right color here matters, usually your branded colors.
For the Map view, List view, and Slider templates, this skin color is decided here — the same color is used both for the main app front page and for the navigation bar throughout the rest of the app.
3.c) Navigation Bar Background/Skin Color
The background color of the navigation bar itself — referred to as the app's skin color. For the Map view, List view, and Slider templates, this same color is also used for the main app front page, and throughout the navigation bar anywhere else in the app.
Example of Navigation bar background/Skin color: blue #2B4A5A
3.b) Navigation Bar Text Tint
The color applied to the text shown within the navigation bar — this includes the menu item name, the game/tour name, or the point location name — ensuring it remains readable against your chosen skin color.
Example of Navigation bar text tint: white #FFFFFF
3.c) Navigation Bar Button Tint
The color applied to buttons and icons within the navigation bar — such as the back button and view-switching icons — ensuring they remain visible and consistent against your chosen skin color.
Example of Navigation bar button tint: white #FFFFFF
Call To Action Buttons
Call To Action buttons — the buttons users tap to perform a key action in the app. These appear throughout the app, such as on a project's introduction page (e.g., "Download," "Start"), during games (e.g., "Press for challenges"), or when redeeming a code (e.g., "Redeem").
3.d) CTA Button Background Color
The background fill color of your app's call-to-action buttons.
3.e) CTA Button Label Color
The color applied to the text label on your CTA buttons, ensuring it remains readable against the button's background color.
Example TurfHunt app
Example of CTA Button Background Color: pink TurfHunt #F38E8E
Example of CTA Button Label Color: white TurfHunt #FFFFFF
Looking for something custom in this section?
A custom front page template, a different font (type or size), or anything else? Fill out the Request custom development form to get started. (Same form used in the App Set Up tab's Custom Development section.)