Design System CESDE

Back

Design System CESDE

Design system created for CESDE, an educational institution that has been promoting job training for over 50 years, offering more than 30 technical programs.

Role

  • Design system, UI design, UX design

How did I help?

  • Mockups, Design system

Project duration

  • 6 months

Challenge

  • Creating and maintaining a design system across the entire institution to ensure visual consistency among all CESDE's digital products.

Solution

  • Based on the institution's identity manual, a design system was created to address both existing projects and new requirements for digital products.

Tokens set up

Based on the institution's brand identity, I began defining each layer of Tokens (Global, System, Components) to standardize the system and achieve consistency and scalability of components. The following tokens were defined in each layer: colors, font-family, font-size, font-weight, line-height, spacing, sizes, borders, and effects. A total of 409 tokens were configured using Figma Variables.

Components

For this project, over 40 new components were created and some existing ones were redesigned. The goal was to implement a gradual and subtle change to avoid causing a significant impact on the recurring users of the institution's platforms, thereby preventing a poor user experience.

A total of 29 new views were designed using this design system, including landing pages, internal systems, and product interfaces.

Tagged