App Style: Essential Design

The App Style menu allows you to manage your app’s overall design from a single location.
All options set in this menu are applied globally to every section of your app.

⚠️ Important
If you modify any option in the App Style menu, any design settings previously customized at the section level will be overridden.
The new App Style settings will replace those section-specific designs and will apply to all sections of your app.

To set up your App Style essential design:
1. Go to the left menu "My App"
2. Click "App Style " in the right column

For in-depth customization of a specific section, please refer to the dedicated online help for section-level design settings.

1. Set your color theme
A color theme is a set of complementary colors that are applied globally across your app.
GoodBarber provides several options: you can choose from the built-in color schemes, use the Magic Palette to automatically generate a theme, or create your own theme from scratch or by editing an existing palette.

2. Customize colors in more detail
Once your theme is defined, you can fine-tune how colors are used for each element of your app. For example:
- Header: title color, icon color, and background color
- Primary colors used throughout the app
- App background color
- Button colors
- And more

This allows you to precisely control the visual identity of your app.

3. Apply the theme to your app
After setting and customizing your colors, apply the theme to your app.
These settings will be automatically applied across all sections, helping you save time and maintain a consistent design throughout the app.

Text in your app follows a clear hierarchy to ensure readability and visual consistency.
Eight text levels are used to display titles, subtitles, and paragraph content.

1. Select a font theme
The App Style menu lets you choose a font theme composed of three complementary fonts.
This font combination is applied globally across your app to maintain visual harmony.

2. Set text size using the slider
App Style automatically calculates the font size for each text level to respect the text hierarchy.
Adjusting the slider scales all levels proportionally while preserving readability.

3. Customize fonts at each level
You can fine-tune fonts for each text level individually.
All fonts from the Google Fonts library are available, along with the native fonts installed by default on your users’ devices.

For better visual consistency, we recommend using no more than three fonts across your app.

You can also add a custom* font by clicking the + icon in the dropdown list. The font will then be added to your font family list.
*Important: Fonts may be subject to copyright and licensing restrictions, whether for personal or commercial use.
Please make sure you have the right to use and distribute any font in the context of your app by reviewing its license agreement.

4. Adjust font properties
For each font, you can define its weight, line height, and letter spacing.

5. Apply your font settings
Once your fonts are set and customized, apply the changes to your app.
These settings are automatically applied across all sections, helping you save time and maintain a consistent design throughout your app.

In your app, buttons are used on pages that prompt users to take an action.
There are three button levels, each designed for a specific type of action and context within sections and Home widgets.

GoodBarber automatically assigns the appropriate button level based on the action and where the button is displayed in the app.

- Level 1: Primary action button, always displayed as a filled button
- Level 2: Secondary action button, always displayed as an outlined button
- Level 3: Tertiary action, displayed as a text link only

1. Set the button shape
From the App Style menu, you can choose the shape applied to all buttons in your app:
- Square
- Rounded
- Round

This setting applies globally to all button levels.

Important
- Button colors are based on your app’s color scheme. You can override the color of a specific button from the section design panel or widget settings .
- The button level is defined by GoodBarber and cannot be changed manually.  

In the App Style menu, you can define the global appearance of all form fields by configuring:

- The field shape (square, rounded, or round)
- The field size and layout (small, medium, or large)
- The label position (title inside or title above the field)

Once modified, these form field styles are automatically used in every section and widget.
This global setup helps you maintain a consistent design across your app without having to adjust each form individually.