Branding - Adding Colorful Gradients

In One Model, you can add gradient colors and even adjust the transparency of selected gradient colors. Gradient colors bring depth, dynamism, and a modern aesthetic to UI design. Going beyond flat colors, gradient colors create a sense of movement, which can draw users’ attention to specific elements or sections of the interface. 

You can use gradient colors to:

• Add depth and dimension so the interface feels more interactive.
• Subtly guide user interaction with gradient transitions, like dark-to-light or cool-to-warm.
• Align with your branding. 

Here are some quick tips to help you create stunning rainbow-like visual effects:

Key Things to Know:

1. Which parts of the interface support gradients.
2. Where and how to set up gradient colors and apply them to different elements.
3. Tips for setting up gradients.

We will also walk you through an example to create a rainbow effect for the interface, including:

1. Preparation.
2. Matching colors to relevant elements.
3. Fine-tuning.

Key Things to Know:

1. The Parts of the Interface that 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

Colors in the “Main Colors” section do not support gradients by default, you will need to add them.

To add gradients:

1. In the “Main Colors” section, click “Add More” to create a new color.

2. 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:

[a] Color Mode Selection (Linear or Radial) [b] Gradient Angle [c] Position of Gradient Stops (0-100 = left to right) [d] Delete Gradient Stop [e] Preview of Gradient Stops [f] Color Preview for the Selected Gradient Stop (adjustable via sliders) [g] Transparency Preview for the Selected Gradient Stop (adjustable via sliders) [h] Hex Color Value (can be entered manually) [i] R/G/B Color Values (can be entered manually) [j] Transparency Value for the Selected Gradient Stop (0-100 = fully transparent to opaque, can be entered manually, corresponds to the previous feature [g])

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.

Now that you know how to set up gradients, let's see an example.

An Example: Creating a Rainbow Gradient Effect

1. Preparation:

	Set your primary color by changing the “Branding Color.” While this option doesn’t support gradients, it will affect the default colors of some elements.
	Decide on the gradient colors that will complement your branding color and where you plan to apply them. In this example, we’ll use a range of light and dark gradients depending on their placement.
	Add new colors in the “Main Colors” section. (Tip: It’s helpful to manually add basic colors like black, white, and dark gray for quick access.) Name the new gradient colors based on where they’ll be used, something like “Nav Gradient,” “Page Header Gradient,” or “Slidedown Gradient,” so you can easily find them later. 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:

1. 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.

2. 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.

3.  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.”

4. 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.

5. 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.

6. 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.

1. 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.

2. 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.

3. 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.

4. The Storyboard Filter Bar is a new setting. If needed, change its background to improve its visual effect.

5. The Storyboard Page Tabs are also new. Adjust the background colors of these controls as needed.

6. 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 by clicking Save. 

Summary and Expansion

To recap, here are the main steps you need to follow:

1. In the Main Colors section, add any gradient colors you plan to use.
2. Apply gradient backgrounds to key elements on the page, such as the Nav Bar, Page Header, and Page Header Slide Down Panel.
3. 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:

Branding Colour: #48BFAD Nav Gradient: #B6E5DE(Stop 0)  #99A3B7(Stop 100) Angle:135 Page Header Gradient: #48BFAD(Stop 0)  #001A4B(Stop 100) Angle:135 Slidedown Gradient: #FFFFFF(Stop 0, Opacity 90)  #EDF9F7(Stop 60, Opacity 90) #E5E8ED(Stop 100, Opacity 90)  Angle:135
Branding Colour: #48BFAD Nav Gradient: #B6E5DE(Stop 0)  #99E0FF(Stop 100) Angle:135 Page Header Gradient: #48BFAD(Stop 0)  #00B1FF(Stop 100) Angle:135 Slidedown Gradient: #FFFFFF(Stop 0, Opacity 90)  #EDF9F7(Stop 60, Opacity 90) #E5F7FF(Stop 100, Opacity 90)  Angle:135
Branding Colour: #00B1FF Nav Gradient: #99E0FF(Stop 0)  #D6DEFF(Stop 100) Angle:135 Page Header Gradient: #00B1FF(Stop 0)  #99ADFF(Stop 100) Angle:135 Slidedown Gradient: #FFFFFF(Stop 0, Opacity 90)  #E5F7FF(Stop 60, Opacity 90) #F5F7FF(Stop 100, Opacity 90)  Angle:135
Branding Colour: #00B1FF Nav Gradient: #99E0FF(Stop 0)  #D1FCF1(Stop 100) Angle:135 Page Header Gradient: #00B1FF(Stop 0)  #8DF7DB(Stop 100) Angle:135 Slidedown Gradient: #FFFFFF(Stop 0, Opacity 90)  #E5F7FF(Stop 60, Opacity 90) #F4FEFB(Stop 100, Opacity 90)  Angle:135
Branding Colour: #00B1FF Nav Gradient: #99E0FF(Stop 0)  #F7D7E5(Stop 100) Angle:135 Page Header Gradient: #00B1FF(Stop 0)  #EC9BBF(Stop 100) Angle:135 Slidedown Gradient: #FFFFFF(Stop 0, Opacity 90)  #E5F7FF(Stop 60, Opacity 90) #FDF5F9(Stop 100, Opacity 90)  Angle:135
Branding Colour: #04C5D0 Nav Gradient: #9BE8EC(Stop 0)  #F7D7E5(Stop 100) Angle:135 Page Header Gradient: #04C5D0(Stop 0)  #EC9BBF(Stop 100) Angle:135 Slidedown Gradient: #FFFFFF(Stop 0, Opacity 90)  #E6F9FA(Stop 60, Opacity 90) #FDF5F9(Stop 100, Opacity 90)  Angle:135
Branding Colour: #FCA502 Nav Gradient: #FEDB9A(Stop 0)  #DE9ADB(Stop 100) Angle:135 Page Header Gradient: #FCA502(Stop 0)  #AC02A4(Stop 100) Angle:135 Slidedown Gradient: #FFFFFF(Stop 0, Opacity 90)  #FFF6E6(Stop 60, Opacity 90) #F7E6F6(Stop 100, Opacity 90)  Angle:135