...

• App Name:

• Short Description:

• URLs:

• Translations:

  • de

  • en

  • …

• Wording:

  • GPS-Tacker

  • Bike

• Primary Colour:

  • #

• Primary Contrast Colour:

  • #

• Secondary Colour:

  • #

• Secondary Contrast Colour:

  • #

Basics

App Name

Name displayed in app stores etc.

Short Description

Short sentence used in link previews, e.g. “Track your e-bike!”

URLs

Links to home page and/or shop

Translations

List of required languages for i18n

Wording

Describe the words to use for

• GPS-tracker

• Bike

• etc.

Theme Colours

Please provide all colours in HTML hex colour codes

Primary Colour

Used as background and main brand colour

Primary Contrast Colour (text, icons, etc.)

Colour used for text and icons, ensure good readability with “Primary Colour” as background

Secondary/Highlight Colour

Colour of visual highlights and Call-to-Action buttons

Secondary Contrast Colour (text, icons, etc.)

Text colour for elements in “Secondary Colour”

See guide below for details

Icons

Basic App Icon

• Used for iOS and older Android versions

• IMPORTANT: No rounded corners or something similar!

• Min. size Size 1024px x 1024px

• “icon.png”

Adaptive Icons Components

• Used by newer Android versions

• Icons are automatically generated from a background and a foreground image containing transparency

• IMPORTANT: No rounded corners or something similar!

• Min. size Size 1024px x 1024px

• Content size of foreground image should be roughly one quarter of image size and be centred (otherwise it might be cut off)

• “icon-background.png” and “icon-foreground.png”

• See links for more details:

  • https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

  • https://medium.com/google-design/designing-adaptive-icons-515af294c783

See guide below for details

Brand

...

Horizontal

• used in app, Passport, Theft report and splash screen

• Min. size roughly 1000px x 300px

• “brand-horizontal.png”

See guide below for details

FavIcon (optional)

• vary very simple icon for web version

• Size 64px x 64px

• “favicon.ico”

Splash Screen Icon (optional)

• used in splash screen instead of “Brand Horizontal” icon

• preferably landscape as the splash screen contains a spinner and also has to work when launching in landscape mode → limited space

• maybe “mono” design for dark backgrounds?

• Min. size approximately 1000px x 300px

• “brand-splash.png”

See guide below for details

Guide for Use of Colours and Icons

...

Example of Adaptive Icon

...