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 -

  1. Level 1: Global settings
  2. Level 2: Component level settings
  3. 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 -

  1. App Font - You can pick any free font from Google fonts.
  2. The title of the home page in the header - by default, you will see "Home" written on the home page header.
  3. Should show header or not - a checkbox for whether to show header or not
  4. Global colors
    1. Header background color
    2. Footer background color
    3. Header text color
    4. Primary button color
    5. Primary button text color
    6. Secondary button color
    7. Secondary button text color
    8. Primary text color
    9. Secondary text color
    10. Grey one color
    11. Grey two color
    12. Error text color
  5. Global font sizes
    1. Heading 1
    2. Heading 2
    3. Heading 3
    4. 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.