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.

Colors

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

last modified: 29/12/2022 09:40:04

Overview

Proximus' brand defined for each primary and secondary colors a swatch of 10 color variations. On the web, we only use a selected portion of each variation.

Color usage as font colors or background colors

This article defines the general color usage. It will also give you all the color references (style tab). Please refer to the background colors and text colors articles for more detailed usage guidelines.

Accessibility

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


Purple primary color

Purple is our brand identifier and should always be clearly visible in all our communications. Full purple is dominant and serves as the primary action color across all Proximus platforms, making use of subtle shifts in values to help organize content into distinct zones.

Purple
#5C2D91
Purple 9
#6C429C
Purple 8
#7D57A7
Purple 7
#8D6CB2
Purple 6
#9D81BD
Purple 5
#AD96C8
Purple 4
#BEABD3
Purple 3
#CEC0DE
Purple 2
#DED5E9
Purple 1
#EEEAF4

Canvas colors

White, grey and black grey are considered as canvas. It enables our colours to stand out.

White

Balanced ratios of white accentuate our purple and create a stage for products and offers.

White
#FFFFFF

Grey

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

Grey
#C1C1C3
Grey 6
#DADADB
Grey 4
#E6E6E7
Grey 2
#F3F3F3
Grey 1
#F9F9F9

Black

Black can be used for black based identities: Pickx and TV related content.

Black
#000000
Black 9
#252525
Black 8
#464646
Black 7
#636363
Black 6
#7D7D7D

Secondary colors

Secondary colors can further enrich our communications. They play a supporting role and can help where additional colors are required. They can never be used standalone, but always in combination with the primary purple (most often in a gradient).

The usage of secondary colors is defined by segment to follow brand identity. The color intensity decreases as follows along the Business Units.

Residential

Red
#EE2E5D
Magenta
#FF418C
Orange
#F39200
Blue
#00BCEE
Turquoise
#66D2CC
Green
#81C747
Red 2
#FCD5DF
Red 1
#FDEAEE
Green 4
#CDE9B5
Green 2
#E6F4DA
Green 1
#F2F9EC

Business & Enterprise

Blue
#00BCEE
Blue 4
#99E4F8
Blue 2
#CCF2FC
Blue 1
#E5F8FD
Turquoise
#66D2CC
Turquoise 4
#C2EDEB
Turquoise 2
#E0F6F5
Turquoise 1
#EFFAFA
Yellow and Almond are considered as level 2
Yellow
#FFCA00
Almond
#EAC883

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.


Promo colors

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.

Positive mode
Promo background
#DE2A56
Text color
Promo text
#DE0037
Negative mode
Promo background
#DE2A56
Text color
Promo text
#FF4371
Promo color on purple background

Promo text color on purple background is not accessible. Always prefer white color text on purple background instead of pink/promo text color.


Status colors

These colors are defined to give specific message to the users and can be used through all the segments as background or font color.

Success status

Positive mode
Success background
#008000
Text color
Success text
#008000
Negative mode
Success background
#2AD12A
Text color
Success text
#2AD12A

Warning status

Positive mode
Warning background
#F58221
Text color
Warning text
#A55D00
Negative mode
Warning background
#F5AB35
Text color
Warning text
#F5AB35

Error status

Positive mode
Error background
#B30000
Text color
Error text
#B30000
Negative mode
Error background
#F22613
Text color
Error text
#F22613
Status colors on purple background

Status text colors on purple background are not accessible, so these colors can't be used on this background color.


States

Specific colors are defined for the states.

More info about the states

Branded component

Other colors exist and are then reserved for specific themes

More info about the themes