Overview

This article provides general information regarding the Cardiff release.

Information

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

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

Home Screen

Feature	Description
Home screen 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 choose between List and Tiles by navigating to Slide Out Menu > More Options > Sliding View > List or Grid. Select Grid Menu to display all features on the Home screen. Under Show Navigation Width, choose the number of rows and columns you would like to show.
Background color	This is the base color for the Home screen, below your image. If you do not have an image assigned, this color will appear.
Branding	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 Home screen.
Homescreen Background	This image will appear on the Home screen.
Carousel Images	Previously Animated Images. These are the images that will rotate across the Home screen. We recommend using transparent images for a more seamless design. Available with Slide Out, Grid Menu, and Top Bar Menu.
Sliding View	This feature enables List or Grid view for your Menu, and it is available with Slide Out Menu.
Menu Hint Text	You can use this new feature to alert users to the Menu icon in the upper-left corner of the Home screen. Available with Slide Out Menu.
Additional Buttons: Call Us, Directions, and Share	This feature allows your users to call, get directions, or share the app directly from the Home screen. Available with Slide Out Menu and Tab Bar Menu layouts.
Shortcuts	This feature adds buttons to your Home screen and links them out to features within your app. Available with Slide Out Menu and Tab Bar Menu layouts.
Show Navigation Width	You can use this feature to choose how many Rows and Columns (features per row) you would like on the Home screen. Available with Grid Menu.
Navigation Tabs	Choose the images you would like to appear 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.

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

Navigation

Feature	Description
Icon Color	This color controls the feature icon that appears on the Menu of the app.
Menu Text & 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. 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 More Feature under Build. Navigate to Build > More Menu > Custom Design > Panels & Dividers colors.
Home Screen Shortcut Color	Use this setting to adjust the color of Home screen shortcut (three line icon).
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 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 have removed this option to allow for more standardized and modern app designs.

Global Styling

Feature	Description
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 the 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 throughout 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.
Global Background Image	This image will appear as the global background for all features.
Header Background Image	Upload your 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 Area option under the Build section.

Articles in this section

Cardiff Design Guide