K2BTools Tutorial - Exercise 11.2 - Customizing the Design System

In the last excersice, we selected a design system that was predefined. Now, we are going to customize that design system by changing a few properties inside of it.

  1. Open the design system configuration and go to "Master Page" tab.
    1. Select the "Fixed left menu".
    2. Change the application name to "K2B Tools".
    3. Disable the notifications component and the universal search.
    4. Enable "Dark Mode".
      MasterPage7
      Master Page

  2. Go to "Colors" tab and select the option scheme "Blue" with variant "Light".
    ColorTab1
    Colors

  3. Go to "Headers and footers" tab.
    1. Change "Object title" height to "50 px" and font to "26 px".
      ObjectTitle2
      Object Title

  4. Go to "Grids" tab.
    1. Modify "Font" property inside "Values" section to 14px.
    2. Change "Bottom border" property to "Thin".
      GridsValue2
      Grids Values

  5. Go to "Form Controls" tab.
    1. Change "Borders" property to "Rectangle".
    2. Modify "Corners" property to "Rounded small".
      Borders123
      Form Controls

  6. Go to "Buttons" tab and change all "Font" properties to 15px.
    Buttons1
    Buttons

  7. Go to "Work With" tab.
    1. Modify "Actions positions" to "Left".
    2. Change "Actions Visibility" to "Always".
      WWTab1
      Work With

  8. Go to "Form" tab.
    1. Change the property "Field label position" to "Top".
      WWForm1
      Form

  9. Click on finish, wait for the changes to apply and then Build the application (F5). See the results on runtime.