Purple App Experience
App Design

Colour settings in Purple Manager

15min

Purple Manager



Introduction

You can colour your app by setting only two colour values. Based on these colours, the Purple Manager automatically generates a colour scheme for your app



Preconditions

Hexadecimal colors

For choosing colours in Purple Manager, we will ask you for the hexadecimal value of your desired colour. You will either find this in the CI guide of your brand, ask your designer, or just take the RGB or CMYK value and get the hexadecimal value using a hex colour picker/converter like the one from Google https://g.co/kgs/WiCzsm.



Summary

You can colour your app by setting only two colour values derived from your brand colours to ensure consistency.

  • Set primary brand colour (hex code)
  • Set secondary brand colour (hex code)

Based on these two colours, the Purple Manager automatically generates a colour scheme for your app.

In order to ensure that the brand colors are set correctly, the following native app sections need to be configured within the Purple Manager:

  • Notification colour
  • App menu colour
  • Action bar colour
  • Table of contents colour

Primary color

This is the primary color of the app design and usually corresponds to the colour scheme of your corporate design or logo. The hexadecimal value of the desired color is required to determine this setting.

Secondary color

This should be chosen in contrast to the primary colour, so elements in the secondary colour are easily recognized in the app or your web experience. This setting also requires a hexadecimal value.  

Other colors

  • Generally, almost all colours in the app can be customized for you. 
  • For example, by default content is displayed in black against a white background.  
  • You can also change these in the way described below, which will change the automatically generated colour scheme and may make content difficult to read.  

If you need some guidance here, please contact us. We will gladly help you with these adjustments.



Specification

Mandatory native colour settings

Besides the colour settings for your Purple Experience and most other pages (subscriptions, login page etc.) there are a few native colour settings which need to be set in the Purple DS Manager. These settings are active after a rebuild of the app.

Notification color

These colors can be set in the App Design/General/Advanced settings section. There are two colors which can be changed:

  • General Notification Background Color (we suggest using your primary colour here)
  • General Notification Text Color (usually the primary text colour OR black or white)

App menu colour

These colours can be set in the App Design/General/Advanced settings section. There are multiple colours which can be changed:

  • Background colour (background colour of the main app menu)

Passive menu entries

  • Item Normal Text Colour (Text colour of a menu entry which is not pressed or selected)
  • Item Normal Background Colour (background colour of a menu entry which is not pressed or selected)
  • Icon Normal (colour of a menu icon which is not pressed or selected)

Active menu entries

  • Item Pressed Text Colour (Text colour of a menu entry which is pressed or selected)
  • Item Pressed Background Colour (background colour of a menu entry which is pressed or selected)
  • Icon Active (colour of a menu icon which is pressed or selected)

Action bar

These colours can be set in the App Design/General/Advanced settings section. There are three colours which can be changed:

  • Action bar Background Colour (use of primary colour is advised)
  • Action bar Text colour (usually primary text colour /black or white)
  • Action bar Icon Colour (usually primary text colour /black or white)

Table of contents colour

These colours can be set in the Newsstand Design/General/Advanced settings section. There are two colours which should be changed:

TOC Dialog Border Colour (use of primary colour is advised)

Line Color between Entries (use of primary colour is advised)