Styling in Builder

In the builder tool you can change the properties of the components and widgets within predetermined by the design system colors, sizes and other visual parameters:

Status

Status is a complex design indicator of UI Bakery that not only creates the color design of the whole application but explains the meaning of every color. There are five major statuses in UI Bakery: primary, success, info, warning, danger. For example, all inputs with a

  • primary status are painted in dark blue. Primary status determines the general color of your application.
  • success status (for example, green colour) indicates about successful actions (save changes, create a file and so on);
  • info status (e.g. light blue) - informational color.
  • warning status (e.g. yellow) - warns about something important (notifications);
  • danger status are painted in red, that means that they make significant actions (delete or system messages);

Size

Here you can edit the predefined by design system size of all of your elements separately. For your convenience, only four types of sizes are available:

  • tiny;
  • small;
  • medium;
  • large.

Shape

Shape of your components (from square to round), can be edited in the configuration panel of Painter Tool.

Need some help?

Didn't find something here? Simply drop us a line at contact@uibakery.io