urd

Unify React Desktop

Unify React Desktop is a global component library developed by Tokopedia's Design System team called UNIFY. This library can be used on any React based desktop site project via NPM.

Unify Design System

As Tokopedia continues to grow, both as a product and a company, one challenge we are faced with is learning how to refine the Tokopedia brand identity and apply it cohesively to each of our products.

We created this styleguide to act as a central location where we house a live inventory of UI components, brand guidelines, brand assets, code snippets, developer guidelines and more. Anyone working on the Tokopedia product is encouraged to stay familiar with this styleguide and help ensure that it is kept up-to-date.

Consistent

Consistency is one of the molecules of the Design DNA. It is highly useful and makes the world a better place. Usability and learnability improve when similar elements have consistent look and function in similar way. When consistency is present in your design, people can transfer knowledge to new contexts and learn new things quickly without pain. This way they can focus on executing the task and not learning how the product UI works every time they switch the context.

Simple

Less, but Better. Simple design isn’t just about subtracting things from a design. It has to improve the design’s overall effectiveness. The aim is to strip away the “non-essentials” of a design, to return it to a pure, simple state. Your design needs to communicate the intent of your content clearly. If your viewer has the wrong idea of what your content is trying to tell them, your design isn’t clear enough.

Intuitive

Design does not become intuitive by magic. When we experience a design as intuitive, it is because we have encountered something like it before. Intuitive is when users understand behaviour and effect without use of reason, experimentation, assistance, or special training. For such intuition to be possible requires prior knowledge, from experience in the real world. So, for example, if something looks like a push button, we know from the real world that we can push it to make something happen.

Issues

If you found any issues when you're implementing the UNIFY Component Library, please open an issue and our team will help to solve your problem.