Update site branding about blitzjs.com HOT 4 CLOSED

• The i in the logo is customized by Kristina — you won't find it anywhere else!
• I don't care too much what y'all use for CSS, but my recommendation would be Theme UI. It has built in support for MDX: https://theme-ui.com/mdx-components
• Here's the brand summary with fonts:

from blitzjs.com.

@flybayer @robdrosenberg @coreybrown89

I wanted to raise issues I've found so we can decide how we want to move forward. These comments will also relate to #28

I'm finding some deficiencies with Infima, the built in design system that comes with Docusaurus. The big one being it's completely undocumented. It's considered not ready for production and is being built specifically for v2 docusaurus (https://facebookincubator.github.io/infima/) so that's not unexpected, but that means for our use it's hard to work with. Other related issues:

• Hard to know what tools I have available if I'm working within the system
• Their light and dark modes are coupled heavily with their variable set-up. And it seems to expect white background on light mode so the font colors aren't WCAG 2.0 compatible. And it's not obvious how to fix/change without having unintended consequences elsewhere. See the "Getting Started" in light mode or the dark text in dark mode of the hero image https://blitzjs-com-git-branding.blitzjs.now.sh/

The above issues might be partially rectified as our wonderful designer finishes her design of the site since the hero image arbitrarily uses the updated branding colors. It would probably have to encompass light and dark modes if that's what we want available on our site. However implementing her design using the undocumented design system might be difficult.

More general dev thoughts:

• We need to decide how we want to do styling in general, ie CSS modules, regular css, SASS, utility class based (Tailwind, Tachyons, etc), etc. We currently have a couple ways we're doing it.
• Are we planning on using a component library or just staying within what the docusaurus provides? Keeping in mind if we use a separate component library we'd have to figure out how we want to theme it since component libraries tend to come with their own theme customization and we might end up fighting with Docusaurus styling as well.

Design related:

• We may need an SVG logo that has a transparent background. That way we can use it wherever we need it (e.g. nav bar, hero section) and have "Blitz" be regular text
• Related to above, the PNG logo seems to have different text font than the branding fonts, not sure if that matters. I mostly noticed the "i" is not Franklin or Roboto. So that means we either have to use images anywhere we need logo + text, or we're OK with the name text not looking the same as the image based branding elsewhere (Twitter, GitHub profile, etc)
  • If we go the PNGs for the logo + text route, we'll probably need those images to just have the text and logo with a transparent background
• How should the two fonts be utilized?

from blitzjs.com.

@jasonblalock

My votes for moving forward with out inferma for the time being. If it becomes a pain point later one when it's further developed maybe we can consider moving over to it? How hard would it be to move away from it now?

I agree we need to decide on a CSS solution ASAP. I'm most familiar with CSS in JS with emotion or styled components. I'd like to use one of these on the video player in #32. I know we talked early on about using something like Theme UI though. Do you have a preference?

I'll see if I can get our designer to provide some SVG assets!

from blitzjs.com.

Closing due to new site updates from @flybayer

from blitzjs.com.