<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=222868361777687&amp;ev=PageView&amp;noscript=1">
Skip to content
English
Submit a ticket Customer portal
  • There are no suggestions because the search field is empty.

How to brand your white-label portal

The white-label portal is built from a set of design tokens. You replace Qvalia's primary colors and logo with your own. The neutral text and outline colors stay unchanged, so the interface remains readable and accessible.

What to deliver:

  • Primary color scale: ten shades from 900 (darkest) to 50 (lightest), as hex values. The default primary shade is 800. Match the brightness of each step to Qvalia's scale below.
  • Semantic colors (optional): success, attention, error and other, each in 800, 200 and 100. If you keep Qvalia's defaults, you do not need to send these.
  • Logo: SVG format, displayed at a maximum height of 24 px in the top bar. Supply a version that works on your primary 800 color, usually a white or light logo.

Send the values in the structure of the delivery template below, or in a spreadsheet with the same structure, together with your SVG logo. Branding is needed before Qvalia can build your portal.

Accessibility

Primary colors are used for primary and secondary buttons, links and the active state in the side menu. Check that text on every variant meets the WCAG contrast requirement of at least 4.5:1 for normal text. The combinations that matter most are:

  • white text on 800 and 900
  • 800 text on 200 and 300

Where each primary shade is used

Shade
Used for
900
Primary button, pressed state
800
Primary button default; tertiary and text-only buttons; active menu item; top bar background
700
Primary button, hover state
400
Secondary button, pressed state
300
Secondary button, default state
200
Secondary and tertiary button hover state; active menu item background

In the side menu, the primary colors are used for active states and the primitive colors for inactive states.

Colors that remain unchanged

The primitive colors are used for text, outlines, input fields and disabled states. The default text color is 900. You do not replace these.

Primitive
Hex
900
#303037
800
#4B4B57
700
#898B9D
500
#8F8F94
200
#D6D7DD
100
#EEEEF1
0
#FFFFFF

Delivery template

The Qvalia defaults show the brightness level each of your values should match.

Token
Qvalia default
Primary 900
#262D8A
Primary 800
#313896
Primary 700
#5C62BD
Primary 600
#8387C4
Primary 500
#BFC2DE
Primary 400
#D2D4E8
Primary 300
#E0E1F0
Primary 200
#EEEFFB
Primary 100
#F4F5FA
Primary 50
#F8F9FC
Success 800 (optional)
#27AE60
Success 200 (optional)
#DBF7EA
Success 100 (optional)
#F2FDF7
Attention 800 (optional)
#FF7A00
Attention 200 (optional)
#FEF2DF
Attention 100 (optional)
#FFF8ED
Error 800 (optional)
#D23151
Error 200 (optional)
#FEE3E3
Error 100 (optional)
#FFF5F5
Other 800 (optional)
#682FAE
Other 200 (optional)
#F6ECF8
Other 100 (optional)
#FBF8FC
Logo
SVG, max 24 px high

Semantic colors are used for alerts and statuses, for example the confirmation shown when an invoice is released from hold, status labels such as Accepted or Rejected, and destructive actions such as Delete.

If it still does not work

  • Check that you have sent all ten primary shades as hex values and that the logo is an SVG that is legible on your primary 800 color.
  • Have your partner alias and the file or spreadsheet you sent ready.
  • Contact your Qvalia partner manager, or reach Qvalia Support via qvalia.com/contact-support.