Start a conversation

Cardiff Design Guide

With our Cardiff release, you may have noticed some changes and adjustments to previous Design settings. Please use the below guide to navigate our newly laid out Design Step. 

  • UI: User Interface Design. This refers to the graphic design element of product. This is a common term in the industry and is usually associated with UX (User Experience).  


Note: The availability of some features and settings will depend on the Homescreen layout. 

Homescreen layout: Slide Out Menu, Grid Menu, Scrolling Menu or Tab Bar Menu.
  • Previously, Modern Panel Sliders (list/tiles) and Traditional (bottom, left, right, top). 
  • You can still pick and choose between List and Tiles using Slide Out Menu > More Options > Sliding View > List or Grid
  • Select Grid Menu to display all features on the Homescreen. Under Show Navigation With, choose how many rows and columns you'd like to appear. 
Background color 
  • This is the base color for your Homescreen, below your image. If you do not have an image assigned, this color will appear.
Branding feature
  • With our Coronado release, the Branding feature replaced the Header image
  • You can still add a Header image using this feature by dragging the image at the top of the Homescreen. 
Homescreen Background
  • This image will appear on the Homescreen.
Carousel Images
  • Previously Animated Images. These are the images that will rotate across the Homescreen. We recommend using transparent images for a more seamless design. 
  • Available with Slide Out, Grid Menu and Top Bar Menu
More Options 
Sliding View
  • Enable List or Grid view for your Menu
  • Available with Slide Out Menu
Menu Hint Text
  • This is a new feature. Use this setting to alert users to the Menu icon in the upper left corner of the Homescreen. 
  • Available with Slide Out Menu
Additional Buttons; Call Us, Directions and Share.
  • Allow your users to call, get directions or share the app directly from the Homescreen. 
  • Available with Slide Out Menu and Tab Bar Menu layouts
  • Add buttons to your Homescreen and link them out to features within your app. 
  • Available with Slide Out Menu and Tab Bar Menu layouts
Show Navigation With
  • Choose how many Rows and Columns (features per row) you'd like on the Homescreen
  • Available with Grid Menu
Navigation Tabs
  • Choose the images you'd like to appears under the scrolling Menu
  • We recommend using an image that is 1080px in width. The feature uses Aspect Fill, so there is no recommended height per se. If you are using an image with text, it may take some trial and error to find the right size. 

Icon color 
  • This color controls the feature icon that appears on the Menu of the app. 

Menu Text color and Background color 
  • The Menu text color controls the color of the text the feature name appears in under the Menu. 
  • The Menu background color controls the background color of the Menu. Please note, it is no longer possible to have an opaque (semi-transparent) menu background. Moving forward the Menu will have a solid color background. 
Note: If you are using the Tab Bar Menu layout, the Menu background color will pull from the More feature under Build. Navigate to Build > More Menu > Custom Design > Panels & Dividers colors. 

Homescreen Shortcut color 
  • Use this setting to adjust the color of Homescreen shortcut (three line icon)

More Options

Button text 
  • Use this setting to enable or disable the text (feature name) that appears on the menu button. 
​Button Icon
  • Use this setting to enable or disable the Icon that appears next to the feature on the menu 

Icon background image 
  • Upload your own app icon image here or choose from one of our previously designed images
  • With Cardiff, the option to use opacity (transparent background) has been removed. We've removed this option to allow for more standardize and modern app designs.

Global Styling: 

Main App Color
  • This is the primary color for your app and will appear throughout the design and in your Promotional materials.
UI Bar Background color
  • This color controls the iOS status bar background color 
  • Not available for apps created after Cardiff release
UI Bar Text color
  • This color will be used for text appearing in the header for each feature.
Main Text color
  • The primary color that will be used for all text throughout the app
Background color 
  • The primary background color that will appear through out your app
Font and Font weight 
  • Font: Select the global font for your app from either the list of Google or iOS fonts
  • Font Weight: This setting refers to the relative thickness of character outlines relative to their height. For example; Bold, Italic, etc. 
More Options
Global Background image  
  • This image will appear as the global background for all features
Header background image 
  • Upload your own image or choose from one of our pre created images. The image will appear in the header for each feature.
  • If you assign an image, it will replace the Main App Color 

Note: All settings under the Global Styling section will apply to all the features throughout your app. If you wish to create a custom design for one of your features, use the Custom Design option under the Build section.
Choose files or drag and drop files
Was this article helpful?
  1. Gerardo Gonzalez

  2. Posted