sicredi-hero-image.png

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.


iPhone mockup on green background with exploded view of green and white cards.

context

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