UI Request: Design System Guidelines #16
Comments
I'll like to create a design system on figma |
Thanks @Onyelaudochukwuka, 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.
Getting a Figma account may mean we are limited to a select design team for an "organization" I suspect. |
yes probably, i haven't actually used story book before. |
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. |
The polar night theme looks similar to what we have right now, we can go with that🤔 |
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-md
tailwind4
mx-4
andmy-4
are the default margin for spacing componentsReferences
The text was updated successfully, but these errors were encountered: