responsive mode

Pattern Library

The Zuto pattern library exists to create a common experience for users across all our products and touch points.

"Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner."

Brad Frost

We use the atomic design methodology created by Brad Frost to build UI's at Zuto.


These are the foundations that underpin every page. They include the grid, colour, iconography and typography.


Are the basic building blocks our UI's, such as a heading, an input or a button.


Are groups of atoms bonded together to form a usable building blocks which we can then work with such as a form.


Are groups of molecules joined together to form a relatively complex, distinct section of an interface such as a header, menu or a carousel.