Background

The ITDP program is a meticulously crafted initiative designed to cultivate and empower the next generation of tech leaders at Bank BJB. This exclusive program provides a comprehensive platform for aspiring IT professionals to hone their skills, gain valuable industry experience, and contribute to shaping the future of technology within the bank.

Project Goals

By creating a consistent design system empowers developers with reusable components, shortening development time. Standardized styles ensure visual harmony across all designs.

Methodology

Again ITDP BJB is a platform that is used by several batches or groups, so I use the atomic design methodology by Bradfost where I create a design guide from the smallest one and the components that are made are easy to customize and can be reused.

Crafting

Take small steps to find Primary font, the i found the fit one is DM Sans font from Google Fonts

Because the design of this system is for BJB learning management, I used the color palette from the existing BJB guidelines

After dealing with colors, I started making other atomics such as buttons, icons, input fields, and header components, and this is the result of all the atomic design processes.

Seamless light and dark themes.

Conclusion
While I made some mistakes initially, like using different button hex colors in production and inconsistent background colors, I learned a lot from those experiences. The biggest challenge, however, wasn't creating the design kit itself, but maintaining and updating it to keep pace with our evolving apps.