Background

SmartNews operated for 10 years without a design system. Seeing its value, I took the initiative to propose and lead its development alongside my other projects. As the sole designer on this, I worked closely with designers and engineers to identify pain points in design implementation and workflow, ensuring the system directly addresses real challenges.

The problems

After discussions with designers and engineers, I identified two main issues: implementation and collaboration.

Designers faced inconsistencies between Figma and production, unclear dark mode guidelines, and communication gaps on component behavior. Engineers struggled with text styles, customization, spacing, and color tokens.

To address this, I built a design system to streamline communication, standardize components, and ensure consistency.

Looking Closer

I analyzed designers Figma files and engineers code to understand how they handle repeatable specs and implementation. This deep dive revealed inconsistencies and highlighted opportunities to build a more structured, efficient design system.

Font sizes and colors

Without a design system, each designer applies their own preferences, leading to misalignment. Standardizing font size, family, and colors ensures consistency and brand cohesion.

Font sizes had no clear patterns, and color usage was inconsistent—text links, for example, appeared in different shades of blue. This highlighted the need for a design system to standardize guidelines and ensure uniformity.

Engineers code

I also reviewed the engineers code and found redundancies. Without clear guidelines, engineers often created different styles for the same colors, leading to inefficiency and cluttered code.

Example

This was our previous approach. While the differences might not be obvious, the lack of consistency creates long-term challenges for both designers and engineers.

"Design system quality lies in the invisible."

The Solution

In this first phase, my focus was on strengthening the foundation (typography & colors) and improving collaboration between designers and engineers. The goal was to ensure we all speak the same language.

Typography

I standardized font sizes by analyzing existing production styles, reducing unnecessary variations, and aligning fonts to a clear pattern. Each type was given a specific name, making implementation easier and eliminating the need to refer to font sizes directly.

Colors

Color usage was one of our biggest challenges—designers often picked colors randomly. I created a structured color palette based on brand colors, ensuring consistency.

• Color Primitives: Defined a base palette rooted in brand colors.

• Color Tokens: Converted primitives into functional tokens for design and development, covering both light and dark modes. This reduced the need for separate designs for each mode and streamlined engineering implementation.

Token Naming Framework

To improve communication, I introduced a standardized naming system. By avoiding technical jargon and using clear, shared terminology, both designers and engineers could instantly understand specs. For example, when a designer refers to "text-primary," engineers know exactly which style to apply.

The Implementation

To streamline design-to-development handoff, we leveraged code syntax in Figma. This allows engineers to see the exact token names in their code when they enable dev mode, ensuring seamless integration and reducing inconsistencies.

This makes our engineers code cleaner too!

Some of the love letters from the team

And the most important thing for designers is…

New Workflow

To improve collaboration between designers and engineers, I established a structured workflow. It outlines the process from proposing a new design system component to syncing with engineers for implementation, ensuring smoother communication and alignment.

Component Usage & Adoption

Within the design team, there's a noticeable increase in the use of design system components compared to our previous UI kit. This indicates that the system is becoming more useful and widely adopted.

The conclusion

I truly enjoy working on this. While the impact might lies in invisible, I can confidently say it has made a real difference in our daily workflow. This aligns with my original goal—making life easier for both designers and engineers.