Back To See All Works

Digikala Design Language System

Developing a Comprehensive Design System to Harmonize the Visual Identity of All Digikala Products

About Project

As the design industry continues to expand and evolve, new challenges have emerged that demand innovative solutions. Maintaining consistency in product design, making changes to multiple design files simultaneously, and establishing a common language between the design and product development teams are among the problems that have become increasingly prevalent. In response, design systems have emerged as a powerful solution to address these challenges. At Digikala, we have also faced similar problems within our organization, which prompted us to develop a comprehensive design system to mitigate these challenges. This project chronicles the journey of creating and implementing our design system, which has enabled us to streamline our design processes and improve collaboration across teams.


2019 to 2021

My Role

Design Manager, Product Designer


With a team of 21 designers, it was becoming increasingly difficult to maintain a cohesive and consistent user experience and visual design across all platforms for the 6+ products offered by Digikala. The speed of task delivery in the design team was not up to par with the demands of a fast-paced company like Digikala. These challenges posed a significant obstacle to the design team's productivity and efficiency. Thus, it was clear that a solution needed to be implemented to streamline the design process and ensure a unified design language across all Digikala products.

Process & Solution

To achieve the goal of developing a design system based on product screens that considers functionality, user experience, and visual design, we recognized the need for a structured approach. We began the creation process by following a series of essential steps that ensured we stayed on track towards our objective:

1. Analysing Product Screens:

Our first step was to thoroughly analyse the product screens and identify the core components, visual elements, and interaction patterns used across all screens. We extracted all used components, patterns, and interactions from the designed screens.

2. Defining a Hierarchy:

We then created a hierarchy and defined the relationships between the components by benchmarking famous design systems and borrowing useful ideas. We based our structure on the Atomic design theory and established three layers:

  1. Core
  2. Theming
  3. Complex Components
Digikala DLS Structure

1st Layer: Core

The Core layer of our design system is made up of the fundamental components, text styles, and layer styles. To ensure scalability for various products, we added multiple visual variations of each component, providing flexibility for the design team to choose the appropriate style for a specific product. Consistency is critical for all Digikala products, and the Core layer plays a vital role in maintaining a unified design language across them.

Some parts of DK Core Library
Sample of different visual variations of core components

2nd Layer: Theming

The Theming layer is in charge of handling the color themes of various products and implementing them in the Core library. This alters the visual appearance of the Core layer components to correspond with the product's visual identity.

Applying theming libraries to core components

3rd Layer: Complex Components

The third layer of the Digikala design system consists of intricate components tailored to each product line or area within a product. These complex components are formed by combining various core components and color themes. To cater to different platform and size requirements, each complex component was designed in multiple sizes and views. This layer facilitates the creation of distinct and personalised experiences for each product while ensuring consistency and coherence across the entire Digikala product line.

Making product components based on core library after applying color theme

3. Establishing Guidelines:

We set up guidelines for using the design system that included best practices, naming conventions, and documentation to ensure that all team members understood how to use the system and contribute to its ongoing development and improvement. To support other team members and develop new components and documentation, we formed a small team of two designers. The team will work on refining the design system over time. A request form and a Slack design channel were also set up to collect new component requests and reports of component bugs.

See it in Action

Here are some recent examples of different products designed using the Digikala design language system. homepage
Digikalajet Merchant Page

Design systems are essential to maintain consistency and cohesiveness in a product line's visual identity. However, they are not static; they are living things that need to evolve and adapt to the changing needs of the products they serve. To keep the design system up-to-date and relevant, it requires regular review and maintenance.

At Digikala, we recognise the importance of maintaining our design system, and for that, we created a dedicated design-ops team. This team is responsible for reviewing and updating the design system regularly, ensuring that it remains effective and aligned with the current product design needs. They also address any issues or bugs identified by the team members and fix them promptly.

The design-ops team works in collaboration with the designers and other team members to gather feedback and suggestions for improving the design system. They also analyze the usage data and keep track of the system's performance to identify areas for improvement. This ensures that the design system remains flexible and scalable, allowing us to adapt to new design trends and technologies as they emerge.

In addition to reviewing and maintaining the design system, the design-ops team also provides support and training to the team members on how to use the system effectively. They create documentation, conduct workshops, and provide one-on-one training to help team members understand the system's capabilities and how to leverage them.

Other projects