A well designed UI can capture attention, encourage and inspire so we have put together a handful of design recipes to help you customize the branding of your One Model instance. Just keep in mind that the customization applies to your entire instance and not just your login.
While we don’t offer one-click theming at the moment, you can use the listed hex codes in the suggested combinations to create the looks you see below.
To begin, you will need the CanConfigureCompany permission to access and edit the branding settings for your company. Please read our Branding User Guide for detailed instructions on how to edit your company settings.
For example:
To recreate the Light Pink Gradient Variant that you see here:
You would use the listed #hex codes below
To make changes to your company branding settings as shown below:
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:
Learn more about adding gradient colors here.
Additional Color Combinations:
Try mixing up some of these exciting color combinations that our design team created for you.
|
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 |
|
You can also experiment with other branding settings by:
- Change the [Page Background] to white.
- Apply a dark style to the [Highlight Button].
- Ensure the Nav bar company logo color is consistent with other menu colors.
- Applying a gradient color to the Top Deco Bar, and match the Page Header to this gradient. Keep the default dark mode for the Nav bar.
Comments
0 comments
Please sign in to leave a comment.