top of page

Latina Design System in action

Build a comprehensive design system from the ground up to unify, scale, and enhance product quality, connecting design, development, and experience in a single language that drives Nowports' growth.

latina-01.jpg

Summary version

We built Latina Design System to leave behind a fragmented technical ecosystem and create a solid foundation for growth. With a new UI Kit, living documentation, and technical library, we now design and develop faster, better, and with purpose. Latina is our tailwind.

* Some figures and data have been adapted for illustrative purposes to protect strategic and confidential information.

A new starting point

At Nowports, we understood that to scale products consistently, efficiently, and with quality, it wasn't enough to patch existing products; we needed to create something new, robust, and built for the future. Thus, Latina Design System was born, a strategic project that not only organized but also transformed the way we design and build technology.

The initial problem: when patching is no longer enough

Before Latina, we were faced with a complex reality:

​

  • Deprecated, unmaintainable code.

  • Generalized hardcoding without componentization.

  • Visual and functional inconsistencies.

  • Difficulties in scaling products in an agile manner.

  • Lack of design thought for real responsiveness.

  • Virtually no consideration of accessibility principles.

  • Inefficient development and remediation time.

 

It was clear: continuing to build on an unstable foundation would only hinder our growth. We needed to create a new structure that aligned design and development under shared principles.

latina-02.jpg

Leading the construction of a new ecosystem

As the leader of the Design Ops, Product Designers, and User Researchers teams at Nowports, I led the creation of the Latina Design System from start to finish.


The main execution was carried out by the Design Ops team, which took the operational lead in building the system from the ground up: from defining principles to implementing processes and component architecture.


We relied on the strategic input of Product Designers and User Researchers , who collaborated in validating the real needs of users and businesses, ensuring that Latina was not just a technical framework, but an experience engine.


The entire process was carried out in close collaboration with Development , achieving alignment of visual, functional and technical criteria from the ground up.
As project leader, my focus was on maintaining a holistic vision: driving a system that not only solved current problems, but also enabled us to scale, iterate, and evolve consistently over the long term.

Why Latina?

The name Latina was no coincidence. It represents two fundamental dimensions:

  1. Our identity : as a company born in Latin America, proud of its culture, diversity and drive.

  2. Our spirit of progress : The lateen sail in sailing is a triangular design that harnesses the wind to sail flexibly and precisely. That's what we wanted our system to be: a structure that propels forward movement, adapting without losing direction.

latina-03.jpg

Structure of Latina

Latina is not a document, it is a living ecosystem, composed of three main pillars:

​

  • Latina UI Kit : A library of visual components in Figma, built with principles of accessibility, scalability, and consistency. It includes design tokens, variables, and modular frameworks.

  • Latina Design System : Complete documentation on best practices, usage patterns, design principles, and interaction guides. A framework that educates and aligns teams.

  • Latina Dev : The technical implementation in development: a scalable library of code components, based on MUI and tailored to our business needs.

 

Each piece is designed to interact: design and technology as part of the same language.

What does Latina contain?

Latina isn't just a set of buttons and colors. It's built on solid design principles: clarity, consistency, scalability, and accessibility .


Its foundation is design tokens —colors, fonts, spacing, borders, shadows—that allow for a consistent unified experience across all products.


In Figma, we structure the entire system through smart variables : each color, measurement, spacing, or visual property is defined as a variable. This allows a single attribute to be modified and the change to be automatically propagated across all components and screens, ensuring flexibility, consistency, and efficiency in long-term maintenance.


The components follow an atomic design architecture (atoms, molecules, organisms) to facilitate scalability and continuous evolution. Furthermore, Latina is a living system : it has clear contribution and update processes, driven by real feedback and product evolution.

latina-04.jpg

The process: building on solid foundations

  • Complete audit : We analyze all components, flows, and patterns used in the platform.

  • Definition workshops : co-creation with Product, Design and Tech to identify real needs.

  • Token and variable normalization : From the start, we built a robust foundation in Figma and development, enabling scalable and agile changes.

  • External benchmarking : We analyze leading systems such as Material, Atlassian, and IBM Carbon to adapt best practices to our context.

  • Clear change processes : We established a component request, evaluation, and update system that is accessible to all teams.

 

Creating Latina was intense, but necessary work: we didn't just want to standardize; we wanted to build a platform for real growth.

Visible (and measurable) results

Since the implementation of Latina, the results have been overwhelming:

  • +42% speed in delivering new features.

  • -38% of visual bugs detected post-release.

  • +55% consistency in multi-channel experiences.

  • +60% internal team satisfaction in handoff and collaboration surveys.

  • Reduction in time-to-market for product launches by 30%.

  • +100% adoption of responsive and accessibility best practices from the early design phases.

 

Additionally, it reduced front-end technical maintenance effort by 25%, freeing up team capacity to focus on strategic and value-added improvements.

latina-05.jpg

A new standard for the future

Latina is not a closed project. It's a living system that evolves with the business, users, and technology. Every month we iterate, document, and improve it based on real feedback from those who use and build on it.


Today, Latina drives our ability to deliver faster, more consistent, and more relevant products to our customers.


Like the lateen sail that inspired its name, it gives us the flexibility to adapt, but always moving toward the same horizon.


Latina is, in essence, design and technology working as a single force to take Nowports (and our clients) further and further.

bottom of page