Proximus design systemDev
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.

Dashboard

Graphical user interface which provides at-a-glance views of user data and key entry points to the digital services.

last modified: 01/01/1601 01:00:00

Overview

  1. With ID Panel

  2. Without ID Panel
    In cases in which the ID Panel isn't being used, it is mandatory to use a white 'page' container to ensure that the transition between the background gradient and the white background is being overlapped.

UX tip

Organize the elements in sections and subsections as shown in the examples to improve clarity.

Anatomy

The structure of a dashbaord is divided into three parts. The page navigation, the optional ID Panel, and the page content which is composed of sections and subsections.

  1. Page title

  2. Page navigation
    This is a navigation menu used to access multiple tabs from the page. This is different from the global navigation from the header. It is used for pages within the current page.

  3. ID Panel (optional)
    The content inside the ID Panel is variable and dependent on the context of the page. It should display glanceable information about the user's profile, subscription, account, etc.

  4. Page container (if no ID panel)
    When the ID Panel is hidden, we instead use a page container. In this case, the page content is inside the container.

  5. Page content
    The Page content is the main part of the design. This is where the user will find what they are looking for. It is composed of sections and subsections.

Detailed view

ID Panel content

There are multiple recommended layouts available for the ID Panel.

  1. Icon
    The icon is used to illustrate the type of product

    Mobile

    Internet

    Fixed line

    Television

    Packs

  2. Profile number (if no profile picture)

  3. Content
    The content is displayed in columns, from 3 to 5.

  4. Profile picture (if no profile number)

Page content

The Page content is the main part of the design. This is where the user will find what they are looking for. It is composed of Sections and sub-sections.

A second level of navigation, using the minimal tabs, is possible inside of the page content. Please refer to the minimal tabs article to have more info about this component.

Title

A page content title is recommended

Sections & sub-sections

The page content can be divided into sections and optionally, sub-sections:

  1. Section

  2. Sub-section (optional)
    A sub-section is always included in a section

The designer can decide what the content of these (sub)sections are depending on the page. The content will often be composed of design elements from the design system. Varying from data tables, panel, entrypoints, list of links, and more components.

UX tip
  • Titles are mandatory for both sections and sub-sections.
  • When adding descriptions to subsections, stay consistent and add one to every other sub-section.

Table sections

Generally, a table is the first and main element of a page (after the ID Panel if it is displayed). It should also be preceded by an actions panel and options to filter and search.

Templates

Templates XD files

Please contact us to have access to the XD file of those templates.

last modified: 01/01/1601 01:00:00
Info box

Please refer to the font sizes and colors default values.

Sizes

Page navigation

Attribute Mobile Tablet Desktop
1. Page title Font-size
Weight		 Size 10
Light
2. Navigation menu container Height 6.4rem
3. Page title margin Top 2.5rem 3.5rem
5. Page title padding Bottom 1.5rem 2.5rem
5. Navigation menu padding Bottom 3.5rem 6rem

Navigation menu

Attribute Mobile Tablet Desktop
1. Active label Font-size
Weight		 Size 5
Bold
2. Inactive label Font-size
Weight		 Size 5
Regular
3. Underliner Width
Height		 100%
0.3rem
4. Container padding Top
Bottom		 1.4rem
1.4rem		 1.9rem
1.9rem
5. Container margin Right 2.5rem 4rem 5rem

ID Panel

Attribute Mobile Tablet Desktop
1. Icon Font-size
Margin-right		 2.2rem
1rem		 3.2rem
1rem
2. ID Panel title Font-size
Weight		 Size 7
Light
3. Page container Padding 2rem 4rem
4. Rounded corner Top, right, bottom, left 0.5rem
5. Padding Bottom 2.5rem

The amount of columns can vary between 3, 4 or 6 depending on the content of the ID Panel.

Page content

Attribute Mobile Tablet Desktop
1. Content title Font-size
Weight
Padding-bottom		 Size 9
Light
1.5rem		 Size 9
Light
2.5rem
2. Section title Font-size
Weight
Padding-bottom		 Size 7
Bold
1.5rem		 Size 7
Bold
2.5rem
3. Subsection title Font-size
Weight
Padding-bottom		 Size 5
Bold
1rem		 Size 5
Bold
1.5rem
4. Description Font-size
Padding-bottom		 Size 4
2rem
5. (Sub-)section content padding Bottom 2rem
6. Additional padding Bottom 2.5rem

Page container

Attribute Mobile Tablet Desktop
1. Page container Padding 2rem 4rem
2. Content title Font-size
Weight
Padding-bottom		 Size 9
Light
1.5rem		 Size 9
Light
2.5rem
3. Content description Font-size
Padding-bottom		 Size 4
2rem
4. Additional padding Bottom 1.5rem 2rem

Gradient banner

Attribute Mobile Tablet Desktop
1. Gradient banner Height 25rem 35rem

Colors

Navigation menu

Attribute Value
1. Active Label text color
Underliner color		 White
White
2. Hover Label text color
Underliner color		 White
White 20% opacity
3. Inactive Label text color
Underliner color		 White
White 20% opacity

Gradient banner

Attribute Mobile Tablet Desktop
1. Gradient colors Color-stop1
Color-stop2
Color-stop3		 Purple
Purple
Turquoise
2. Gradient angle Angle 135deg
last modified: 01/01/1601 01:00:00
Font family is set per Business units

Add rs-ebu class on the body to have the right EBU font family.

ID panel

0479 33 39 59
Alias name and references
Ben CHANG
Reference 1
Reference 1
Subscription
Enterprise Mobile XL
10GB - Unlimited SMS national and EU Unlimited minutes national and EU roaming calls
Account number
7044 979
Split invoice profile and name
A-D1
Benjamin CHANG