TL;DR

The Key Components:

• Reusable UI Kit: A collection of versatile and scalable design elements, from buttons to widgets, ensuring consistency and speeding up the design process for the app's interface.

• Developer Guides: Detailed documentation providing clear guidelines for developers, ensuring efficient and accurate implementation of design elements into the app's framework.

Identifi’s Design System is a strategically crafted UI Kit and comprehensive guide tailored to enhance and expedite the design and development of our in-house collaboration tool. This system embodies our dedication to creating a seamless, intuitive, and visually cohesive interface, mirroring our core values of fostering a positive and productive work environment.

Type scaling

Headers have typically tighter line height scales compared to the paragraph. We follow the 4-point system to compute our typography spacing such as line height, paragraph spacing, and character spacing.

We need to create sets of breakpoints for web and mobile.

4 px, 8 px, 16 px, 20 px, .... N px

To keep the buttons, tags, and labels components proportion according to its baseline, we will multiply them with 100%.

Please note: In compliance with the Non-Disclosure Agreement terms set forth by the company, I am limited to displaying only selected screens from this project. Confidentiality and adherence to the NDA terms are strictly maintained.

Feel free to reach out!

I am available for a FREE online 1-1 mentorship.

Go to www.adplist.org/mentors/estella to book a 30-minute session with me.

I am also open to event speaking engagements with the following topics:

• UX Design

• Typography

• Design System

• Design Management

• Brand Identity Design

• Career Progression in Design

• Women Empowerment topics

Inquire about speaking availability by sending me a message on LinkedIn.