Design Refresh / Styleguide

[thescientist13]

Overview

Just starting a discussion to solicit thoughts and feedback on the design, theme, and overall aesthetic for the new website. Currently meeting with a designer now so will update here as revisions come in, but please free to discuss here, in particular feedback on the current site. 👍

Styleguide

Will want to define things like:

1. Color Palette (something that can build off the leaf)
2. What font should we use? Could try the new Vercel font Geist or Inter?
3. Components
   • Code snippet w/ copy to clip board
   • Table
   • Quotes / Info Banners
   • Links
   • External Links

Dark Mode

Probably good for a website, especially documentation website, to support Dark Mode. I don't know too much but Syntax.fm did a great podcast on the topic.

Ecosystem

Having this will be helpful so we can style all adjacent projects like the getting started rep and starter kits.

• https://github.com/ProjectEvergreen/wcc
• https://github.com/ProjectEvergreen/greenwood-getting-started
• https://github.com/ProjectEvergreen/greenwood-demo-adapter-netlify
• https://github.com/ProjectEvergreen/greenwood-demo-adapter-vercel
• https://github.com/ProjectEvergreen/greenwood-template-blog
• https://github.com/thescientist13/greenwood-demo-adapter-vercel-lit
• https://github.com/thescientist13/greenwood-htmx
• https://github.com/ProjectEvergreen/greenwood/tree/master/packages/init

[thescientist13]

Got a decent example I think I'm liking, imagine it with the syntax highlighting from #16 and the slideshow from #17

[thescientist13]

Here's what I'm leaning to the most
https://deploy-preview-18--super-tapioca-5987ce.netlify.app/

Some odds and ends to clean up with animations, spacing, gradients and of course overall vibe, but I think it's an aesthetic I am happy with.

[Auhseh]

Currently working on the Style Guide, Here's the initial exploration;

https://www.figma.com/file/ePhyD5qNMrBAcHwQ08BnQC/GreenWood?type=design&node-id=1%3A2&mode=design&t=400dqKMaa6XxjPvW-1

[Auhseh]

Overall I have made considerable progress on the page structure, We should start exploring ideas for the copy.

[thescientist13]

Thank you so much, and so let me digest the side-by-side. I do like it a bit more than the black. With project being Greenwood and that connotation of evergreen browsers, a blue feels a bit more thematically aligned than black. (but I guess all life springs from carbon, which is traditionally a black color 😅 )

One thing that might help bring the blue into place is the syntax-highlighting, in which in the PR I was using the Nord theme, which might be worth incorporating

• demo/home page walkthrough slideshow minimal green #18
• https://marketplace.visualstudio.com/items?itemName=arcticicestudio.nord-visual-studio-code

Here the various Prism themes for consideration

• https://prismjs.com/
• https://github.com/PrismJS/prism-themes

I think it might still be good to keep the headings text as black (like for the hero heading). I guess ultimately we should consider whatever one would likely play the best with contrast accessibility and dark mode.

[Auhseh]

I get your preference for the blue 😅
I'll try to make it work

[thescientist13]

Had a chance to get some feedback on the team and they don't feel the black is too Vercel-y hah, and agree that too many accent colors could start to complicate things. Perhaps not so much of a pitch black though, maybe a charcoal or similar direction might look nice, but otherwise yeah I think let's work on making the black + light green work for that section instead of the blue. 👍

Appreciate you looking into it. I'll also start playing around with syntax highlighting colors just to see what good options might align with that theme.

[Auhseh]

Bigups to the team 🙌😅

[thescientist13]

Ok, between #23 and #25 and the work done in #4 and #5 , I think we can branch out to those issues for future tracking and close this one out.