Kicking off our design system with big ideas!! 🚀

[J0sueTM]

Me and @Felipe-gsilva have been discussing around the stuff you were able to manually pick out of our existing UI as possible separate components. Finally, this is the list we came up with. @avelino @matheusfrancisco What do you guys think?

---

moclojer design system

components

• pfp
• button:
  • dropdown
• logo
• icon
• aside
• breadcrumb
• popup:
  • notification
  • alert
• status:
  • progress
  • state
• text editor
• input:
  • labeled
• select dropdown
• file dropdown

section

• header
• footer
• auth

config

colors:

• main{1, 2, 3}
• error
• warning
• success
• bg{1, 2, 3}
• fg{1, 2, 3}
• text{1, 2, 3}

design choices

• separate pages only from items in the aside;
• any other usecase opens a popup. e.g. user settings;

[avelino]

I like the list, it's worth remembering that the design system won't be made "just" for moclojer, it will be for general use and "coincidentally" we will use it in moclojer lol

looking at the list, I had the doubt why there is logo, wouldn't it be an "image" and where will it be used as the "logo" of the panel?

[Felipe-gsilva]

It makes sense, maybe we could just add logo and pfp as children of a image component. The idea of the logo was to simply add a main image to the system, alike the moclojer logo we use on our header.