Design System

The Design System controls the visual aesthetic of your app. Teta allows you to change app colors (Palette), set text styles (Typography) for your app.

The Design System panel consists of three tabs:

Palette

Colors added in this section will be readily available for use in the user interface.
It allows you to customize the following properties of each Color:

  • Name – you can edit the name of the custom Color to give it an appropriate name.
  • Color – to update an existing color, select the color you want to edit and then use the color picker or enter your color value (e.g. Hex).

Typography

You can customize the Text Styles used by your project from this section. It lets you customize the following properties of each style:

  • Name – you can edit the name of the custom Text Style to give it an appropriate name.
  • Font Size – use this field to specify the size of the text.
  • Font Family – click here to open the Google Fonts Picker dialog box that lets you choose the font family.
  • Font Weight – choose the font-weight among Thin, Extra Light, Light, Normal, Medium, Semi Bold, Bold, Extra Bold & Black.

Assets

The Assets section allows you to upload the images to be used by the app. You can also remove any asset that you no longer need.

To learn more about how to add assets from pc click here.