Lisboa Design System
Product Design

Lisboa Design System is a design system that gathers all the necessary documentation to build any project related to the city of Lisbon. The creation of the design system involved identifying problems and conducting a thorough audit of the components and foundations required to maintain consistency. The typology for the Design System was based on three fundamental principles: strict, modular, and distributed system, making it possible for it to be applied in different environments.

Several decisions, tokens, and atomic design were used to ensure that the elements are consistent in any platform and to create 100% modifiable components. To view the Figma file in which everything mentioned is shown, click here.

The documentation is one of the pillars of the design system, which makes it an essential tool that helps designers and developers maintain consistency in components and make it easy for the users to understand and consume the system. The documentation of this design system can be found at the following link, where it will be expanded and incorporating new elements as they are created.

The design system is a product of products, and it includes proposals, audits, foundations, and components that have been structured and documented to maintain consistency and support the products. The design systems or documentation used as references included Repsol Design System, Digital System Playbook, Product Design Handbook, Flapjack, Plural Design System, Flame Santander Design System, Decathlon Design System, BNext, Spectrum Design System, Lightning Design System, among others.

The project was carried out to finish the Design Systems course at Mr Marcel School.