Given the limited timeframe, I established one guiding principle from the start: preserve what worked and rebuild only what compromised the system’s consistency or scalability.

Token Audit and Foundations

I started by auditing the existing design tokens.

Elements that already met the product’s needs, including some shadow and grid definitions, were preserved. Others needed to be reworked.

The color palette was expanded and brought closer to the brand identity, introducing a broader range of primary colors as well as a more comprehensive structure for system states.

The type scale was also redesigned to provide a wider range of sizes and weights, enabling clearer and more consistent information hierarchy across the interfaces.

These foundations were centralized in a dedicated primitive token library, establishing the core layer of the system.

Semantic Tokens

Building on those foundations, I created a second token layer focused on contextual usage across the interface.

Using Figma Variables, I structured semantic tokens for applications such as:

• headings, body text, and captions;

• backgrounds and surfaces;

• fills and outlines;

• system states and feedback.

Rather than defining the entire structure in isolation before building the components, I took an iterative approach: tokens were applied, tested, and refined as new components surfaced additional product needs.

Component Architecture

Once the foundations were established, I began rebuilding the component library following Atomic Design principles. Basic elements such as icons, images, inputs, and cells were treated as reusable building blocks that could be progressively combined into more complex components.

This architecture was particularly valuable for structures such as dialogs, containers, and tables.

For dialogs, for example, headers, content areas, and footers were structured as independent building blocks, with variants designed to accommodate different use cases.

For tables, individual cells were componentized to support different types of content, including text, icons, buttons, and inputs. These cells could then be combined into reusable rows, which in turn supported multiple table configurations.

The goal was not simply to create a library of ready-made components, but to establish a flexible architecture where new requirements could be addressed through composition, reducing the need to continuously create isolated components.