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.


States are visual representations used to communicate the status of a component or interactive element.

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


States communicate the status of the components to the users. States must have a clear affordance, distinguishing them from one other and the surrounding UI, emphasising their priority levels.

  1. Enabled / Default state
    State visible when a component is interactive.
  2. Hover state
    State visible when a user has placed a cursor above an interactive component. Cursor becomes a pointer.
  3. Focused state
    State visible when a user has highlighted an interactive component, using an input method such as a keyboard or voice.
  4. Disabled state
    State visible when a component is noninteractive. This state is applied to a component when the user cannot interact with it due to permissions, dependencies, or pre-requisites. Disabled states remove the interactivity a component.
  5. Selected state
    State visible when users make a choice.

Enabled/default state

The enabled state is the default state of a component/element that users see before any interaction. To follow the Proximus brand, the major part of our components are purple and grey colours based.

Hover state

A hover state communicates interactivity of a component or element, and should be emphasized in a UI. This state is initiated when users hover one of them.

  1. Default hover
    The default hover gives a clear affordance, distinguishing this state from the enabled one and the surrounding UI.
  2. Light hover
    The light hover is a semi-transparent layer of colour filling the background to indicate its state. Light hover state provides a way to highlight the components on hover without emphasising it too much. An overlay can be applied to an entire component. We are using this type of hover state for lists.
    This hover effect is used for list components such as drag and drop, action menu,...
Only one hover state is applied at a time.

Focused state

A focused state communicates when users highlight an element using a keyboard or voice. Focus states apply to all interactive components.

By default, browsers render the focus in several different ways. We customised it to match to Proximus brand guidelines. The focused state is visualy the same than the hover state.


To be accessible, all interactive components on a page need a focus state, not just buttons or links.
A focus state highlights interactive components, this state is crucial to help users find their way in the page when navigating with alternative method (keyboard, etc.).

Focused state combined with selected state

Focused state can be combined with selected state and remain strighly visible. When an element is on selected state, the outline is placed outside to be still visible.

  1. Focused state
  2. Selected state
  3. Selected + focused states

Disabled state

A disabled state communicates when a component or element isn’t interactive, and should be deemphasized in a UI.

Best practices
  • Disabled components can be hovered over, but won’t display state changes to the component or cursor.
  • Disabled components don’t change state when tapped.

Selected state

A selected state indicates user selection of options. This state should receive medium emphasis so they are easily identifiable, but not distracting.

Selected state with positive emphasis

For some components, the selected state is using green color to emphase a positive and success message.

last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 22/11/2023 12:40:17



For Screen Reader add:

  • aria-disabled="true" to <a>
  • disabled to <button>



Negative disabled


rs-txt-disabled with rs-neg parent


rs-bg-disabled with rs-neg parent





Negative hover




rs-txt-hover with rs-neg as parent

rs-bg-hover with rs-neg as parent

rs-bg-hover-second with rs-neg as parent



Don't forget to put aria-selected="true" to indicate the current state of interactive element. You could find more info about aria-selected on W3C website.New window



Negative selected


rs-element-selected with rs-neg parent




Negative focus


rs-bg-focus with rs-neg parent



Negative cliquable


rs-bg-clickable with rs-neg parent