Open KyleTryon opened 2 years ago
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 🤩
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.
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'll absolutely love to try it out
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