Standardize the style of figures throughout the website

[jbkoh]

@gtfierro It is important to keep a consistent style throughout the website for figures.

Colors

I would like to reuse the colors we used in our Brick poster like this: https://github.com/BrickSchema/brick-website/blob/addconceptpage/webpages/images/concepts/relationships.png

The color codes are:

• Classes
  • Location: D5E8D4
  • Equipment: F8CECC
  • Point: DAE8FC
  • Substance: FFF2CC
• Instances: F5F5F5

Note that these are defined in the default palette at draw.io if you use it.

Fonts

For visualizing Brick graphs (instances, classes, and relationships), I would like to use Fira Mono. Each character has the same width like Courier New, but Fira Mono is wider and thicker so it's easier to read.

Let me know if you have other preferences. I'd like to learn Kierstyn's opinion on the design eventually, but it'd take more time.

[gtfierro]

I'm ok with standardizing the color scheme and font choice. My only concerns are for accessibility:

• make sure the color palette is color-blind friendly
• choosing a font that is built-in to browsers (less important for figures, but important for prose)

Can you produce a swatch image that has those colors so I can take a better look? I don't use draw.io and I'm not going to give an external application access to my Google account just to take a look

[jbkoh]

I changed the font to Andale Mono, which should be web-safe.

Link: https://github.com/BrickSchema/brick-website/blob/addconceptpage/CONTRIBUTING.md#brick-diagram

[shreyasnagare]

Color combinations that are a potential nightmare to color blind users (which we're using):

• Green & Red
• Green & Blue
• Light Green & Yellow
• Blue & Grey
• Green & Grey

source