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.


Images help tell a story, clarify complex messages that are difficult to express with words, and simply express a brand's visual language

last modified: 15/09/2023 15:55:10


The colour intensity decreases as follows along the Business Units.

Key principles

Always prioritize full bleed pictures.

We also need to find at least two of the following elements in each photo.

  1. Blur
    What stands out = Think Possible. This increases a feeling of “being close” (depth of field).

  2. Authenticity
    The people’s attitude is natural, even when photographed in an “extra-ordinary” context.

  3. Lighting
    Show a diverse range of people connecting to each other. The user must be able to relate to the image.

  4. Delight
    Displaying original and authentic moments gives our users confidence that we are delivering on our promises.

  5. Close ups
    Close ups are essential. They convey stories and allow the viewer to relate to them by bringing the captured emotions forward. For online purpose, select wide images first and get your close up by cropping the original image.


Residential photographic style

Add subtle touches of purple to help the viewer attribute the photo to the Proximus brand. Use this technique over the use of shapes, as these should only be used in 30% of cases.

Play with hues and simple masks, but always aim for a realistic end result. The picture should not feel tampered with.

Never have more than 30% of purple in the picture.

Business photographic style


The person is the hero of his or her own story.

Work environment

The person is photographed in his or her work environment.


Picture taken in front of a coloured wall referencing a Proximus brand colour, but without feeling flat and unnatural.

Enterprise photographic style

Storytelling metaphore

Bring together isolated elements to support a concept or narrative.

Charismatic individuals

Charismatic appearance without a hint of smugness


Sleek and modern buildings or interiors.

More detailed info

For more detailed info on photography please enjoy this extra doc:
Photography Specs Document (.pdf - 202MB)

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

It is mandatory to have an alt attribute wether the image is decorative or not.
It is important to fill it in with a meaningful description of the image only if its content is informative. Otherwise leave it empty.

Lazy load

Don't forget to use lazy load on images when they are not on the first section of the page !

Background Image cover

Following classes allow to scale the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

rs-bgi-cover-cc = cover center center

Left Center Right
Top rs-bgi-cover-lt rs-bgi-cover-ct rs-bgi-cover-rt
Center rs-bgi-cover-cc
Bottom rs-bgi-cover-lb rs-bgi-cover-cb rs-bgi-cover-rb

Breakpoint background Image cover

medium-up Left Center Right
Center rs-bgi-cover-cc-m
Bottom rs-bgi-cover-rb-m

Background Image contain

Following classes allow to scale the image as large as possible without cropping or stretching the image.

rs-bgi-contain-cc = contain center center

Left Center Right
Top rs-bgi-contain-lt rs-bgi-contain-ct rs-bgi-contain-rt
Center rs-bgi-contain-cc
Bottom rs-bgi-contain-lb rs-bgi-contain-cb rs-bgi-contain-rb

Breakpoint background Image contain

medium-up Left Center Right
Center rs-bgi-contain-cc-m
Bottom rs-bgi-contain-rb-m

Background Image auto

Following classes allow to retain the original image size by cropping it but not stretching it.

rs-bgi-cc = center center

Left Center Right
Top rs-bgi-lt rs-bgi-ct rs-bgi-rt
Center rs-bgi-cc
Bottom rs-bgi-lb rs-bgi-rb

Background Image gradient for accessibility

To improve readability of text on images, add rs-bgt1-top/bottom/left on the element who has the background image.

Background gradient top

Background gradient left

Background gradient bottom

Medium up breakpoint classes

All gradient for accessibility exist with the breakpoint medium up. Just add -m at the end of the class.

Background gradient top mobile / left desktop

Background gradient top mobile / bottom desktop

Background gradient left mobile / top desktop

Remove background Image per breakpoint

To remove background-image on small only, you must add rs-no-bgi-s to the element containing the background image.

rs-no-bgi-s = no background-image on small only

To remove background-image on medium only, you must add rs-no-bgi-m to the element containing the background image.

rs-no-bgi-m = no background-image on medium only