The Theme Builder is a tool where you define the look and feel of your application! It’s the place where we can edit a lot of attributes like colors, typography and the size of icons!

Colors

In this section you can change the colors of your application. Betty Blocks has a couple of predefined colors set up for you but you can change them to whatever you want!

You can edit a color by clicking on the paint can icon and using the color picker to pick a color.

Typography

In this section you can change everything regarding the typography of your application. The typography section is separated in two segments, titles and body & button texts. Both segments have the exact same options.

Text: Choose a text to customize.
Size: Set the value of the text size for each screen resolution.
Transform: Choose the type of transformation that the text is transformed into.
Font family: Choose the font family that’s used for the text.
Font weight: Choose the weight for your font.
Letter spacing: Choose the type of spacing you would like to use and the value.
Color: Choose a color for your text.

Border thickness

This option allows you to change the thickness of your border to your personal preference.

Small: Change the pixel size for the small border thickness.
Medium: Change the pixel size for the medium border thickness.
Large: Change the pixel size for the medium border thickness.
Extra large: Change the pixel size for the medium border thickness.

Border radius

This option allows you to alter the radius of your borders corners to your personal preference.

Small: Change the pixel size for the small border radius.
Medium: Change the pixel size for the medium border radius.
Large: Change the pixel size for the large border radius.
Extra large: Change the pixel size for the extra large border radius.

Icon sizing

This option allows you to alter the radius of your borders corners to your personal preference.

Small: Change the pixel size for the small icon.
Medium: Change the pixel size for the medium icon.
Large: Change the pixel size for the large icon.
Extra large: Change the pixel size for the extra large icon.

Inner and outer spacing

This option allows you to alter the spacing inside and outside of elements. The option can be specified for each screen size.

Small: Change the value for the small spacing for each screen size.
Medium: Change the value for the medium spacing for each screen size.
Large: Change the value for the large spacing for each screen size.
Extra large: Change the value for the extra large spacing for each screen size.