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.

Background colors

Allowed background colors according to Proximus branding guidelines including primary, secondary, opacity, promo, status, states,...

last modified: 12/01/2024 17:20:15

Default Proximus theme

Use primary colors as flat background color of full sections or panels. The colors below are the ones allowed to be used as background color of full sections in the default theme.

Positive mode
Purple 2
#DED5E9
Purple 1
#EEEAF4
White
#FFFFFF
Grey 2
#F3F3F3
Grey 1
#F9F9F9
Negative mode
Purple
#5C2D91
Dark Purple
#45216F
Purple 9
#6C429C

Secondary colors

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

The usage of secondary colors is defined by segment to follow brand identity. The color values below are the ones allowed to be used as background color of a panel.

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
Accessibility

Colors usage should be carefully considered, with legibility and accessibility as paramount concerns.
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 (Minimum)

Business & Enterprise

As the Business and Enterprise segments are more professional environments, the use of colors is limited and does not allow for secondary colors from the palette.


Default opacities

Color opacities can be used as background through all the segments. These are the primary background shades for informative frames without emphasis.

Positive mode
B1
rgba(0, 0, 0, 0.08)
B2
rgba(0, 0, 0, 0.08)
B3
rgba(0, 0, 0, 0.12)
Negative mode
W1
rgba(255, 255, 255, 0.08)
W2
rgba(255, 255, 255, 0.12)
W3
rgba(255, 255, 255, 0.16)

Opacities on background image

These background colors are intended to be used on images. It's an opacity color associated with a a glassmorphism effect, frosted-glass effect using a background blur.

Positive mode

White 80% + blur
rgba(255, 255, 255, 0.8) + blur(30px)

Negative mode

Black8 80% + blur
#464646 80% + blur(30px)

Less is more

These options should be used sparingly and carefully in order to create a hierarchy between several boxes.

Do
The effect is used to highlight one content in relation to another. Use maximum one box with opacity + blur per viewport/page.

Don't
The effect doesn't add value and doesn't allow to highlight a content.

Be careful with the blur usage
  • The use of blur has an impact on performance when displaying web pages. It's therefore important to use it only where it's really necessary.
  • CSS blur filter isn't working in Firefox, so there is only the colour opacity in this browser without the glassmorphism effect.

Clickable frames

These are the background colors used for clickable frames with emphasis. These colors are used in secondary buttons and some others clickable components.

Positive mode
P1
rgba(92, 45, 145, 0.16)
Negative mode
W4
rgba(255, 255, 255, 0.24)

Promo colors

Promo colors can be used as background color of a small zone of content to ensure the message will be read. It is not allowed to use it as background color of a section.

Positive mode
Promo background
#DE2A56
Negative mode
Promo background
#DE2A56

Status colors

Status colors can be used as background color of a small zone of content to ensure the message will be read, depending of the theme of your page. It is not allowed to use it as background color of a section.

Success status

Positive mode
Success background
#008000
Negative mode
Success background
#2AD12A

Warning status

Positive mode
Warning background
#F58221
Negative mode
Warning background
#F5AB35

Error status

Positive mode
Error background
#B30000
Negative mode
Error background
#F22613

States colors

Please refer to states article for more info.

More info

Branded component

Please refer to the Themes category for more informations about each others themes.

More info
last modified: 22/11/2023 12:40:17
Info

All branded-colors used by Proximus used some CSS classes.
Thoses always begin with rs-bg-

Themes

For Pickx theme, please refer to PickxNew window article.

Create a flat Background

  1. Select the color of your choice like rs-bg-primary .
  2. Add class to your HTML element.

Lorem ipsum ...

Create a flat background with color variations

  1. Select the color of your choice like rs-bg-red .
  2. Followed by nuance property can take a value from 1 - 9.
All is not available

The lower value is the lightest. It is possible that the nuance you are trying to create is not defined, we have only integrated in the css those currently used in our online communication. You can check in Primary & secondary colors - all occurences bellow

Lorem ipsum ...


Primary & secondary colors - all occurences

Purple colors

rs-bg-purple1

rs-bg-purple2

rs-bg-purple3

rs-bg-purple5

rs-bg-purple7

rs-bg-purple8

rs-bg-purple9

rs-bg-purple

Blue colors

rs-bg-blue1

rs-bg-blue2

rs-bg-blue4

rs-bg-blue

Turquoise colors

rs-bg-turquoise2

rs-bg-turquoise4

rs-bg-turquoise8

rs-bg-turquoise

Green colors

rs-bg-green2

rs-bg-green4

rs-bg-green

Yellow colors

rs-bg-yellow2

rs-bg-yellow4

rs-bg-yellow

Orange colors

rs-bg-orange2

rs-bg-orange4

rs-bg-orange

Red colors

rs-bg-red2

rs-bg-red4

rs-bg-red

Magenta colors

rs-bg-magenta2

rs-bg-magenta4

rs-bg-magenta

Grey colors

rs-bg-grey1

rs-bg-grey2

rs-bg-grey4

rs-bg-grey5

rs-bg-grey8

rs-bg-grey9

rs-bg-grey

Almond colors

rs-bg-almond2

rs-bg-almond

Black colors

rs-bg-black7

rs-bg-black8

rs-bg-black9

rs-bg-black

Specific colors

rs-bg-c2

rs-bg-dark-purple


Promo colors

rs-bg-promo


Status colors

rs-bg-error


State colors

Please refer to StatesNew window article.


Opacities

rs-bg-tr-b1

rs-bg-tr-b2

rs-bg-tr-b3

Negative opacities

rs-bg-tr-w1

rs-bg-tr-w2

rs-bg-tr-w3


Opacities on background image

On an image, specific backgrounds with opacities should be use to assure the lisibility of the content. Two classes are now available rs-bg-ac and rs-bg-ac-neg , "ac" standing for accessibility. This transparent background is strong enough to be accessible even if the blur effect isn't working correctly.

rs-bg-ac

Negative opacities on background image

rs-bg-ac-neg

rs-bg-ac with rs-neg parent


To remove a background color

Thoses classes can allow you to remove backgrounds and also using conditions with breakpoints. That allows you to adapt components depending on the screen size

rs-no-bg

rs-no-bg-s

rs-no-bg-m

rs-no-bg-l


Extended background

You can find the details on background outgrid page.