Branding Overview

The Branding section of each app allows the Studio User to control app-wide settings such as Font Styling, Color Palette, Header, Footer, and Fab. Any changes made to these sections are automatically updated throughout the app. 

  • Font Styling - Provides access to the top 100 most popular Google Fonts that can be for text throughout the app.
  • Color Palette - Consists of nine colors that a Studio User can update to easily control colors throughout the app.
  • Header - Allows a Studio User to add a logo and hamburger menu or back arrow to the top of the app. 
  • Footer - Enables a Studio User to add a navigation element to the bottom of the app. 
  • FAB - Provides a Studio User with the ability to add a floating action button (FAB) with access to one or multiple items on pages throughout the app. 
Pro Tip: Take a few minutes to set the Branding properties for your app before you start adding Pages and Components. This will make the app designing process much faster.

Watch: Getting Started with App Branding

Font Styling

The Font Styling section provides Studio Users with a dropdown of the 100 most popular Google Fonts to use for text throughout the app. 

Color Palette

The Color Palette enables Studio Users to create a consistent app that adheres to brand standards. A majority of Components with color properties utilize the Color Palette allowing Studio Users to manage brand colors from one location within the app and have all applicable Components automatically update with any changes to the app's Color Palette. The Color Palette for each app contains nine colors:

  • Primary Color
  • Secondary Color
  • Tertiary Color
  • Accent Color
  • Success
  • Alert
  • Dark
  • Medium
  • Light

A Header appears at the top of the Page of an app and is commonly used to display a logo and/or provide navigation. The Header is sticky and set to sit above the Page content. This allows Components on a Page to scroll behind the Header. 

Types of Headers

There are two types of Headers available in the Studio and each app can only have one Header type. The Header can be toggled on or off on every Page in the app and the Header is toggled on by default.  

  • Header with Back Button - Provides the option to display a logo and/or Back Button in the Header. When the Back Button is toggled on, the Back Button always appears on the left of the Header and links to the previously viewed app Page.
  • Header with Menu - Provides the option to display a logo and Hamburger Menu which can appear on the left or right side of the Header. When tapped, the Hamburger Menu triggers a fly-out menu which is commonly used to navigated app end users to other Pages within the app. 

Header with Back Button

The Header with Back Button has the following properties:

  • Component Id - Sets the name of the Header component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.
  • Image - Upload a .JPG or .PNG to display a Header Image. To remove an uploaded Image, click on the Trash Can. 

    Pro Tip: Use a .PNG with a transparent background to achieve a seamless appearance with the logo and background color.
  • Background Color - Sets the color of the Header background bar. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. 
  • Show Back Button - Toggle on or off to make the Back Button visible within the Header.
  • Back Button Color - Sets the color of the Back Button. There are two ways to set the Back Button Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. 

    Best Practice: Make sure the Back Button Color and Header Background Color are contrasting enough so users can easily see and access the arrow.
  • Back Button Icon - Pulls in icons from a library of open source icons built by the Ionic Framework team. The property is defaulted to arrow-back as this is the most recognizable icon for the expected behavior. 
  • Border Color - Sets the color of the Header's bottom border. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.  
  • Border Width - Sets the width of the Header's bottom border. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). The border does not appear if it is set to 0 px.

Header with Menu

