search

purnima143 / Pluto-UI

Pluto UI is a comprehensive React UI component library designed for ecommerce websites. It provides a wide range of reusable and customizable UI elements to enhance the user experience of your online store.
MIT License
27 stars 52 forks source link

Making a design system for Pluto UI and implement them #35

Closed Rishika-S-V closed 1 year ago

Rishika-S-V commented 1 year ago

Fixes #11

Lovelyfin00 commented 1 year ago

Hey @Rishika-S-V In order for this to be a valid pr, add an explanation of what you did and include screenshots

Rishika-S-V commented 1 year ago

Design System for Pluto UI

Colour System

The colour system introduces a harmonious palette that brings visual consistency and clarity to the application. It ensures that colours are thoughtfully chosen to convey meaning and create engaging experiences.

Colors

Border Radii

The border radii modifications refine the shape and form of elements, giving them a polished and modern appearance. This unified approach ensures that corners and edges are consistent across the interface, promoting a cohesive visual language.

Border radius

Elevation

Elevation adjustments within the Design System contribute to a more intuitive user experience. Interactions become more tangible by carefully defining the depth and shadowing of elements, providing users with a sense of hierarchy and depth as they navigate through the application.

Elevation

Display Font

The Display fonts play a pivotal role in the aesthetic appeal of the interface. The updated fonts strike a balance between legibility and style, enhancing readability and evoking a sense of brand identity. These changes will bring a refined and professional touch to the overall design.

Display Font

Headings & Paragraph

Headings and paragraph sizes are being optimized to establish a clear hierarchy and improve content presentation. The updated sizes and spacing ensure that information is appropriately emphasized and easily scannable, enhancing the user's ability to quickly grasp the key points.

Headings

Paragraph

Lovelyfin00 commented 1 year ago

Thank you so much for this It's looking pretty solid🎉🎉

@purnima143 @AdityaSingh-02 What do you guys think?

AdityaSingh-02 commented 1 year ago

Looks pretty good we can go for it

Lovelyfin00 commented 1 year ago

Awesome!

Lovelyfin00 commented 1 year ago

Hey @Rishika-S-V Can you put all the pdfs inside a sub folder called maybe design system? This is because other designs would also be in this design folder and we don't want everything to be clustered together

Rishika-S-V commented 1 year ago

Updated the folder structure @Lovelyfin00

Lovelyfin00 commented 1 year ago

Great thanks! Merging now

Lovelyfin00 commented 1 year ago

Forgot to remind you. Please always delete your package-lock.json file

Lovelyfin00 commented 1 year ago

This looks super good Great job @Rishika-S-V