A strong brand story helps communicate the value you provide to customers at every touchpoint they have with your brand. Similarly, your employees and internal users expect a consistent experience whenever they interact with your brand, no matter the system or application. That's why it's crucial to maintain a consistent brand identity and experience across all platforms to align with your business objectives.
One Model enables you to easily configure your brand elements within the application, ensuring your UI/UX seamlessly fits into your broader system landscape and matches your corporate style. You can customize colors, backgrounds, and logos to reflect your brand, providing a cohesive user experience that strengthens your storytelling.
When used with the embedding capability (link), this branding ensures your UI is tightly integrated and consistent across all platforms. This guide offers step-by-step instructions on enabling branding settings in the new UI/UX and explains the functionality of each setting, helping you configure your brand style effectively within the application.
Branding Settings Configurable Items
Main colors, Logo and UI Style
- Main colors (Defines the main colors of the system, which will impact and automatically refresh the default color value for all UI components on the page.)
- Logo (Manage site logos appearing on site login page, navigation bar area)
- Navigation Bar (Customize navigation bar visual style, includes main background color, hover indicator and selected menu color.)
- Navigation Bar Icon Button colors (Customize navigation bar icon button colors, includes icon, background and border.)
- Top Deco Bar (Manages the appearance of the deco bar, size and color.)Page Header (Customize page header visual style, includes page header background color, texts and icons’ color in header area.)
- Page Header (Customize the cross screen header bar under the navigation bar.)
- Slide Down Panel (Customize the One AI Assistant slide down panel, includes background color, icon and text color, and result area background.)
- Storyboard Filter Bar (Customize the storyboard filter bar background and border.)
- Storyboard Page Tabs (Customize the storyboard page tabs including background, icon and text and deco line & divider line.)
- Standard Button (Define the standard button visual style, which be used across the whole site.)
- Highlight Button (Define the visual style for special button – highlight button, which appears to get users focus and hint the important control.)
- Hidden Impacts (All items impacted by your branding settings but not appear directly on the branding settings page.)
Storyboard Tile Style Template
Enabling Branding Settings
1) Users that can configure changes to company settings (Application Access permission CanConfigureCompany) are able to change branding settings.
2) Understand your company branding rules and prepare logo files
-
Color values - collect all the color values you will use in the system. We support both Hex codes and RGBA values:
- Hex codes: Represent colors using hexadecimal values (e.g., #FFFFFF for white).
- RGBA: Stands for Red, Green, Blue, and Alpha (opacity) and allows for more precise color control, including transparency (e.g., rgba(255, 255, 255, 0.5) for semi-transparent white).
- Logo - We suggest using png files that have a transparent background for the reasons shown below.
Using Branding Settings
1) Open Branding Settings Page
Find your branding settings from Admin > Branding, and then from Main colors, Logo and UI Style, click Edit.
2) Color Picking Tool
There are 2 ways to define the color for a UI item:
-
Solid Color:
- You can input a Hex color code or use RGBA,
- Use the color picker to select a value from the pop-up color picking tool, or
- Adjust the color using a main palette slider and control opacity with the opacity slider.
-
Gradient Color:
- Similar to the solid color option, you can use Hex, RGBA, or the color picker tool.
- Additionally, you can define the gradient angle (as a percentage or from the middle).
- Customize the number of gradient stops for more complex color transitions.
3) Reset
Use the ‘Reset’ button to clear your inputs and revert back to One Model’s default visual style.
4) Save your changes before leaving the page.
Save your changes by clicking the ‘Save’ icon before leaving the page to make all changes take effect.
Main Colours
In the Main Colors section, you can control the default colors that appear in your instance. By default, the settings below have been used. To change the colors, you can enter in the HEX color code, use the RGBA value or you can use the picking tool to choose the desired color. Note that the main color defaults items can only be customized as solid colors.
These include:
- Branding Color: This setting defines the main color of the One Model application, it will impact the application navigation bar, default homepage background, Storyboard pages, page header tabs and deco bar/ lines. Sets the main color for the homepage, Storyboard pages and page header tabs.
- Main Contents color (Text/ Icon): This setting changes the color for the main texts and icons which can be used as a label on the button, contents in a table, options in the menu such as the name of Storyboards in the Storyboard library and buttons such as filter, filter dimension and refresh in the storyboards tab.
- Main Contents Background (Menu Background & Table Background): This setting changes the background color of most of the UI components such as buttons, dropdown, Input box, popup window and tables such as Storyboard library and drop-down sub-tabs in the menu bar.
- Text Link color: This setting changes the color of text that is hyperlinked.
- Page Background: This function changes the pages background color such as behind the list of Storyboards in Storyboard library, Storyboard library home page, and some admin pages.
Adding more colors: You can add more colors by clicking on the add more button, and add a name for it. These additional colors support gradient colors.
Reset Button : Clicking the reset button allows you to revert back to the default main color settings.
1) Power of the Main Colours
We provide simple and flexible user controls to help you organize your site’s visual design system. Color values in the ‘Main colors’ section will impact all the following settings on the page. Once you finish selecting the settings in the ‘Main colors’ section, the colors in the other sections will update their default color value accordingly.
2) Branding color
Branding color is the primary key for the whole UI system. Changing your branding color in ‘Main colors’ will automatically establish the visual style for the navigation bar, highlight button and other UI elements.
3) Main Contents color
This setting changes the color for the main text and icons which can be used as a label on the buttons, contents in a table, and options in the menu such as the name of Storyboards in the Storyboard library and buttons such as filters, filter dimensions and refresh in the Storyboards tab.
4) Main Contents Background
This setting changes the background color of most of the UI components such as buttons, dropdown menus, input boxes, popup windows, and tables such as Storyboard library and drop-down sub-tabs in the menu bar.
5) Text Link color
This setting changes the color of texts that are hyperlinked.
6) Page Background
This function changes the page background color such as in Storyboard library, Storyboard library home page, and admin pages.
7) Add Custom colors in Main color
In most cases, a company’s branding system includes multiple colors. If you’ve set your primary brand color as the 'Branding Color' but need to add secondary or complementary colors, use the 'Add More' option to store them. These additional colors can also support gradient designs, offering greater flexibility to create richer and more dynamic branding elements.
Follow these steps to add more colors:
1. At the bottom on the Main colors settings list, name your new color
2. Click Add More button to add a predefined color swatch
3. Click on the color swatch square to customize the color (solid or gradient)
8) Use Added New colors in Following Settings
After finishing the ‘Main colors’ settings, you can find your newly added colors in the following settings. Open any dropdown menu under ‘Navigation Bar’ ‘Page Header’ ‘Standard Button’ or ‘Highlight Button’, you will see the new colors have been added as additional options.
Adding Colorful Gradients
You can add gradient colors to the interface and even adjust the transparency of selected gradient colors.
Here are some quick tips to help you create stunning rainbow-like visual effects:
1. Which Parts of the Interface Support Gradients?
Most background sections support gradients, such as:
-
Navigation Bar:
- Background color.
- Button background.
- Button borders.
-
Page Header:
- Background color.
-
Slide Down Panel:
- Panel background.
-
Buttons:
- Standard / Highlight / Navigation Bar Icon buttons’ background color.
- Filter Bar Background.
-
Page Tabs:
- Tab bar background.
- Tab background.
2. How to Set and Apply Gradients?
Note: Colors in the “Main Colors” section do not support gradients by default.
To add gradients:
- In the “Main Colors” section, click “Add More” to create a new color.
- Open the new color settings and choose “Gradient” instead of “Solid” to configure it.
Applying Gradients:
Once added, any new color (whether solid or gradient) will appear in the color options for other elements.
However, not all elements support gradients. Be sure to reference the list above when applying gradients.
3. Tips for Setting Up Gradients:
In the gradient settings panel, you'll find the following options:
|
When setting a gradient, consider the following:
- What colors will the gradient transition between? How many colors are needed? You'll use features [c], [e], and [f] to configure this.
- For advanced effects, like gradient transparency, use features [g] and [j] (they offer the same functionality, but one uses sliders, and the other allows manual input).
- If you're adjusting the direction of the gradient (e.g., left to right, top to bottom), use feature [b].
- To add more colors, simply click anywhere on feature [e] to add additional gradient stops.
Example: Creating a Rainbow Gradient Effect
1. Preparation:
|
|
|
|
White: #FFFFFF Black: #000000 Dark Gray: #444444 Nav Gradient: #EFF4FF(Stop 0) #F9E9ED(Stop 100) Angle:135 Page Header Gradient: #C8D8FF(Stop 0) #F0C6D7(Stop 100) Angle:135 Slidedown Gradient: #FFFFFF(Stop 0, Opacity 90) #F5F7FF(Stop 60, Opacity 90) #FDF5F9(Stop 100, Opacity 90) Angle:135 |
|
2. Apply to Relevant Elements:
- First, open the Navigation Bar color panel, find the correct option, and set the “Navigation Bar Background” to “Nav Gradient.” Now, the entire navigation bar will have a beautiful light gradient.
- For Navigation bar menu buttons, we’ll apply a darker gradient. You can reference the Page Header gradient, which will use a darker tone. We will set the “Nav Bar Selected Item - Background” and the “Navigation Bar Hover Indicator” to the darker gradient.
- Now, both the selected and hovered buttons will display the dark gradient. Let’s also check if the button text is still legible—if not, you can switch to the darker text color we previously set as “Dark Gray.”
- Remember to enable the "Top Deco Bar" in the Top Deco Bar section. You can also change it to Dark Gray, one of our custom color options, if you prefer a different look.
- Next, go to the Page Header section and set the Page Header Background to the predefined gradient. Check if the buttons and fonts are still appropriate with the new background. If everything looks good, leave them as is.
- For the Slide Down Panel, which also has a large background, apply the previously set light gradient.
3. Fine-Tuning:
After setting the main colors and applying gradients, let’s review other elements to make sure everything looks perfect.
- First, check the Logo. After changing the navigation bar color, does the original logo still stand out? If not, you may need to switch to a different color. In our example, we replaced the default white logo with a dark version, making it easier to see against the light background.
- Be sure to check out the new color settings for additional elements. For example, the “Navigation Bar Icon Button Colors” correspond to the circular quick buttons on the right side of the nav bar. Adjust them to match the new nav bar colors and gradients.
- We added a Top Decorative Bar at the top of the page. Check if its default colors align with your new nav bar style. If necessary, make adjustments.
- The Storyboard Filter Bar is a new setting. If needed, change its background to improve its visual effect.
- The Storyboard Page Tabs are also new. Adjust the background colors of these controls as needed.
- Finally, check the Standard and Highlight Buttons to ensure they fit the new color scheme. Verify that the text and icon colors are still visible on the new backgrounds. Adjust the font colors if necessary.
Once done, don’t forget to save your changes.
To recap, here are the main steps you need to follow:
- In the Main Colors section, add any gradient colors you plan to use.
- Apply gradient backgrounds to key elements on the page, such as the Nav Bar, Page Header, and Page Header Slide Down Panel.
- Check that the logo and buttons still fit the new gradient theme. If needed, make adjustments in their respective sections.
Once you're comfortable with using gradient colors to enhance the interface, you can quickly update the visual style by modifying the preset gradients in the Main Colors section, using the previous example as a template. Below are some reference values and their effects. Remember, whenever you update the interface colors, ensure that your logo and buttons remain compatible with the overall style and make any necessary adjustments.
Easily update the colors below to create a fresh look:
Logo
Use this section to manage your company logo:
Navigation Bar
In this section you can adjust the visual style for the navigation bar on top of the page. All color options in the dropdown menu under this section are defined in the ‘Main colors’ section.
With the added gradient functionality, you can now use gradient colors for these settings in the Navigation Bar:
1) Settings for Unselected Standard Status
Navigation Bar Background color: This setting defines the main background color for the whole navigation bar (Unselected Menu).
Navigation Bar Text/ Icon color: This setting changes the color of the text and icons on the navigation bar (Unselected Menu).
2) Settings for Selected Status
Navigation Bar Selected Item- Background: This setting changes the color background of the selected menu on the navigation bar.
Navigation Bar Selected Item- Text/ Icon color: This setting changes the color of the text and icon of the selected menu on the navigation bar.
3) Settings for Navigation Bar Menu Hover Status
Navigation Bar Hover Indicator: This setting changes the color of the deco bar on top of the menu when the user hovers over the menu.
4) Settings for Navigation Bar Proxy User Indicator
Navigation Bar Proxy as User Indicator: This setting will indicate that they are not logged into their account but are in a proxy user account.
Navigation Bar Icon Button Colors
With the added gradient functionality, you can now use gradient colors for these settings in the Navigation Bar Icon Buttons section:
Top Deco Bar
Page Header
Page Header is the cross screen header bar under the navigation bar on top of the page. In this section you can adjust the visual style for the page header, including header bar background and text / icon colors on the bar.
Settings for Page Header
Header Background Color: This setting changes the background color of the header bar.
Page Name Text Color: This setting changes the color of the Page Name text.
Page Name Background Color: This setting changes the background color for the Page Name.
Page Header Hover Shadow: This setting changes the color of the shadow when hovering over the Page Header.
With the added gradient functionality, you can now use gradient colors for these settings in the Page Header section:
Slide Down Panel
With the added gradient functionality, you can now use gradient colors for these settings in the Slide Down Panel section:
Storyboard Filter Bar
With the added gradient functionality, you can now use gradient colors for these settings in the Storyboard Filter Bar section:
Storyboard Page Tabs
With the added gradient functionality, you can now use gradient colors for these settings in the Storyboard Page Tabs section:
Standard Button
This section controls the colors for the standard button. You can redefine the visual style for different button status: Normal / Hover / Press / Focus. Commonly, if you haven’t changed the general contents of the main colors section i.e. ‘Main Contents color (Text / Icon…)’ or ‘Main Contents Background (Menu Background / Table Background…)’, it is ok to leave the standard button settings as default settings.
1) Settings for Button – Normal Status
Normal Button - Background: This setting defines the background color of standard button – normal status
Normal Button - Text: This setting defines the text and icon color of standard button – normal status
Normal Button - Border: This setting defines the border color of standard button – normal status
2) Settings for Button – Hover Status
Hover Button – Shadow: This setting defines the shadow color of standard button – hover status
Hover Button – Background: This setting defines the background color of standard button – hover status
Hover Button - Text: This setting defines the text and icon color of standard button – hover status
Hover Button - Border: This setting defines the border color of standard button – hover status
3) Settings for Button – Press Status
Press Button – Shadow: This setting defines the shadow color of standard button – press status
Press Button – Background: This setting defines the background color of standard button – press status
Press Button - Text: This setting defines the text and icon color of standard button – press status
Press Button - Border: This setting defines the border color of standard button – press status
4) Settings for Button – Focus Status
Focus Button – Border: This setting defines the border color of the standard button – focus status.
With the added gradient functionality, you can now use gradient colors for these settings in the Standard Button section:
Highlight Button
The Highlight button, also known as a ‘stand out’ button which indicates to the user that the button has an important behavior in the application. By default, the ‘Highlight Button’ will apply the ‘Branding color’ as the button background color, and ‘Main Contents color’ as the button text color. In some cases, you may have a dark branding color, which will impact your ‘Highlight Button’ background color. Please double check your ‘Highlight Button – Text’ color, make sure to choose a light text color to make the text visible.
1) Settings for Highlight Button – Normal Status
Normal Highlight Button - Background: This setting defines the background color of highlight button – normal status
Normal Highlight Button - Text: This setting defines the text and icon color of highlight button – normal status
Normal Highlight Button - Border: This setting defines the border color of highlight button – normal status
2) Settings for Highlight Button – Hover Status
Hover Highlight Button – Shadow: This setting defines the shadow color of highlight button – hover status
Hover Highlight Button – Background: This setting defines the background color of highlight button – hover status
Hover Highlight Button - Text: This setting defines the text and icon color of highlight button – hover status
Hover Highlight Button - Border: This setting defines the border color of highlight button – hover status
3) Settings for Highlight Button – Press Status
Press Highlight Button – Shadow: This setting defines the shadow color of highlight button – press status
Press Highlight Button – Background: This setting defines the background color of highlight button – press status
Press Highlight Button - Text: This setting defines the text and icon color of highlight button – press status
Press Highlight Button - Border: This setting defines the border color of highlight button – press status
4) Settings for Highlight Button – Focus Status
Focus Highlight Button – Border: This setting defines the border color of highlight button – focus status
Hidden Impacts
Changing the ‘Branding color’ option will automatically overwrite the visual style for many of the UI elements in the system. Here are some hidden impacts you will see.
In conclusion, by applying the above instructions, you should now be able to configure your branding settings within the application to match your company branding. Please reach out to us if you have any questions.
Comments
0 comments
Please sign in to leave a comment.