feature/issue 23 Styleguide and Design System

[Auhseh]

Related Issue

resolves #23

Summary of Changes

1. Introduce Geist font family to project theme
2. Add Storybook docs for Tech Stack, Documentation, and Styleguide

TODO

1. [x] Apply PR Feedback - https://github.com/ProjectEvergreen/www.greenwoodjs.dev/pull/36#pullrequestreview-1999367913
2. [x] Need to pull in https://github.com/ProjectEvergreen/greenwood/issues/1199 (or track unpatching it) - @thescientist13 - #37

[netlify[bot]]

✅ Deploy Preview for super-tapioca-5987ce ready!

Name	Link
🔨 Latest commit	d8f9b7335c6634d402c2ea31183776d036ba7ff5
🔍 Latest deploy log	https://app.netlify.com/sites/super-tapioca-5987ce/deploys/662bc7183826eb0008cbe87d
😎 Deploy Preview	https://deploy-preview-36--super-tapioca-5987ce.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[thescientist13]

Thanks @Auhseh for all this , looking good pretty good!

I just made some updates to get the colors and fonts showing in Storybook

Left some comments in-line for and this one: what is the _Gridwh.svg for?

(also, I renamed the assets to be consistent casing and using - for the space, just a bit easier to have all the files named the same way)

[Auhseh]

@Auhseh It would be good if we get as many of the images we think we'll need in now if we're planning on committing a bunch of them. I think at least for the header we would need

• Discord
• X / Twitter
• "App Launcher" (or whatever we call the icon we show when the header navigation is in mobile view)

Added the other assets and also added a short ReadMe with a guide on how to use the assets in code.

[Auhseh]

Thanks @Auhseh for all this , looking good pretty good!

I just made some updates to get the colors and fonts showing in Storybook

Left some comments in-line for and this one: what is the _Gridwh.svg for?

(also, I renamed the assets to be consistent casing and using - for the space, just a bit easier to have all the files named the same way)

Thanks, it's the Grid background, Renamed it and added context in the ReadMe

[Auhseh]

I think everything's pretty much ready, last thing would be to adding Description icons in the "Why Greenwood" section, pending when we articulate the copy.

[thescientist13]

Thanks, let me review.

Let's try and keep the filename consistent as I had updated them to be something like some-name.png on the last change. I will fix the new ones added but just so we can keep the convention the same for everyone contributing to the project. 👍

Renamed it and added context in the ReadMe

Thanks, but I'm going to remove / clean this up since I was just asking as part of this conversation here in GitHub, I don't want to start documenting every single asset, ideally when we start using them their purpose will be clear, or even better we can use a more descriptive name.

Same goes for color variables, let me just move any relevant info into the storybook instead and / or apply a name change.

I also deleted the Menu.svg since I don't think that actually needs to be an image, just some text and CSS should do fine for that, and I assumed it might be flexible as a general "badge" like component.

[thescientist13]

Thanks, it's the Grid background, Renamed it and added context in the ReadMe

Ok, I was hoping maybe we could handle all those with CSS, but maybe we will need these as SVGs?