Chapter Style Guide Documentation

[Sboonny]

Kudos to the original wireframes
https://www.figma.com/file/ehgBfxoLKrlSZH0uftD6dA/Chapter-Trial?node-id=0%3A1
https://www.figma.com/file/q7DikyL3N0c4CUWxHNa97i/Chapter-Prototype?node-id=1%3A2

With new features and new idea being suggested, it's better to have a style guide works as a base for future ideas, suggestions and wireframes

---

This style guide prototype should include

• Colors a good tool for this is mycolor.space here is the colors with our dominate one
  • Dominate
  • Complementary
  • Accent

---

• Typography
  • Font Families
  • Headings style
  • Paragraphs styles

---

• Interactions

  • Nav Bar states
  • General Button states
  • Pagination State

  After including these basics, we can add how to add tags, icons, layout and more. I am wondering if we should create a static site for the guide?

Useful Links

Customize component theme
building your color palette

[allella]

@Sboonny given's Quincy's suggestion to ship something sooner than later, it sounds like this wouldn't be an MVP issue.

Are there any quick things we could do to the CSS colors, fonts, etc to give it more consistency and visual appeal before a full style-guide is created?

[Sboonny]

@allella yes, I am planning to use primary color and fonts mentioned in the figma.

I will push a watered down version of these files to pick up the speed

https://github.com/freeCodeCamp/freeCodeCamp/blob/c7c8aa58cb5d71cb0c7453e452a39e02a17bca6f/client/src/components/layouts/variables.css
https://github.com/freeCodeCamp/freeCodeCamp/blob/c7c8aa58cb5d71cb0c7453e452a39e02a17bca6f/client/src/components/layouts/global.css
https://github.com/freeCodeCamp/freeCodeCamp/blob/c7c8aa58cb5d71cb0c7453e452a39e02a17bca6f/client/src/components/layouts/fonts.css

So as far as the plan go, less chakra usage if it isn't beneficial, and make every button paragraph and type carry primary color, and red color only for delete and transfer buttons.

We can push planning and ui components after MVP