Proximus design systemPlease don't forget to read Usage part of each element.
Images
Images help tell a story, clarify complex messages that are difficult to express with words, and simply express a brand's visual language
Overview
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.
-
Blur
What stands out = Think Possible. This increases a feeling of “being close” (depth of field). -
Authenticity
The people’s attitude is natural, even when photographed in an “extra-ordinary” context. -
Lighting
Show a diverse range of people connecting to each other. The user must be able to relate to the image. -
Delight
Displaying original and authentic moments gives our users confidence that we are delivering on our promises. -
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.
Segmentation
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
Pride
The person is the hero of his or her own story.
Work environment
The person is photographed in his or her work environment.
Extra
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
Architecture
Sleek and modern buildings or interiors.
For more detailed info on photography please enjoy this extra doc:
Photography Specs Document (.pdf - 202MB)
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.
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.