How to set up the global style of your app

Hello and welcome to your GoodBarber back office! 

Today we are going to talk about an ultra powerful tool for the design of your app, the Global Style menu.

The Global Style allows you to manage the general design of your application from a single menu.

The colors, fonts and effects chosen in this menu are applied to each section of the application.

However, be careful! Every change made from this menu will be applied to ALL sections of your app.

Let's see what it looks like.

I go to the My app > Design > Global Design menu

I click on Global Style.

The first thing to do is to choose a color theme. 

A color theme is a combination of colors that match harmoniously. Global Style offers a library of color themes.  

To choose from the library, I click on "Change color theme".

As you can see, I have a choice.

If I want to modify my current theme instead, I click on Edit, then at the bottom of the page, I click on Create a new theme. 

I just have to select my colors; 

The typography part now.

There is a hierarchy for the display of text in the application. 

8 levels are used to display titles, subtitles and paragraph text.

I define the font size.

The font for each level.

Depending on the fonts chosen, I can also choose the option.

Let's move on to the buttons.

For the sections of your app that prompt users to perform actions, I will select the shape of the buttons I want to apply. 

I can preview the result by clicking here.

There are several levels of hierarchy regarding the buttons in your app. The design of the buttons depends on the color theme of the app, in order to respect the harmony, several variations are proposed for each theme.

Here are the different types of design for each level of hierarchy:

- Level 1: colored button background, no outline.

- Level 2: transparent button background, colored outline and text.

- Level 3: transparent button background, no outline.

Then, the hover effects on the images (only present on PWA desktop)

And finally the additional elements like the back icon that appears in the header during the navigation in the app. You can also set this icon when you design your header.

Here I apply my modifications.

Don't forget that these changes will overwrite all the current design of your store, including your drop down sections! 

I think my app is perfect like this! What about you?

See you soon for a new tutorial!