Building a Design System
Hwahae helps users find suitable cosmetics by analyzing ingredients and effects, and comparing products through reviews.

Overview

34+
components

900+variants

80%reusability

50%
reduce QA Time

Hwahae has been operating for 10 years, during which various services have come and gone, leaving behind a lot of legacy in both design and development code. Starting from 2023, as the company expanded internationally, there was a need to scale both design and code. To address this, we decided to implement a design system to clean up the existing legacy and reduce future design and code debt.

contents

01 Problem Statement
02 System Architecture
a. HDS Principle
b. Brand Essense
c. Product Visual Design

03 HDS Structure
04 Component Architecture Design
a. Foundation
b. Components
c. Templatte
05 Result & Effect

01 Problem Statement

Due to a lack of design consistency, the CTA buttons in a narrow view had borders with different thicknesses, solid buttons with varying heights, and slightly different colors. This inconsistency led to a confusing user experience, as buttons with the same function appeared inconsistent. Additionally, in a broader view, the lack of component reusability resulted in repeated communication and revisions between developers and designers, significantly increasing communication costs.

02 System Architecture

To ensure that all team members share the same goal, we established a hierarchical structure that systematically defines how the product should be viewed from the perspectives of business, branding, and product design, and how core values should be reflected. This approach helped each team member clearly understand their role and guided them to develop the product in a consistent direction aligned with the goals. Ultimately, this process contributes to ensuring a consistent user experience.

a. HDS Principle

This outlines the rationale and process behind how the design system was structured, as well as how it should continue to evolve. At its core, the design system is built upon the brand’s core values, design philosophy, and principles, with the design language serving as the foundation.
This structure enables makers to work toward a shared goal and helps deliver a consistent experience to users.

Brand Design Essence
The overall feeling and impression experienced through using Hwahae’s products.

Design Philosophy
A design philosophy that includes a business perspective.

Product Design Values
Core product design values aligned with the design philosophy.

Product Design Principles
Principles to follow when designing the product’s UX/UI, and when writing UX copy.

Design Language

Design system.

b. Brand Essense

The core values pursued by the Product Design and Brand teams were aligned by revisiting key keywords that had been consistently used in the past and redefining them to reflect the desired future direction.
This process helped establish a shared vision between the teams and served as a foundation for consistent decision-making across design and communication.

c. Product Visual Design

Based on the previously defined process, final design tone and manner, along with key design principles, are extracted for use across the product.
These keywords serve as core guidelines for building the design system. For example, when designing icons, keywords such as “clean,” “lively,” and “comfortable” help determine the use of curves, the depth of shadows, and how much information should be visually exposed to the user.
In this way, the keywords provide a consistent decision-making framework across all aspects of product design.

03 HDS structure

The design system starts by creating an atomic unit of the Foundation, followed by defining smaller units as Components. These components are then combined to create Templates. Both Components and Templates are defined as "components" in the system.

04 Component Architecture Design

a. Foundation

Basic color palette

The color palette was developed in collaboration with the BX team and designed to be used not only in the app UI but also by the content team, ensuring a unified approach across teams.
The design system is based on the user experience of encountering Hwahae, and each color's primary shade is set at level 600.
To ensure readability and accessibility, the primary colors were tested for contrast against white text in accordance with WCAG accessibility standards.
Guidelines were provided in Figma to enable makers to work with ease and consistency.

Token Color Palette

A color token system is built by selecting colors from a basic color palette and assigning them based on their intended use. This helps resolve issues caused by using multiple colors for the same function and improves clarity and efficiency in communication between designers and developers.
A usage guide is also provided to help designers apply colors consistently according to function. For example, it defines appropriate colors for various UI states such as text hierarchy, disabled states, and error messages, and clearly guides which background colors to use in different contexts.

iconThe icon naming guide is structured by category, icon name, shape (e.g., border or filled), and state. This format allows us to consistently cover all icon variations.
All icons are created as a single vector shape to remove unnecessary icon layers. By minimizing excess elements, we ensured a clean structure with attention to detail.

image size

shadow

radius

typography

We standardized typography style names so that designers and developers use the same terminology, and provided clear usage examples for both sides. The examples include guidelines to ensure text alignment is not arbitrarily changed in both single-line and multi-line use cases.

Given the large scale of the service, we defined a wide range of text sizes and included appropriate usage examples for each. Since typography styles are defined for various use cases, the system is designed to allow tracking of usage frequency, making it possible to consolidate or replace rarely used styles in the future.

b. Component

Snackbar

Components are built based on the atomic-level Foundations defined earlier.
For example, a Snackbar is composed of elements such as spacing, text, radius, and button—each designed using Foundation tokens.

To maintain consistency between iOS and Android, we provide platform-specific usage guidelines, along with interaction guides to ensure a unified experience across all devices.

In cases where multiple temporary layers (like Snackbars or Toasts) appear on the same screen, we also provide guidance on which layer should take priority and appear on top.

UX writing is defined in line with the previously established product design principles, and we provide direct links to the guidelines within Figma to ensure easy access during actual design work.

a. Templatte

Product List

The Product List is built as a modular component and is designed to be easily modified or extended using variants. It is used across various pages, and each team can adapt it according to their specific goals. For example, it can be configured to highlight pricing, focus on ingredient information, or indicate whether the product is available for purchase within the Hwahae platform.

05 Result & Effect

All new project elements built using the design system

80%+ of existing pages converted within 3 months

Product list page design time reduced: 18 → 8 minutes

50%+ reduction in overall design time

80% of Figma components reused across the service

Live QA time reduced by 50%