search

Ondsel-Development / website

Docusaurus website
1 stars 0 forks source link

Design System #31

Open patdavid opened 12 months ago

patdavid commented 12 months ago

A Design System should probably be defined for the branding overall, but particularly for the website work as I continue hacking.

I noticed that there are a couple of small changes to the default docusaurus theme that have already been implemented (in custom.css).

I figure we can use this issue to discuss.

Some of this is based on defaults as provided by the Infima styling framework that's tied into docusaurus.

Infima

I recommend embracing the styling framework for any work to stay consistent and not have to re-invent the wheel. This means following the use of grids and spacing with their classes wherever possible (this will make responsive work much easier I think). Only extend when absolutely necessary.

Font

It appears the site is using Rubik for a font face. How many weights do you want to include? I'm assuming at a minimum:

As these are already in use.

Colors

On the front page I see the use of a striking orange/red color that seems to match the logo color? It presents as #e6421b or rgba(255, 74, 31, 0.9). Should we use this same color for links as well? The current link color appears to be a bit washed out to my eye, and using the logo color brings a nice consistency I think.

It seems the primary color should be #15141A (from --fbc-primary-text).

What do we want to do for dark/light themes? Just support one or the other, or both? (This may require reverting overrides for colors and setting them to work with dark/light, as well as configuring dark/light as an option in the config).

There's more, but this would help to get the basics going I think.

sliptonic commented 12 months ago

This is a great topic for discussion and is bigger than the website. It touches on a strategic direction for the product as well.

I shared a Google Drive with you that has some of the branding assets. I'm not sure if that's helpful.

I elected to use the orange logo color with a dark background for the blog title cards because it is so recognizable at a distance. It makes our content stand out on a Reddit or Twitter feed. Continuing to build a brand association between Ondsel and that color is good but can obviously go too far.

Up until this point, we've been pretty intentional about the overall design of the website. The visual design of the product, however, has lagged. I would like to see these start to converge.

I'm fine with just supporting a dark theme on the website but the product will have to support both so it probably makes sense that the website also supports both and we aim for consistency.