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: 21/02/2024 18:10:04

Overview

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

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

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

Themes

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
#5C2D91
Primary color negative
#FFFFFF

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
#7D57A7
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
#FFFFFF
Tertiary 7 positive
#0A0A0A
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
#5C2D91
Tertiary 7 negative
#FFFFFF
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
#DE2A56
Text color
Promo text positive
#DE0037
Promo background negative
#DE2A56
Text color
Promo text negative
#FF4371

Notification color

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

Notification color
#DE2A56

States colors

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

Success background positive
#008000
Warning background positive
#AC5915
Error background positive
#B30000
Unlimited background positive
#016BC1
Text color
Success text positive
#008000
Text color
Warning text positive
#AC5915
Text color
Error text positive
#B30000
Text color
Unlimited text positive
#016BC1
Success background negative
#2AD12A
Warning background negative
#F5AB35
Error background negative
#F22613
Unlimited background negative
#0088F5
Text color
Success text negative
#2AD12A
Text color
Warning text negative
#F5AB35
Text color
Error text negative
#F22613
Text color
Unlimited text negative
#0088F5

Canvas colors

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

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

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

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

Extra colors

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

Dark Purple
#45216F
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
Red
#EE2E5D
Red 4
#F8ABBE
Red 2
#FCD5DF
Magenta
#FF418C
Magenta 4
#FFB3D1
Magenta 2
#FFD9E8
Orange
#F39200
Orange 4
#FAD399
Orange 2
#FDE9CC
Blue
#00BCEE
Blue 4
#99E4F8
Blue 2
#CCF2FC
Blue 1
#E5F8FD
Turquoise
#66D2CC
Turquoise 8
#85DBD6
Turquoise 4
#C2EDEB
Turquoise 2
#E0F6F5
Green
#81C747
Green 4
#CDE9B5
Green 2
#E6F4DA

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
#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.

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

Colors