black, white, red, yellow, green, blue
feather is hawk's default styling library.
it takes the form of a set of utility css classes, heavily inspired by the ever-popular tailwind-css.
the main differences between feather and tailwind are:
feather prefers shorter class names
feather exposes css variables, so that all styling can be customized by the end-user
feather provides far fewer colors
my reasoning for the first two is fairly obvious, but the third requires some unpacking, and this document intends to do that.
i was reading a gwern article about the color red and came across this section:
…in [human verbal] languages with fewer than the maximum eleven color [terms], the colors followed a specific evolutionary pattern. This pattern is as follows:
All languages contain terms for black and white.
If a language contains 3 terms, then it contains a term for red.
If a language contains 4 terms, then it contains a term for either green or yellow (but not both).
If a language contains 5 terms, then it contains terms for both green and yellow.
If a language contains 6 terms, then it contains a term for blue.
If a language contains 7 terms, then it contains a term for brown.
If a language contains 8 or more terms, then it contains terms for purple, pink, orange or gray.
feather acknowledges this hierarchy in our minds as fundamental to color theory itself.
and so mirrors this hierarchy for the coloring of foregrounds and backgrounds in digital interfaces.
zero always represents black or white depending on light/dark mode and foreground/background.
the positive numbers represent a gradient of gray away from black or white as they get further from zero.
the negative numbers represent a gradient of color away from the primary colors as they get further from zero.
i am totally enthralled with this “mental move” of using integers to map real-world hierarchies such that they are coherant to both humans and machines.
the urbit naming system does a similar such move: ~zod is 0, ~nec is 1, etc
i wonder what other types of things can be meaningfully mapped to integers?... watch this space.
maybe!
unlike tailwind, feather does not intend to be comprehensive.
instead, it intends to be an easily learnable starting point for styling interfaces.
it will be good enough for most interfaces. (it's been good enough for all of hawk so far)
but for some interfaces you will want more colors or more structure than what feather provides.
in those cases, simply stick your own custom css in a ;style tag.
easy!