Return to main navigation Page
Site branding allows companies to promote their brand and provide continuity to the user.
Applying precise branding
Branding your client's site is best handled when it is done precisely.
Match your company's specific branding; do not estimate.
Example: Your company wants their CPQ Cloud site to
look like their external website; their website has dark green text and
light green tabs/buttons.
Obtain the precise branding colors for your client.
- Use your company's styling information.
- If unavailable to obtain styling information:
- Use Firebug to find the styles used.
- Obtain a 1:1 screenshot of the copy site and use an eyedropper.
- Avoid using a color if the correct color cannot be located.
- Use the correct font weight and size; some fonts cannot be viewed in CPQ Cloud.
- Ensure that the company color is appropriate for the situation (for example, text).
- In the CSS- pick the closest color that "looks right".
- Type the name of the color into the CSS (for example:
- Be careful with branding and text.
color red should never be used for main text color (even if your
company uses red in their branding). Red is generally reserved for
errors and warnings.
- Black or a very dark gray is recommended for your main text.
Your company's main branding color is pink. They love the color pink
and they even use it on the text all over their main site.
is not considered CPQ Cloud best practice. Instead, use pink as a
highlight color elsewhere in the CPQ Cloud application and leave the
main text black to contrast it.
- Recreate your company's tabs and buttons precisely.
You may not want to just color in the CPQ Cloud tabs and buttons with
your company colors, if your company uses distinct tabs and buttons.
In this case, replace the default CPQ Cloud tabs and buttons with those
used by your company.
- Use repetition and contrast. If two things are different in your application, make it obvious that they are different.
Limiting fonts and font sizes
developing a site, it can be tempting to take advantage of font variety
as a means to make sections appear less plain. This can include using
more than one font family or more than one font size on a page or
section. Keep in mind the following best practices for font variation:
- Font Families: Do not use more than two font families in one site. If you use two different fonts, ensure that they are very different.
- Font Sizes: Do not exceed three
variations in font size for a single page. If you need to distinguish
text from other text, consider changing font-weight or color to avoid a
- Variety within text styling can help highlight
particular content, add visual appeal, and make the content look more
professional. Know when and how to vary your text.
Font Size Example:Commerce uses section headers, tab text, labels, values, line item label text, and line item value text, and so on.
- Use the largest font size in the section headers.
- Use middle-sized font for the tab text, labels, and values.
- Use the smallest font size for line items and their column labels (differentiate them from one another by background color).
- Differentiate the labels and values next to them by bolding the labels.
- Use a maximum of three font sizes.
- Use a different font size for each different class of text.
- Exceed three font size.
Limiting tabs to 1 row
Too many horizontal tabs can make a site look cluttered.
Example: Configurators with 10 horizontal tabs may
look fine on a high-res monitor with the browser maximized, but on a
low-res device, the tabs may wrap or get cut off. A large number of
tabs can be frustrating and cumbersome to the user.
Always keep the end-user in mind when limiting tabs.
External users & sales reps: Limit your tab use to six per row.
Sales reps or external users may not be as
technical and could be more prone to missing information. Create a
better experience and limit your tabs by asking yourself key questions,
- Should any of these tabs be combined into one?
- Are any of these tabs unnecessary?
- Can some of these tabs be hidden?
- Name and order your tabs appropriately:
Give your tabs a concise/informative title, put them in a logical
order, and ensure their content is relevant and necessitates its own
tab. This creates a good flow, which won't overwhelm the user in
instances when there are many tabs.
Images stored in the File Manager can be secured. For more information, see File Manager.