The Header with Menu has the following properties:

  • Component Id - Sets the name of the Header component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.
  • Header Settings
    • Image - Upload a .JPG or .PNG to display a Header Image. To remove an uploaded Image, click on the Trash Can. 

      Pro Tip: Use a .PNG with a transparent background to achieve a seamless appearance with the logo and background color.
    • Menu Icon Color - Sets the color of the Hamburger Menu Icon. There are two ways to set the Menu Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. The Hamburger Menu only appears when there is at least one linked Menu Item.
    • Background Color - Sets the color of the Header background bar. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. 

      Best Practice: Make sure the Back Button Color and Header Background Color are contrasting enough so users can easily see and access the arrow.
    • Border Color - Sets the color of the Header's bottom border. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.  
    • Border Width - Sets the width of the Header's bottom border. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). The border does not appear if it is set to 0 px.
    • Menu Icon Side - Sets the side where the Hamburger Menu Icon appears in the Header.
  • Menu Settings
    • Fly-out From - Sets the side of the screen where the Fly-out Menu appears when the Hamburger Menu Icon is tapped. 

      Best Practice: Set the Menu Icon Side and Fly-out From properties to the same side to create an intuitive design for app end users.
    • Menu Background Color - Sets the background color of the Fly-out Menu. There are two ways to set the Menu Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. 
    • Line Color - Sets the Line Color between each Menu Item. There are two ways to set the Line Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. The Line Color only appears when the Line Width is set to at least 1 px.
    • Line Width - Sets the width of the lines between each Menu Item. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). Lines do not appear if set to 0 px.
  • Menu Fly-out Header
    • Header Text - Sets the title of the Fly-out Menu. This text does not wrap and should be limited to 15 characters. 
    • Text Color - Sets the color of the Header Text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Background Color - Sets the color behind just the Header Text. There are two ways to set the color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Individual Menu Items (Up to 10)
    • Link - Sets the link for the individual Menu Item to another Page in the app or an external URL. 
    • Text - Sets the text that appears for the Menu Item. Text does not wrap and should be limited to 10 characters. 
    • Text Color - Sets the color of the Text for the Menu Item in the Fly-out Menu. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Image - Upload a .SVG to display for the individual Menu Item icon. To remove an uploaded Image, click on the Trash Can. 
    • Icon - Pulls in icons from a library of open source icons built by the Ionic Framework team. If an Image is uploaded for the Individual Footer icon, then it will override Ionic Icon property. 
    • Icon/Image Color - Sets the color of the Menu Items in the Fly-out Menu. There are two ways to set the Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. A .SVG must be uploaded to the Menu Item Image property for the Icon Color to work properly. 

A Footer appears at the bottom of the the Page of an app and is used to provide navigation. The Footer is sticky and set to sit above the Page content. This allows Components on a Page to scroll behind the Footer. The Footer can be toggled on or off on every Page in the app and the Footer is toggled on by default. 

The Footer has the following properties:

  • Component Id - Sets the name of the Footer component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.
  • Icon Color - Sets the default color of the Icons in the Footer. All Icons in the Footer will display this color except the Active Icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. A .SVG must be uploaded to the Footer Tab Image Property for the Icon Color to work properly. 
  • Active Icon Color - Sets the color for the Active Icon in the Footer. The Active Icon happens when the app end user is currently viewing a Page in the app linked in the Footer. When this occurs, the applicable Icon in the Footer will have the Active Icon color. There are two ways to set the Active Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. A .SVG must be uploaded to the Footer Tab Image Property for the Active Icon Color to work properly. 
  • Background Color - Set the color of the Footer bar. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Individual Footer Tab Properties (Up to Five)
    • Image - Upload a .SVG to display for the individual Footer icon. To remove an uploaded Image, click on the Trash Can.  
    • Ionic Icon - Pulls in icons from a library of open source icons built by the Ionic Framework team. If an Image is uploaded for the Individual Footer icon, then it will override Ionic Icon property. 
    • Text - Displays optional text below the Footer icon. If left empty, no text will display and the Footer icon expands to fill the full height of the Footer. The text does not wrap and when using multiple Footer icons long text is cutoff. 
    • Link - Sets the link for the individual Footer icon to another Page in the app or an external URL. 
    • Share - Toggle on to enable native share in supported devices.
      • Share Title - The title app users will see when they click the Share icon.
      • Share Message - Prepopulates the message. App users can edit this when sharing through their native apps, such as messaging.
      Pro Tip: Native share is not supported on desktop browsers. Set an external link or link to an Existing Page in the app so desktop users have an alternative option to share your app.
Best Practice: Make sure the Icon Color and Active Color contract enough with the Background Color so users can easily see and access the icons.

FAB

The FAB is a floating action button the Studio Users can utilize to provide easy access to one or multiple items on pages throughout the app. The FAB appears on top of other content on the page allowing app users to scroll through the page content while the FAB remains anchored in place. 

