Diana Design System

Diana is a design system made for Sicredi, a system of credit cooperatives founded 117 years ago by the priest Theodor Amstad. The story goes that Amstad traveled around Brazil with his mule, Diana. That's why the design system got its name.

With the advancement of technology, any company is forced to offer quality digital experiences. When we talk about a company that serves more than 4 million people with constant product growth, it is impossible to support healthy and consistent growth without organizing an ecosystem of reusable visual styles and code.

That is why Diana was created.

Today, the Design System is being applied to new Sicredi applications, with a focus on self-service and CRM. It serves Android, iOS, and Web platforms.


Token design diagram. the top, Amazon Style Dicatonary chameleon icon spelled Design Tokens. Below, arrows connecting to a system on iOS, Android and web.

process


To gain speed and quality, we work with a collaborative Design System. For this, we created a process where any UX Designer or Developer can report a need that, if approved, goes through the design process.


Illustrated design process. The flow is need, design, documentation, development and publication.

Room with several people. Some people sit around a long table and others are standing in front of a whiteboard with post-its.


design result


Example of design tokens for color, opacity and shadow.

Example of components.

Example of templates.


summary


The tokens and components shown here are just a small part of what has already been implemented and designed. As mentioned before, Sicredi's Design System works collaboratively but is orchestrated by a central team. It represents more than the modularization of design and code, but a way to evolve and products in a sustainable and accessible way, improving the experience of all users.