Design Configuration

The Design Configuration section provides comprehensive styling options to customize the appearance of forms globally. This includes adjustments to general form styles, stepper visuals, and individual field aesthetics.

---

Design Configuration Panel:

A Design Configuration set with default options and the ability to change the form, stepper and field styles.

Default Form Design:

A default form with no design configurations set

---

🔸 Form Styles

Customize the general look and feel of all forms using the options below:

🔹Primary Color

Sets the main accent color for buttons, highlights, checkboxes, etc.

Example: Setting the Primary Color to red #e32f28 will change the main accent colors to red:

The buttons and highlighted areas now appear in red, matching the updated color code

🔹Primary Contrast Color

Determines the text/icon color placed over the primary color to ensure readability.

Example: Setting the Primary Contrast Color to red #e32f28 will change the main accent colors to red:

The Primary Contrast Color is now set to red which contrasts with the blue default Primary Color

🔹Background Color

Controls the overall background of the form container.

Example: Setting the background color to grey #d1d1d1will set the background color of the form to grey.

The Background Color is now set to grey

🔹Font Color

Defines the default text color throughout the form. Example: Setting the Font Color to red #e32f28 will change the display label's Font Colors to red:

The display label's Font Color for each field is now updated to red

🔹Font Styles

Choose a base font family for the form. Example: Setting the Font Style to Roboto will set the Font Style of the label fields to Roboto.

The Font Style of the display labels for each field is now set to Roboto

---

📋 Stepper Styles

These settings define the style of multi-step forms (steppers), making it easy to indicate active and inactive steps:

• Active Step Background Color: Highlights the currently active step. Example: #e32f28

• Active Step Font Color: Font color within the active step area. Example: #ffffff

• Inactive Step Background Color: Style for steps that aren't currently active. Example: #f3f3f2

• Inactive Step Font Color: Text color used in inactive steps. Example: #262626

---

🧾 Field Styles

Define the appearance of input fields and labels used throughout forms.

📑 Select Field Template

Choose a field design from visual templates.

Field Style #1

Field Style #2

Field Style #3

Field Style #4

🔤 Label & Input Styles

• Label Font Color: Controls the color of field labels. Example: #262626

• Font Styles: Font family applied to field text. Example: sans-serif

• Font Size: Adjust the size of the field label and input text. Example: 14 (typically in pixels)

---