Mauve

A design system I created as a personal project. The design includes typography guidelines, a colour scheme using WCAG 2.1 contrast ratios, a grid system, spacing recommendations, shadows and icons. I also created navigation elements such as tabs and breadcrumbs, as well as cards, accordions and modal dialogues. I also accounted for the different states for inputs, buttons, alerts and other UI elements by using component variations.

Please feel free to check this project in detail by hitting this link

Desktop view of the homepage.

This is the page I created for the product detail page.

These are the screens I created for the homepage as well as the product detail page.