Pattern Library

Building Design Library at Cleartax. The components built in the library are under the formula of atoms -> Molecules -> Organisms -> Templates

Atomic Level Designs

We used the Atomic-level design format to describe our Design library. So, we divided both New and existing components into 4 category

1. Atoms

In chemistry, atoms are the basic building blocks of all matter. We cannot break down the atom further without losing its meaning. When we relate this to our design systems the atoms are very much the basic assets of our product. They are the foundational building blocks that comprise all our user interfaces. It includes all the basic elements for designing the library, such as :

2. Molecules

Molecules are a group of atoms pieced together to complete a function. In design systems, let us consider the molecules as our building blocks or ‘atoms’. Piecing 2 molecules together form a functional element. Here we are combining 2 elements and providing the 3rd element, such as :

3. Organism

Both atoms and molecules are simple functional forms in our design systems. where every product can reuse it. We can think of these organisms in our design systems as groups of molecules. These can be used as a distinct pattern across a product.

4. Pages

Now we have met the basic formation of a design system through atoms, molecules, and organisms. Organisms used to make up different templates that can contain many features. These templates are then used to make up the majority of product touchpoints.

The following picture is how the design system built-in Cleartax