Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.


Maintaining consistent and engaging digital interfaces, whether applications or experiences, demands extended guidance around color usage.

last modified: 21/02/2024 18:10:04


Based on the Proximus' brand palette color, we defined functional colors defining usages like states, promo, status,... on positive and negative mode.


The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
Success criterion 1.4.3 Contrast

To ensure the color contrast and accessibility, some colors are defined or declined for web interfaces.


Each theme follow the same color system. As Proximus being the default theme, all usage documentation is writing with Proximus examples and can be apply to other themes. Please refer to the Style tab to see the other themes color palette

Primary color

Primary color is the brand identifier and should always be clearly visible in all communications. It dominates and serves all Proximus platforms.

Primary color positive
Primary color negative

Secondary colors

Secondary colors highlight and compliment the primary color. On Proximus Design system, we defined two secondary colors making use of Primary subtle shifts in values to help organize content into distinct zones.

Secondary 1 positive
rgba(92, 45, 145, 0.16)
Secondary 2 positive
Secondary 1 negative
rgba(255, 255, 255, 0.24)
Secondary 2 negative
rgba(255, 255, 255, 0.8)

Tertiary colors

A tertiary color is a third level of a color palette. The colors we defined on the Proximus design system enables the brand colors to stand out.

Tertiary 1 positive
rgba(0, 0, 0, 0.04)
Tertiary 2 positive
rgba(0, 0, 0, 0.08)
Tertiary 3 positive
rgba(0, 0, 0, 0.12)
Tertiary 4 positive
rgba(0, 0, 0, 0.56)
Tertiary 5 positive
rgba(255, 255, 255, 0.40)
Tertiary 6 positive
Tertiary 7 positive
Tertiary 8 positive
rgba(255, 255, 255, 0.8) + blur
Tertiary 1 negative
rgba(255, 255, 255, 0.08)
Tertiary 2 negative
rgba(255, 255, 255, 0.12)
Tertiary 3 negative
rgba(255, 255, 255, 0.16)
Tertiary 4 negative
rgba(255, 255, 255, 0.64)
Tertiary 5 negative
rgb(70, 70, 70, 0.2)
Tertiary 6 negative
Tertiary 7 negative
Tertiary 8 negative
rgb(70, 70, 70, 0.8) + blur

Promo colors

Used as indicator of promotions. We use Proximus' red as indicator of promotions. But to ensure the color contrast and accessibility, other colors are defined for web interfaces. For the same reasons, promo colors are different for positive and negative modes.

Promo background positive
Text color
Promo text positive
Promo background negative
Text color
Promo text negative

Notification color

Used as indicator of notifications, it can be used through all the segments, modes and themes.

Notification color

States colors

Specific colors are defined for the states based on this functional palette colors.

Success background positive
Warning background positive
Error background positive
Unlimited background positive
Text color
Success text positive
Text color
Warning text positive
Text color
Error text positive
Text color
Unlimited text positive
Success background negative
Warning background negative
Error background negative
Unlimited background negative
Text color
Success text negative
Text color
Warning text negative
Text color
Error text negative
Text color
Unlimited text negative

Canvas colors

Grey and black are considered as canvas. It enables our colours to stand out.


There is 5 grey possibilities, who can be used as background colors or in particular to compose assets elements.

Grey 6
Grey 4
Grey 2
Grey 1


There is 5 black possibilities, who can be used as background colors or in particular to compose assets elements.

Black 9
Black 8
Black 7
Black 6

Extra colors

Extra colors can further enrich our communications. They play a supporting role and can help where additional colors are required.

Dark Purple
Purple 9
Purple 8
Purple 7
Purple 6
Purple 5
Purple 4
Purple 3
Purple 2
Purple 1
Red 4
Red 2
Magenta 4
Magenta 2
Orange 4
Orange 2
Blue 4
Blue 2
Blue 1
Turquoise 8
Turquoise 4
Turquoise 2
Green 4
Green 2

For Proximus theme, the usage of extra colors is defined by segment to follow brand identity. The color intensity decreases as follows along the Business Units.

Yellow and Almond are considered as level 2

Yellow and Almond are part of our secondary colors but considered as level 2 and tend to give less desirable results. Please avoid to use them or use it with parsimony.

last modified: 15/09/2023 15:40:07