EPIC: Re-build the Design System

[RenaNicole]

Overview

As part of our ongoing commitment to enhancing user experience, the Design team has identified gaps and inconsistencies within our current design system. These observations were further supported by updates made during the IUT2 phase to better align components with the website's UX standards. In response, we are embarking on a comprehensive initiative for improving our design system.

Following "Atomic Design" practices, we will begin working on the "atoms"(elements/visual styles) and work up to improving our "molecules" (components). Amid working on each "atom" and "molecule", each issue should include

1. Auditing wireframes with such element/component - if needed
2. Standardizing element/component
3. Updating element/component on Figma
4. Drafting usage guidelines
5. Handing updates to Dev

Actions to be taken

• MAIN: Improve the color system  #1226
• [Design System] Adjust and Finalize Typography  #983
• Refine Spacing (margins, padding, grid)
• Improve icons
• Improve Illustrations
• Refine shadows
• Research new visual style #1227
• Refine buttons
• Optimize checkbox
• Improve modals
• Refine Navigation bars
• Refine radio button
• Optimize text fields
• Optimize progress bars

Resources / Notes

• Prior to planning out this initiative, the Design team conducted background research and compiled it here

[anitadesigns]

Team decided to identify which atom to start auditing in a future meeting and keep this github issue as an outline to the steps we will take to improve our design system

[anitadesigns]

updating the issue to reflect the new issue framework the team implemented. Since it is a large issue, will slowly work on building out the main and request issues

[github-actions]

Hey @anitadesigns! Thanks for taking this issue.

To help keep everyone in the loop, please comment your Estimated Time to Completion (ETC) below!

Thanks again!