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.
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
#e6421borrgba(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.