A Design System for six products

To keep eficiency and health in a design project, a series of good tools and practices are required: organization, naming, guidelines and communication among others. All together helps to generate a safe environment where every stage of the project can be taken care of.

Since the aparition of designs systems some years ago, it’s very recommendable to have one in a web project as the central tool that enables the design process, specially if it’s not one but six sister websites you are working for.

At the heart of the design system lives the Library, a master document(s) that contains all the components and assets required to build the website. From layout to typography, color, iconography and IU elements, all have a connection to a specific unit in the library that creates a intertwining of elements living and growing constantly.

For six websites that shares a very similar structure, almost all components are reusable. By adapting typography and visual styles, they fit perfectly in other website.

By having in mind an atomic design approach, templates and specific layouts are build over the library components, packing all this assets and styles under one unique page design.

Finally, the key to work on several sites at the same time is to have the right tools and processes, supported by a good team and a powerful design system. Also, basic values as organization or communication are fundamental to work in complex projects in a succesful way.