This PR introduces a design system of colors, fonts, and spacings based on Tailwind's default design system.

Motivation

The purpose of introducing a design system is to make it easy to create pleasing diagrams without having to worry about annoying low-level details like specific color values, font sizes, and spacings. The default collection should take care of 80% of these decisions by providing a smaller set of discrete choices that are designed to work well together.

Choices

API

To be consistent across color, font, and spacing, I have decided to pick linear array indexing. This makes the API easier to intuit rather than having to remember e.g. specific exponential sizes for spacing or that colors go by hundreds except at the beginning and the end. I anticipate most people will not be using Bluefish every day and are not UI designers (i.e. they do not use Tailwind), so making this indexing simple is better than matching Tailwind's style here.

Color

I surveyed a lot of color palettes before choosing Tailwind's. A good color palette for diagramming should

cover the entire spectrum of hues
be reasonably accessible
be simple enough to use (i.e. have common color names)
have enough colors to be sufficient for most use cases

It's really time consuming to construct our own color palette. The payoff would be giving a more distinct look to Bluefish diagrams, but the amount of time it would take to design one that actually looks nice is very steep (probably at least a month of dedicated work).

I have separated colors and grays into different namespaces. I'm not sure whether or not I like this yet, because often when choosing font colors I find myself switching between colors and grays, so having to rewrite two keywords instead of one is annoying.

Font

I have introduced three main fonts: Alegreya Sans for display, Source Sans 3 for body, and Fira Code for mono/code. Based on Jen Christiansen's book on diagramming graphic design, diagram typography should emphasize legibility above all else. She claims sans-serif fonts are more legible, especially went printed on colored backgrounds. Source Sans 3 appears to be very legible and pleasing. Alegreya Sans is a nice font for giving character to diagrams while still remaining legible. I have listed it as the "display" font because I intend to use it for titles/headings mostly. I looked at the original serif version of Alegreya as well, but I like the sans-serif version better. Fira Code is of course a great font as well.

I am using a slightly modified font scale from the one in "Refactoring UI." I added a few more sizes on either end of that scale. I use those sizes for Source Sans 3 and manually picked sizes for the other ones to match x-heights across the fonts. That way they can be replaced with one another more easily or used in the same block of text (e.g. embedding code in a paragraph).

We will have to pick another font for math once we get there. I will probably go with Stix.

Spacing

I took spacing from Tailwind verbatim. I need to play around with it more to figure out if I like it or not. I'm not sure how often I want to e.g. reason about making spacing twice as big versus just picking a slightly bigger spacing.

Sizing

I'm not sure if I need sizing or not. For now I'm not including it.

bluefishjs / bluefish-archive

feat: Design System #70