Branding

Branding involves integrating and conveying a brand's identity and values through a specific theme. It assists in creating a cohesive and memorable brand experience by integrating visual elements into different design aspects and aesthetics. You can customize the necessary components to align with your organizational requirements. 

The following are the list of the branding components:

• Component Scale
• Input Style
• Field Background Color
• Field Hover Color
• Border Color
• Hover Background Color
• Hover Text Color
• Unselected Background Color
• Unselected Text Color
• Placeholder Text Color
• Ripple Effect
• Font Family
• Primary Text Color
• Secondary Text Color
• Disabled Opacity
• Disabled Text Color
• Background Color
• Orientation

Component Scale

Component scale enables you to provide the sizing and proportion of various design elements. You can increase or decrease the section size vertically and the font size of the text. It involves determining the appropriate size relationships between different components to create visual balance.

Figure: Component Scale

Click plus (+) sign to increase the size of all the components and controls in the application. Similarly, click minus (-) sign to decrease the size of all the components and controls in the application.

Input Style

Input style enables you to configure Outline and Filled colors of the fields. Outline color indicate the focus state of a text field and Filled color indicates its input state or validation status.

Figure: Input Style

Field Background Color

Field background colors serve a vital function in providing visual clarity within the user interface. They facilitate quick differentiation between various sections or content types, thus enhancing usability and navigation efficiency. Additionally, these colors contribute to the overall visual appeal of the application, reinforcing its unique brand identity and design consistency.

Figure: Field Background Color

Field Hover Color

The Field Hover Color is necessary in application themes to indicate interactive fields when users hover over them. This visual cue enhances clarity and responsiveness in the interface, improving the overall user experience.

Figure: Field Hover Color

Border Color

The border color of all form controls with borders visually stands out from other elements in the interface. It distinctly outlines the field, separating it from nearby content and giving it a noticeable visual presence.

Figure: Border Color

Hover Background Color

The Hover Background Color swiftly signals visual feedback, indicating the element's interactivity. It enhances user engagement by ensuring that clickable elements are easily discernible.

Figure: Hover Background Color

Hover Text Color

Hover Text Color notifies users that the text undergoes a distinct state or behavior when hovered over, ensuring readability and accessibility. This enhances legibility and clarity, making the text more easily read and understood.

Figure: Hover Text Color

Unselected and Selected Background Color

The Unselected Background Color establishes a clear visual hierarchy in a user interface and serves as a visual cue encouraging users to choose or engage with the available options.

Figure: Unselected Background Color

Figure: Selected Background Color

Unselected Text Color

The Unselected Text Color in application themes ensures readability and visual consistency. It defines the appearance of text that is not currently selected or focused, aiding users in distinguishing between different text elements.

Figure: Unselected Background Color

Placeholder Text Color

Placeholder Text Color instruct you to enter the text into the input field. It differentiate from regular text and meant to prompt or guidance and easily distinguish between pre-filled placeholder text and their own input.

Figure: Placeholder Text Color

Ripple Effect

Ripple Effect is an animation or visual feedback feature that appears when a user clicks on a clickable element, like a button or a link. It is a design method that offers a tactile response to user actions and improves user experience.

Figure: Ripple Effect

Font Family

Font Family field enables you to select the specific style font from the list. By selecting the type of font family based on your requirement it will change the readability and overall appearance of your content.

Figure: Font Family

Primary Text Color

Primary Text Color provides you to select the desired color for the font of your choice which assist in making your content readable. You can select the color from the color palette. Figure: Primary Text Color

Secondary Text Color

Secondary Text Color enables you to change the text color inside the input box and text color of options such as Radio Button, Check Boxes etc. You can select your desire color from the color palette for the text that is less emphasized or visual hierarchy. 

Figure: Secondary Text Color

Disable Opacity

Disable Opacity helps in defining the opacity of the disabled input boxes. It indicates that a particular element or component is disabled or inactive. You can move the slider or click arrow (greater than or lesser than) from 0 to 1.

Figure: Disable Opacity

Disabled Text Color

Enables you to set the color of the text which is disabled or inactive. It will change the color of the text which is disabled such as label, button text, etc. This disabled text color indicate the user that the text is not currently interactive or editable.

Figure: Disable Text Color

Background Color

Enables you to set the background color of your application or the area behind the content in a document. It improves overall visual appeal of your content. 

Figure: Background Color

Orientation

Orientation enables you to fit the content LTR (Left To Right) or RTL (Right To Left) of your application. It helps in fitting the content appropriately and ensure easily readable. 

Figure: Orientation