Types of FABs

  • Single FABCommonly used when there is only one major call-to-action app users need to take. Consider using the Single FAB for a phone number, linking to help content or just to take users back to the app’s homepage.
  • Multiple FABA truly customizable option that allows Studio Users to display a unique icon for up to five items in the expanded view of the FAB. This option works well to connect app users to email and phone information, quickly access other pages in the app, etc. 
  • Social FAB - Automatically pulls in the icons for Facebook, Twitter, LinkedIn, and Instagram. Studio Users can toggle on or off which social media channels appear in their app and link app end users to the applicable social media accounts.  

Single FAB

The Single FAB has the following properties:

  • Component Id - Sets the name of the Single FAB component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.  
  • Link - Sets the link for the Single FAB to another Page in the app or an external URL. 
  • Icon - Optional property allowing an .SVG to be used in place of the default collapsing plus icon. To delete a custom icon, click on the Trash Can to the right of this property. If left empty the default icon will be used. 
  • Fill Color - Sets the color of the primary FAB’s circle. There are two ways to set the Fill Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Icon Color - Sets the color of the FAB’s icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Vertical Alignment - Sets the vertical location of the FAB on the Page. Choose from the dropdown list: Bottom, Center, or Top.
  • Horizontal Alignment - Sets the horizontal location of the FAB on the Page. Choose from the dropdown list: Center, Right, or Left.

Multiple FAB

The Multiple FAB has the following properties:

  • Component Id - Sets the name of the Multiple FAB component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.  
  • Primary FAB Properties
    • Custom Icon - Optional property allowing an .SVG to be used in place of the default collapsing plus icon. To delete a custom icon, click on the Trash Can to the right of this property. If left empty the default icon will be used. 
    • Fill Color - Sets the color of the Primary FAB’s circle. There are two ways to set the Fill Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Icon Color - Sets the color of the Primary FAB’s icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Side - Sets the side from which the expanded FAB icons are shown relative to the Primary FAB. Choose from the dropdown list: Bottom, Right, Left, or Top.
    • Vertical Alignment - Sets the vertical location of the FAB on the Page. Choose from the dropdown list: Bottom, Center, or Top.
    • Horizontal Alignment - Sets the horizontal location of the FAB on the Page. Choose from the dropdown list: Center, Right, or Left.
  • Individual FAB Properties (Up to Four)
    • Link - Sets the link for the individual FAB to another Page in the app or an external URL. 
    • FAB Icon - Upload an .SVG to display for the individual FAB icon.
    • Fill Color - Sets the color of the individual FAB’s circle. There are two ways to set the Fill Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Icon Color - Sets the color of the individual FAB’s icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.

Social FAB

The Social FAB has the following properties:

  • Component Id - Sets the name of the Social FAB component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.
  • Primary FAB Properties
    • Custom Icon - Optional property allowing an .SVG to be used in place of the default collapsing plus icon. To delete a custom icon, click on the Trash Can to the right of this property. If left empty the default icon will be used. 
    • Fill Color - Sets the color of the Primary FAB’s circle. There are two ways to set the Fill Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Icon Color - Sets the color of the Primary FAB’s icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Side - Sets the side from which the expanded FAB icons are shown relative to the Primary FAB. Choose from the dropdown list: Bottom, Right, Left, or Top.
    • Vertical Alignment - Sets the vertical location of the FAB on the Page. Choose from the dropdown list: Bottom, Center, or Top.
    • Horizontal Alignment - Sets the horizontal location of the FAB on the Page. Choose from the dropdown list: Center, Right, or Left.
  • Social FAB Properties (Facebook, Twitter, LinkedIn and Instagram
    • Display - Toggles on or off the fab for a specific social channel.
    • Link - Sets the link for the social channel FAB to another Page in the app or an external URL. 
    • Fill Color - Sets the color of the social channel's FAB circle. There are two ways to set the Fill Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Icon Color - Sets the color of the social channel's FAB icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.

Still need help? Contact Us Contact Us