SITUATION

The NADW Design System project began with the need to create a cohesive visual identity and a scalable design foundation for a growing digital platform. The existing design lacked consistency and efficiency, making it difficult to maintain coherence across different products. The goal was to build a structured and reusable system that could streamline design and development workflows while ensuring strong visual consistency.

TASKS

Define a design system including foundations, design tokens, components, and templates. Establish a consistent and flexible design language that balanced standardization and adaptability. Improve accessibility, usability, and collaboration between design and development teams. Deliver a scalable framework that could be expanded and adapted to future projects.

ACTION

Research and Concept Development

We began by defining a cohesive visual identity inspired by early 2000s UI aesthetics, featuring gradients, blurred abstract backgrounds, and geometric elements. This set a modern and distinctive design tone. Once the visual direction was defined, we focused on core design foundations to ensure consistency across all components. We structured color scales, typography, breakpoints, layout, spacing, elevations, and corner radius rules.

Design and Implementation

To improve scalability, design tokens were introduced early in the process, defining functions for background, border, content, and other key elements. This allowed developers to work efficiently while maintaining visual coherence. Throughout this phase, we referenced best practices from leading design systems (Carbon, Agora, and Material UI) to align with industry standards while addressing the specific needs of our users and developers. With the foundations in place, we transitioned to designing core components such as buttons, inputs, menu items, header tabs, and accordions, included predefined properties (Role, State, Size).

RESULT

Achieved faster design and implementation workflows, validated in production through the SIIAF project (Integrated Anti-Fraud Customs Information System). Delivered a scalable and structured design system with defined foundations, tokens, and components for all the NADW products. Improved accessibility, usability, and design–development collaboration.

REFLECTION

This project highlighted how starting with a solid foundation simplifies everything, defining tokens, scales, and component properties early makes the system more consistent and scalable, saving time later. Finally, we learned about the importance of close collaboration with developers, which minimized friction and improved efficiency, and ensures the system remains valuable and adaptable in the long term.