Design System for Browser Products

Starting in 2022, there has been a move by designers within NAVER to switch to Figma to keep up with global trends in

First Step for Design System in NAVER

Starting in 2022, there has been a move by designers within NAVER to switch to Figma to keep up with global trends in design tools. Figma offers significant advantages in terms of collaboration and resource management. The design system began to become important to all design teams at Naver.

Foundation for Browser

Among them, the design system was most important to the Whale team. This is because, unlike other products, it has 7 products on 3 platforms. All team members, including the team leader, began to recognize the importance of the design system.

Mobile iOS

Mobile Android

WhaleOS

Whale Website

Challenge

Whale runs on three device platforms: desktop, mobile, and Chromebook, and three software platforms: Android, iOS, and Windows. We had to consider all the combinations of cases. Before we implemented the design system, each product used different fonts and colors, which was a big cause of inconsistency. The biggest problem was that there was no mechanism to manage it.

Based on Atomic Design Principle

Atomic design is a design system methodology proposed by Brad Frost, inspired by the concept of atoms in chemistry. This methodology suggests a way to build interfaces from small components to progressively more complex structures. This methodology allows for the systematic construction of modular design systems, which allows for consistency and efficiency in large-scale projects.

Consistency across all platforms

To ensure consistency across products, we need a design system that can be applied across all platforms.

Optimization for each product

A design system should be implemented in every product, but it should also reflect the characteristics of each product.

1. Color System

The color system was defined based on the HCT of M3. Some parts that needed optimization were redefined through testing. For example, the tone of Primary in M3 was defined as Light 40, Dark 70, while in Whale, Light 50, Dark 60 was applied for a fresher feeling. Gray Scale was also adjusted to lower the saturation by adjusting the Chroma for general use.

Colors were managed by dividing them into Color Palette and Toner Palette. Since Whale has cases where the Primary is different for each product, the product name was added after the color usage to manage them.

As a browser, Whale often displays menus or pop-ups in additional layers while in use. This requires a well-defined conceptual hierarchy for each UI element. Visual distinction is created through changes in shadow intensity, and the rounded corners of the panels are defined accordingly to ensure consistency and clarity.

Managing color & font styles

I managed colors, fonts, and effects across multiple platforms, including Windows, Mac, iOS, and Android, within a unified design system. Additionally, I incorporated a dark theme. To handle this complexity, I leveraged Figma’s Variables feature by tokenizing all properties.

With Styles

• Multiple properties combined
• Cannot contain other styles
• Only groups

With Variables

• Store single values
• Can contain other variables
• Modes, Collections, Groups

Before defining components, we faced a dilemma: should we create a single component with extensive variants or develop separate components for each platform? We opted for a phased approach. Initially, we prioritized efficiency by using as many variants as possible. Later, if platform-specific variations became too complex, we planned to separate them into distinct components.

Variable Matrix

• Platform: Desktop, iOS, Android, Web
• Size: XLarge, Large, Medium, Small, XSmall
• Color: Primary, Secondary, Outlined,
• Status: Normal, Hovered, Pressed, Dim

We basically followed Google's M3 structure. For components that were independently required for each product, we produced them after receiving advice from the person in charge. For example, the top omni-box of the desktop browser and the bottom menu bar of the mobile were managed separately as the most frequently used elements in each app.

Who can be a Design System Manager

Based on my experience operating a large-scale design system at Samsung and building a design system at Naver, I defined what kind of designers can do a design system as follows.

Profound Understanding in UI Components

A Design System Manager must deeply understand UI components, including their visuals, interactions, and technical details. This knowledge ensures consistency and adaptability in user experiences and design outcomes.

Systematic thinking skills

Effective Design System Managers possess systematic thinking, allowing them to manage complex systems clearly. They understand component interdependencies, maintain consistency, and plan for scalability and sustainability.