OnlinePajak Design System

Collaborating with other UI and UX designers -- also with the web developers, I was in charge of creating and managing the design system to make sure that the whole application has the same look and feel. These guidelines have space for flexibility, and are continuously revised and expanded to suit changing product needs.

Design system is a library of shared styles, symbols or components that can be used by product teams to design or prototype new experiences. This foundation defines characteristics such as typography, colors, icons, spacing and information architecture.

The Colors

"Colors are one of three most pervasive building blocks of any interface (next to typography and space). They exist in every UI pattern in one way or another. It means that defining a color palette can make the lives of designers and developers much easier..." Marcin Treder

The Tables and Text Fields

A user interface system helps our users navigate intuitively and makes it uniform across our product, making them familiar with the design language.

Some visual rules helped me define these small elements to make the UI look even more uniform. Breaking them down also helped me design other elements better.

The Icons

The Buttons

Buttons are going to be really vital elements of the UI Design. They should be easily findable and identifiable while clearly indicating the action they allow a user to complete.