Lisboa Design System

The City of Lisbon needed a unified design system to ensure visual and functional consistency across all its digital products and services. The key challenge was to create a system capable of serving a wide variety of platforms and use cases, while remaining flexible, modular, and scalable. Existing design practices lacked coherence, and there was no centralized documentation or standardized approach for designers and developers to follow, resulting in fragmented user experiences and inefficiencies in product delivery.

In this project, I was responsible for leading the design and creation of the Lisboa Design System from the ground up, including:

• Conducting a comprehensive audit of existing components, patterns, and brand assets to identify gaps and inconsistencies.
• Defining the guiding principles for the system — strict, modular, and distributed — ensuring broad applicability across products and platforms.
• Designing foundations (e.g., typography, color, spacing) and creating fully modifiable, atomic components using design tokens for consistency and scalability.
• Structuring detailed, easy-to-navigate documentation as a core pillar of the system, aimed at helping designers and developers understand and apply the system efficiently.
• Referencing and benchmarking best practices from other successful design systems (e.g., Spectrum, Lightning, Decathlon) to ensure quality and longevity.

The result was the Lisboa Design System: a comprehensive, modular, and scalable design system built specifically to support the digital products of the City of Lisbon. The system consolidated proposals, audits, foundations, and fully documented atomic components, ensuring consistency and ease of maintenance across projects.

The documentation was designed as a living, expandable resource, providing clarity and guidance for teams while remaining flexible enough to evolve as new needs emerged. By leveraging tokens, atomic design principles, and clear rules around structure and usage, the Lisboa Design System became an essential product of products — a single source of truth enabling faster delivery, higher quality, and more coherent digital experiences for Lisbon’s citizens and visitors.

Lisboa Design System gave the City of Lisbon a common foundation for its digital services.

• A single source of truth for the city’s digital products, replacing fragmented, undocumented practices.
• Token-based foundations and atomic components that teams can adapt without breaking consistency.
• Living documentation, designed to grow as new needs appear.
• Faster delivery and more coherent experiences for Lisbon’s citizens and visitors.