Given that styling is an important part of building user-facing flows, we have invested quite a bit in making this very detailed. There are 3 levels of styling a particular flow -
- Level 1: Global settings
- Level 2: Component level settings
- Level 3: Component instance level settings
Global styling settings
From the builder header, if you go to App settings → App Styling, you will see two tabs. The first tab contains all the global settings.
Following are the global settings you can change -
- App Font - You can pick any free font from Google fonts.
- The title of the home page in the header - by default, you will see "Home" written on the home page header.
- Should show header or not - a checkbox for whether to show header or not
- Global colors
- Header background color
- Footer background color
- Header text color
- Primary button color
- Primary button text color
- Secondary button color
- Secondary button text color
- Primary text color
- Secondary text color
- Grey one color
- Grey two color
- Error text color
- Global font sizes
- Heading 1
- Heading 2
- Heading 3
- Small text
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1d460c29-f857-4aa9-9783-9d53d618817a/Screen_Recording_2020-10-07_at_7.38.02_PM.mov
Component level settings
From the builder header, if you go to App settings → App Styling, you will see two tabs. The second tab contains all the component settings.