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