UI Request: Design System Guidelines

[KyleTryon]

Component Type

Other

Component Location

separate repo? / Wiki? / .github

What is the component's purpose?

Create a simple design system to serve as a reference for developers, designers, and all contributors when creating new components for Shoutify. A design system should increase consistency in the application and provide clarity when creating new assets.

It may also serve as a basis for CSS utility styles in the app.

The actual end-product could be as simple as a markdown file within this repo (and I suggest we start this way) located at .github/DESIGN_SYSTEM.md, or a separate repository, using a framework such as BookStack to host the content.

---

Current Style Examples

• Rounded Corners
  • rounded-md tailwind
  • Applies to "cards", buttons, modals. Is never applied to items that make up the main layout of the page
• Spacing 4
  • mx-4 and my-4 are the default margin for spacing components
• Colors
  • gray: colors.zinc
    • Background - 900
    • Panel - 800
    • Button Active - 700
  • blue:
    • Primary Button - 600
    • Primary Button Hover - 400

---

References

• https://material.io/design/introduction
• https://www.lightningdesignsystem.com/guidelines/overview/

[Onyelaudochukwuka]

I'll like to create a design system on figma It won't be much of an issue implementing since this is a tailwind project 🤩

[KyleTryon]

Thanks @Onyelaudochukwuka, I actually just contacted Figma to ask what an open-source organization Figma account would look like.

We are now using Storybook, so there is a lot of room for writing design documentation there now: https://github.com/TechSquidTV/Shoutify/blob/main/src/stories/Introduction.stories.mdx

It does look like there is some amount of interoperability between Figma and Storybook. Once I learn more about how we can utilize Figma as an open source org, I'll look into getting a "shared" account.

• https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
• https://storybook.js.org/blog/figma-plugin-for-storybook/

Getting a Figma account may mean we are limited to a select design team for an "organization" I suspect.

[Onyelaudochukwuka]

yes probably, i haven't actually used story book before. I'll absolutely love to try it out

[KyleTryon]

I'd love to come up with a defined color palette to start, something we could potentially interchange and allow for custom themes, but of course, we need a default list. In one of our designs here there is a frosted glass look which I really like, but it's hard to incorporate that into color thinking.

I have been loving these theme for my personal things: https://www.nordtheme.com/ which has a color set. I am not sure if it's ideal for Shoutify, it's very muted in color, which I like, but also lacks a bit of contrast. I do like the darkness of our current theme.

I would love to borrow from an existing design system like nord though, so we can reference it rather than maintain our own color guides.

[Onyelaudochukwuka]

The polar night theme looks similar to what we have right now, we can go with that🤔