The Pages of the Design System

Lay out your application in order to match the environment.



The overview is a layout displaying visual items, such as graphs and figures for more accurate information.

The overview layout is mainly used in analysis pages where the user wants to see a graphical analysis of various figures they have entered into the system. Graphs are a good way for the user to visually understand the data, as well as playing with them.




The dashboard is one of the most seen layouts. Users usually spend the first part of their workflow on a dashboard in order to review items important to them.

The dashboard is composed of a number of items. On the top of the page, the top bar and the header indicate what page the user is viewing. The core of the page is composed of various widgets that the user has selected. You can find them in Building Blocks. Five layouts are available to distribute widget cards, with 1, 2 or 3 columns.




In finance, the list layout is probably the most used. It displays items, such as numbers, in an understandable way, for the user to work with them. Items can sometimes be clickable, revealing more information. It enables users to organize and to see numerous items without having to go through a second page.




The menu displays a list of links leading to the various parts of the application. Each link is composed of 3 items: 

  • A logo on the right
  • A name
  • A description

Each link uses the same positioning, with the logo on the right and the name above the description.




A details page shows information related to one specific item. It is presented as a list of cards that contain detailed information, such as lists, graphics, etc. On the right side of the page, you can see a menu that helps you to navigate easily throughout the details page.



File Import Result 

This layout displays when a user has imported a file into the system.

The layout indicates if the importation is successful and if errors occur. The users then know if they have to change something to make their importation work the next time. 



Step by Step

This layout is used when users have to, step by step, create or edit something.

This layout helps the user understand where they are in the process of doing something, e.g. editing or creating something. Achieving each step at a time eases the process and avoids getting lost in it. The line on the top indicates how far in the process the user is, and how long they have to go till finish.




This layout enables users to navigate through different views of the calendar, with weekly, monthly or yearly view. On the side panel, it displays a more detailed view of each event within the calendar itself.



See Finance Active's Design System for more details.

Was this article helpful?
0 out of 0 found this helpful