About project
Journeys is a design system created for digital products in the tourism sector. Its name conveys the idea of a purposeful journey. Just as a good trip needs a map and a clear route, Journeys provides visual coherence, consistency, and usability so that each product becomes a smooth and memorable experience.
The main objective was to design and develop a design system that would ensure visual and functional consistency across multiple digital products in the tourism sector. The system had to be scalable and adaptable, allowing it to support two specific brands with distinct identities.
First steps
The first thing I did was to understand the current state of the products and how the team was working on them. To do this, I carried out a UI inventory, which consists of collecting and documenting all visual components and design patterns used in the existing interfaces.
The UI inventory is done by identifying each element (such as buttons, forms, typography, colors, and styles) and recording their characteristics, variations, and uses. This documentation provides a clear overview of the current system, helps detect inconsistencies, and establishes a solid foundation for future improvements.
Foundations
Design token taxonomy
Once the information had been gathered, I began working on the foundations of the design system. The first step was to develop a clear and structured taxonomy for the design tokens, which would serve as a common foundation for the entire system.
I based this taxonomy on the proposal by Nathan Curtis, adapting it to the specific needs of the project and to the team’s capabilities. This made it possible to create a flexible and practical structure that simplifies the management of colors, typography, spacing, and more.
Colors
In this stage, I defined the color palettes, including primary colors, base colors, and feedback colors, among others. For the primary colors, I established two main palettes corresponding to Brand 1 and Brand 2, implementing them through color modes in Figma. This configuration makes it easier to use the same components across different visual modes.
To organize the colors, I created two collections in Figma. The first one, called “Globals,” groups primary, base, feedback, and other general categories that serve a global function in the design. The second collection, called “Alias,” assigns a specific and semantic use to each primary color, defining its exact application within the interface.
Typography
I defined tokens for the different typographic attributes: typeface family, sizes, weights, line height, and letter spacing. These tokens act as independent variables that help maintain consistency across all text in the system.
Since Figma does not allow combined variables for typography, once these tokens were created, specific typographic styles were built by combining these variables. The text styles are named semantically to make them easier to use and understand, using categories such as title, body, caption, or link, each with variations in size and weight depending on its function.
This clear and structured naming system facilitates the correct application of styles and ensures visual coherence across all interfaces.
Spacing and breakpoints
I defined a base spacing grid using an 8px system. In addition, I included intermediate multiples of 4px, such as 4px and 12px, to provide greater flexibility in composition and allow for more precise adjustments when needed.
I defined three main breakpoints for the products, allowing the design to adapt to different screen sizes. These ensure an optimal and consistent experience across mobile devices, tablets, and desktop.
Icons
Based on the UI inventory, I defined the icon sizes being used and standardized them into four general sizes to maintain visual consistency across all interfaces.
Together with the team, we agreed to use the Material Icons library, as it best suited the needs of the project and offered a wide variety of icons with a consistent and modern style.
To optimize the management and use of icons, we developed a Figma library that uses slots, allowing instances and sizes to be swapped easily and efficiently.
Components
Component prioritization
When planning the system, we prioritized the development of the most frequently used components, ensuring a solid foundation before moving on to more complex elements. We started with essential components such as buttons, inputs, checkboxes, and dropdowns.
This approach made it possible to ensure consistency in interaction patterns from the early stages. In addition, by having these components defined from the beginning, the team was able to build functional screens more quickly and optimize time in both design and development.
Library organization
We defined the structure and organization of the Design System and its libraries to optimize maintenance and scalability. We established a Foundations library that centralizes all styles and variables (such as colors, typography, spacing, etc.) and acts as the single source of truth for the system.
The component libraries directly consume the styles and variables from the Foundations library, ensuring visual consistency and reducing the effort required for updates. This modular architecture allows any change made to the foundations to automatically propagate to all components and products that use them.
Component development
The documentation was developed in Supernova, which allowed all information to be centralized in a clear and accessible way for the team. Each component includes its functional description, visual specifications, usage guidelines, variants, and more.
Additionally, direct links from Figma to the corresponding documentation in Supernova were included, facilitating the handoff to development. This integration reduces errors and improves efficiency during implementation.
