Making a design system for Pluto UI and implement them

[shivam-jainn]

I want to work on design system for this project .

We will be covering all the major thing required for E-Commerce UI libraries .

Goal of the UI lib : An E-Commerce website can be made just by our components alone . No additional coding should be required .

Needs : 1) Documented & Well designed components 2) Components independent of each other 3) Consistent design

[purnima143]

Hi @shivam-jainn , Sure! To begin designing the system, we can follow these steps:

• Design in Figma: Start by creating the system design in Figma. Figma is a collaborative design tool that allows multiple people to work on a design project simultaneously.

• Create a Pull Request (PR): Once you have designed a component, it's time to create a PR. This PR should include two things:

  • Image of the component: Take a screenshot or export the component as an image (PNG, SVG, or any suitable format).

  • Figma link: Include the Figma link to the design. This will help others access the design file directly.

  • Organize the design files: If you have completed designing the buttons, it's a good practice to organize your design files. Create a folder named 'design-system' inside another folder called 'Button'. This will help maintain a structured design system.

• Add the image: Place the image of the button component inside the 'Button' folder you created. You can use either PNG, SVG, or any other suitable format for the image.

Let me know if you have any further questions or need assistance with anything else!

[shivam-jainn]

Light Mode Colors

Dark Mode Colors

I came up with a dark mode friendly color palette , is this ok?

[shivam-jainn]

Type Scale for the project

[shivam-jainn]

Failed Pop Up alerts

• A modifiable pop up components that pops up when an error occurs .
• Has 2 parts : 1) Icon (x) 2) String
  • Both of them can be modified according to developer's need

[shivam-jainn]

BUTTON & IT'S VARIATIONS (Dark mode)

• 3 types of buttons are available : 1) Outlined 2) Filled 3) Filled with icon
• Everything is modifiable

[Rishika-S-V]

I would like to join the design system

• I would like to add the Tiint and shades for the Colors (Hue), something similar to this
• Further organization of the typography can be split into subcategories such as Display, Headings and Paragraph. and typefaces can be included.
• Toast notifications can be made subtle and rounded
• Buttons can have more variations like Primary, secondary and ghost buttons and icons with different border-radius and fully rounded edges can be appreciated.

* all the examples provided are from my collection and will be customised specifically for this project.

[kisshan13]

I also want to contribute into designing part may I?

[Lovelyfin00]

Hey @kisshan13 @shivam-jainn Please join the project channel on discord by going to #self-role and selecting Pluto UI if you haven't done so. You can dm me on discord @Lovelyfin00 or Aditya @Aditya_op

[shivam-jainn]

@Lovelyfin00 @AdityaSingh-02 @purnima143 https://www.figma.com/file/a9ny3G0uoC73qH3vPwZ1vj/Untitled?type=design&node-id=0%3A1&t=IN9CYUnSDqce3YKZ-1

This is the figma file i am using for designing these components . Any suggestions would always be welcome :)

[Lovelyfin00]

Hey @shivam-jainn I would like you and @Rishika-S-V to work together on designs So that means working on the same figma file but designing different components

[shivam-jainn]

I also want to contribute into designing part may I?

Hey ! Connect with me on discord and we can definitely work together (if you want to) pablowww#7316

I am extremely sorry for the late reply ! I have my sem ends going on :)

[shivam-jainn]

Hey @shivam-jainn I would like you and @Rishika-S-V to work together on designs So that means working on the same figma file but designing different components

Yea sure thing ! @Rishika-S-V pablowww#7316 Hit up ! Let's work on this

[Lovelyfin00]

I also want to contribute into designing part may I?

Hey ! Connect with me on discord and we can definitely work together (if you want to) pablowww#7316

I am extremely sorry for the late reply ! I have my sem ends going on :)

It's ok. I'll send you a dm on discord.

[shivam-jainn]

I also want to contribute into designing part may I?

Hey ! Connect with me on discord and we can definitely work together (if you want to) pablowww#7316 I am extremely sorry for the late reply ! I have my sem ends going on :)

It's ok. I'll send you a dm on discord.

alrighty !