The purpose of unifying the Fotocasa and Habitaclia Design Systems into a single multi-theme system responds to three needs:

1. To optimize the multi-platform design process and streamline the subsequent UI development.
2. To facilitate collaboration between design and development teams.
3. To implement a documentation and shared resources system to facilitate the use of the Design System.

We found the solution in Panot, a multi-theme Design System in which, through extensive work with variables in Figma, we defined valid tokens for each platforms, respecting the look&feel of Fotocasa and Habitaclia.

By simply defining the context of each screen that we design, we can adapt all the tokens and components of that screen to the required website, which greatly speeds up the multi-platform design and development process.

Color palette, text styles, effects (shadows, radius...) and iconography are key elements to give any website its own personality.

In a multi-theme Design System, the correct definition of these tokens, in their light & dark mode versions, is a vital process to maintain that differentiation in the look & feel and the personality of each of the websites.