Proximus design systemPlease don't forget to read Usage part of each element.
Headings
Headings are from a range of 1 through 6. Headings are the largest text on the screen, reserved for short, important text or numerals.
Overview
Headings help users and search engines to read and understand text. Headings also define which parts of your content are important, and show how they're interconnected
If you have an empty heading, a screen reader will alert the user that a heading is present, but it will not read out any text because there is none available to read. This may confuse users and could keep them from accessing the information on the page. If a user is navigating the contents of the page and they encounter an empty heading, they may move forward to the next heading in the list and could potentially miss entire sections of content.
Headings by Business Unit
The weights of the headings are used to identify a Business Unit's visual language. This is one of the ways to create different visual languages between Residential, Business, and Enterprise.
Residential headings
AaProximus ExtraBold
abcdefghijklmnopqrstuw
ABCDEFGHIJKLMNOPQR
0123456789!"·$%&/()=
Business headings
AaProximus Regular
abcdefghijklmnopqrstuw
ABCDEFGHIJKLMNOPQR
0123456789!"·$%&/()=
Enterprise headings
AaProximus Light
abcdefghijklmnopqrstuw
ABCDEFGHIJKLMNOPQR
0123456789!"·$%&/()=
Headings differentiation
Headings are from a range of 1 through 6 and this differentiation is applied on headlings from H1 to H3.
Residential headings
H1
H2
Business headings
H1
H2
Enterprise headings
H1
H2
Others headings, from 4 to 6, are all in the same font weight.
Residential, Business & Enterprise headings
H3
H4
H5
H6
Headings and subtitles
Subtitles are complementary to headings. They are typically reserved to give more context to a heading, they are only available underneath headings H1 and H2.
A differenciation on the subtitle font family is also foreseen to have a good balance with the heading.
Residential headings
H1
Subtitle
Business headings
H1
Subtitle
Enterprise headings
H1
Subtitle
Colors
The color are the same for all the headings and subtitles depending of the mode:
Positive mode
On a light theme, headings are purple
H1
H2
H3
H4
H5
H6
When there are too much purple headings on the same area and only for headings from H4 to H6, it's allowed to display them in black on a light theme.
H1
H2
H3
H4
H5
H6
Negative mode
On a dark theme, headings are white
H1
H2
H3
H4
H5
H6
Examples with headings and subtitles by Business Unit
Residential headings
H1
Subtitle
H1
Subtitle
Business headings
H1
Subtitle
H1
Subtitle
Enterprise headings
H1
Subtitle
H1
Subtitle
Best practices
Heading 1
Subtitle
Lorem ipsum color sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Do
Heading 1
Subtitle
Lorem ipsum color sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dont
Heading 1
Subtitle
Lorem ipsum color sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Do
Heading 1
Subtitle
Lorem ipsum color sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dont
Alignment
As for the body text, headings are also left-aligned on all breakpoints.
Heading 1
Subtitle
Lorem ipsum color sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Please refer to the font sizes and colors default values.
Font sizes and font weight
Our scale has been built to provide hierarchy and consistency for all cases throughout Proximus digital experience. Both mobile and desktop have their own factor in order to correspond to their specific needs.
Headings line-height ratio: 1.3
From H1 to H2: headings are differents by Business Unit
Residential headings (RES)
| Font attribute | Mobile | Tablet | Desktop | |
|---|---|---|---|---|
| H1 | Weight Size |
Extra Bold Size 10 |
||
| H2 | Weight Size |
Extra Bold Size 9 |
||
| Subtitle | Weight Size |
Light Size 7 |
||
Business headings (SE)
| Font attribute | Mobile | Tablet | Desktop | |
|---|---|---|---|---|
| H1 | Weight Size |
Regular Size 10 |
||
| H2 | Weight Size |
Regular Size 9 |
||
| Subtitle | Weight Size |
Regular Size 6 |
||
Enterprise headings (EBU)
| Font attribute | Mobile | Tablet | Desktop | |
|---|---|---|---|---|
| H1 | Weight Size |
Light Size 10 |
||
| H2 | Weight Size |
Light Size 9 |
||
| Subtitle | Weight Size |
Bold Size 6 |
||
From H3 to H6: headings are the same by Business Unit
Residential (RES), business (SE) and enterprise (EBU) headings
| Font attribute | Mobile | Tablet | Desktop | |
|---|---|---|---|---|
| H3 | Weight Size |
Bold Size 8 |
||
| H4 | Weight Size |
Bold Size 7 |
||
| H5 | Weight Size |
Bold Size 6 |
||
| H6 | Weight Size |
Bold Size 5 |
||
Bottom spacing
Assuming that 1rem = 10px
| Mobile | Tablet | Desktop | |
|---|---|---|---|
| H1, H2, H3, H4 with a subtitle* |
1.5rem 1rem |
2rem 1.5rem |
2.5rem 1.5rem |
Subtitle | 1.5rem | 2rem | 2.5rem |
| H5, H6 | 1rem | ||
*A heading can be following directly by a subtitle, then the bottom spacing of the heading is reduced.
Colors
Positive mode
| Colors | |
|---|---|
| Headings H1 to H3 | Purple |
| Headings H4 to H6 | Purple or Body text color |
| Subtitle | Purple |
Negative mode
| Colors | |
|---|---|
| Headings H1 to H6 | White |
| Subtitle | White |
Heading by Business Unit
The weights of the headings are used to identify a Business Unit's visual language.
This is one of the ways to create different visual languages between Residential, Business, and Enterprise.
It is forbidden to change the font family as they are set per Business units with body classes: rs-se
, rs-ebu
.
Don't forget to respect title's semantic. <h*> tag are not used for their size but to organize content of a page. See more details . If you need a specific size, use classes.
Residential : RES
H1 - Lorem ipsum dolor
H2 - Lorem ipsum dolor
Subtitle - Lorem ipsum dolor
H3 - Lorem ipsum dolor
H4 - Lorem ipsum dolor
H5 - Lorem ipsum dolor
H6 - Lorem ipsum dolor
SE
To switch the style corresponding to the SE business unit, put the class rs-se
to the parent.
The ideal case is to impacting the whole page with the addition on the body to impact the whole page.
H1 - Lorem ipsum dolor
H2 - Lorem ipsum dolor
Subtitle - Lorem ipsum dolor
H3 - Lorem ipsum dolor
H4 - Lorem ipsum dolor
H5 - Lorem ipsum dolor
H6 - Lorem ipsum dolor
EBU
To switch the style corresponding to the EBU business unit, put the class rs-ebu
to the parent.
H1 - Lorem ipsum dolor
H2 - Lorem ipsum dolor
Subtitle - Lorem ipsum dolor
H3 - Lorem ipsum dolor
H4 - Lorem ipsum dolor
H5 - Lorem ipsum dolor
H6 - Lorem ipsum dolor
Negative headings
It is possible to change the color of the text to white by using the rs-txt-c2
class.
h1 or rs-tit1
h2 or rs-tit2
h3 or rs-tit3
h4 or rs-tit4
h5 or rs-tit5
h6 or rs-tit6
Change visually heading size
Title classes are designed with the following name: rs-tit*
. * is a number from 1 to 6.
H2 like H6 with rs-tit6
H3 like H2 with rs-tit2
H6 like H1 with rs-tit3
Heading with subtitle
The spacing between titles and subtitles has been studied graphically and therefore a class must be used to notify them as title and subtitle. Simply add to the title the class rs-has-subtit
and to the subtitle the class rs-subtit
.
Title class="rs-has-subtit" directly followed by another title
class="rs-subtit" = Secondary title preceeded by another title